资源地址
Typescript 官网 https://www.typescriptlang.org/
本地环境搭建
- 安装
npm i typesctript -g
配置文件 tsconfig
tsc --init
生成package.json
npm init
src目录下创建index.ts,简单编写代码 执行编译
/src/index.ts
const msg = ' typescript'
function sayhello(msg: string){
return 'hello' + msg
}
document.body.textContent = sayhello(msg);
tsc ./src/index.ts
编译后产生index.js 文件内容
var msg = 'ts';
function sayhello(msg) {
return 'hello' + msg;
}
document.body.textContent = sayhello(msg);
可以看出const 变成var了
- 工程化
安装相关工具 webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin
npm i webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin -S
- 创建配置文件 /build/webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.ts',
output: {
filename: 'app.js'
},
resolve: {
//模块倒入的扩展名的处理
extensions: ['.js', '.ts', '.tsx']
},
devtool: 'cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.tsx?$/i,
use: [{
loader: 'ts-loader'
}],
exclude: /node-module/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
}
修改package.json 运行命令
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.config.js"
},
最后打开 localhost: 8080
image.png
至此，typescript的本来开发环境就搭建成功了。
记录一下遇到的小问题
安装工程化依赖时报了gyp的错
image.png
处理方式
rm -rf .node-gyp/
sudo cnpm install -g node-gyp ‘
npm i
删了重新装就可以了
好好学学，天天向上
