使用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则不具备