使用TypeScript

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-02-26

初步使用

// show.ts
export function show(content: string) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}

// main.ts
import {show} from './show';
show('Webpack');

Typescript 官方提供了能将 Typescript 转换成JavaScript 的编译器。我们需要在当前项目的根目录下新建一个用于配置编译选项的tsconfig.json 文件，编译器默认会读取和使用这个文件，配置文件的内容大致如下：

{
  "compilerOptions": {
    /** 编译出的代码采用的模块规范 */
    "module": "commonjs",
    /** 编译出的代码采用 ES 的哪个版本 */
    "target": "es5",
    /** 输出 SourceMap 方便调试 */
    "sourceMap": true,
    /** 为了不让同样的辅助函数重复出现在多个文件中 */
    "importHelpers": true,
  },
  "exclude": [
    /** 不编译这些目录里的文件 */
    "node_modules",
  ]
}

importHelpers选项的作用是减少冗余代码，因为TypeScript编译器会有与Babel同样的问题，点这里

通过 npm install -g typescript 安装编译器到全局后，可以通过tsc main.ts命令编译出main.js 和 main.js.map；

集成Webpack

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

module.exports = {
  entry: './main',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  },
  devtool: 'source-map',
};

需要注意的两个问题

  • 通过Loader将TypeScript 转换成JavaScript 。
  • Webpack 在寻找模块对应的文件时需要尝试ts后缀。Look Here