使用webpack打包ts文件，就需要安装 ts-loader
安装： npm i ts-loader typescript -D
webpack.config.js 文件中添加解析 typescript 代码的 loader
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
mode: 'production',
entry: './src/index.ts',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin()
]
}
配置了 webpack.config.js 还不行，还得在根目录文件下新增个 .tsconfig.json 文件，不然页面识别不了ts语法
{
"compilerOptions": {
"outDir": "./dist/", // 默认解析后的文件输出位置
"noImplicitAny": true, // 存在隐式 any 时抛错
"module": "es6", // 表示这是一个es6模块机制
"target": "es5", // 表示要讲ts代码转成es5代码
"allowJs": true // 表示允许引入js文件。TS 文件指拓展名为 .ts、.tsx 或 .d.ts 的文件。如果开启了 allowJs 选项，那 .js 和 .jsx 文件也属于 TS 文件
}
}
package.json
"scripts": {
"build": "webpack"
},
新建 index.ts
class Greeter {
greeting: string; //对参数类型有限制
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world"); //如果类型不正确，ts会提示
let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
alert(greeter.greet());
}
document.body.appendChild(button);
执行打包命令(npm run build)，访问打包后的页面，页面正常执行。
当需要使用 lodash 等库时，需要对lodash中的方法进行参数提示，数据类型提示，需要安装types/lodash
需安装： npm i @types/lodash -D
index.ts修改页面代码 引入 lodash
import * as _ from 'lodash' //ty语法必须这样引入第三方库
class Greeter {
greeting: string;
constructor(message: string) { //对数据类型有限制
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
alert(_.join(['lodash', greeter.greet()], '-')); //参数类型不正确，ts会提示
}
document.body.appendChild(button);
可以看到，ts的一个很大作用，如果类型不正确，他会自动提示，而js则不具备