什么是 TypeScript?

见 TypeScript 专题。

如何在 webpack 中使用？

安装

需要 typescript 和 ts-loader 两个包

  1. yarn add typescript ts-loader --dev

生成 tsconfig.json

这个文件是必须的

npx tsc --init

运行后在根目录下生成
image.png

webpack 配置

/** ./webpack.config.js **/
let path = require('path');

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.ts$/,
        use:['ts-loader']
      }
    ]
  }
  //...
}

构建一个案例

我们来写一个例子，来试验一下。
image.png
写个ts文件

/** ./src/test.ts **/
export function sum(a: number, b: number): number{
    return a + b;
}

然后写个入口文件

/** ./src/index.js **/
import { sum } from './test.ts';

const arr = [1, 2, 3];
console.log(arr);
console.log(sum(2, 5));

然后 yarn build，然后从页面打开js，发现能够正常调用 ts 文件。
结果如下：
image.png