純JS項目改造為TypeScript踩坑

1. 添加 typescript 依賴和 tsconfig.json

$ yarn tsc --init

其中 yarn tsc --init 使用本地剛安裝的 typescript 初始化了一個 tsconfig.json 含有很多默認配置的文件

修改 tsconfig.json 為以下內容 (可自行配置)

{
  "compilerOptions": {
    "outDir": "./dist/",
    "rootDir": "./src/",
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "module": "es6",
    "target": "es5"
  }
}

查看TypeScript官方配置選項

2. 將所有 js 文件修改為 ts 文件

$ cd src
$ find . -name "*.js" | sed 's/.js//' | xargs -n1 -I {} mv {}.js {}.ts

3. 修復出錯的 ts 文件

執行以下命令來檢查有多少個文件需要修改

yarn tsc

4. 讓 webpack 支持編譯 typescript
   我們接下來我們需要讓 webpack 認識 ts 文件並且以 typescript 自己的編譯器進行轉化, 安裝 ts-loader

$ yarn add -D ts-loader

然后添加 webpack.config.js 文件中對 ts 文件的解析 (自行追加)

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

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js', '.json' ]
  },
};

參考資料

• 從javasc遷移