前言

之前寫過一篇舊React專案安裝並使用TypeScript的文章：在React舊專案中安裝並使用TypeScript的實踐。

部落格裡使用awesome-typescript-loader對Typescript程式碼進行檢測和轉換。

而這幾天又修改了一下自己的腳手架，使用@babel/preset-typescript來處理Typescript。

回顧awesome-typescript-loader方案

談@babel/preset-typescript的優越性之前，還是先說下awesome-typescript-loader方案是如何對TypeScript進行處理的。

首先我們需要知道TypeScript是一個將TypeScript轉換為指定版本JS程式碼的編譯器，而Babel同樣是一個將新版本JS新語法轉換為低版本JS程式碼的編譯器。

所以我們之前的方案每次修改了一點程式碼，都會將TS程式碼傳遞給TypeScript轉換為JS，然後再將這份JS程式碼傳遞給Babel轉換為低版本JS程式碼。

因此我們需要配置兩個編譯器，並且每次做了一點更改，都會經過兩次編譯。

@babel/preset-typescript方案

介紹這個方案之前，我需要列出我參考的一篇譯文：[譯] TypeScript 和 Babel：一場美麗的婚姻。

這裡提到這是 TypeScript 和 Babel 團隊長達一年的官方合作成果，所以至少我們不用擔心這是個野生方案會爛尾。

核心提煉一下：@babel/preset-typescript和@babel/preset-react類似，是將特殊的語法轉換為JS。

但是有點區別的是，@babel/preset-typescript是直接移除TypeScript，轉為JS，這使得它的編譯速度飛快。

並且只需要管理Babel一個編譯器就行了，因為我將腳手架中的typescript庫解除安裝後，依然可以完美執行。

而且重要的是你寫的TypeScript不會再進行型別檢測，使得你改動程式碼後中斷執行的頁面。

所以，檢測呢？

我寫TypeScript就是用來搞型別檢測的啊，你安裝了TypeScript，寫了TS程式碼然後再用@babel/preset-typescript移除不是多此一舉嗎？

不，並不是多此一舉。

還記得前面那篇譯文嗎？

它的方案是使用ESLint，用@typescript-eslint配置ESLint來達到檢測的目的。

而我們的方案呢？

我們是高貴的VSCode玩家，咱們自帶TS檢測，所以這一步咱們可以略過。

一些缺陷

上方譯文中提到了此方案的以下四個缺陷：

1. Namespace語法不推薦，改用標準的 ES6 module（import/export）。
2. 不支援x 語法轉換型別，改用x as newtype。
3. const 列舉
4. 歷史遺留風格的 import/export 語法。比如：import foo = require(...) 和 export = foo。

第1條和第4條不用，而且已經過時了。
第2條缺陷改一下語法就好了，這個語法會直接提示語法報錯，很好改，問題不大。
第3條缺陷已經沒有了，親測可用。

替換步驟

要使用@babel/preset-typescript，務必確保你是Babel7+。

如果不是Babel7+使用者，可以執行考慮執行下面的兩條命令升級：

npm install babel-upgrade -g

babel-upgrade --write

然後我們安裝：

npm i --save @babel/preset-typescript

然後將之前在webpack中配置解析tsx的部分去掉，改為：

module: {
  rules: [
    //...
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: [
          '@babel/preset-env',
          '@babel/preset-react',
          '@babel/preset-typescript'
        ]
      }
    }
    //...
  ]
}

Ant Design的按需載入

必須要把這個東西單獨拎出來說，太坑了。

之前的方案咱們使用的是ts-import-plugin來處理的。

所以下意識我覺得這個地方會很麻煩，網上搜各種方案。

然而必然是沒有答案的，要麼就是ts-import-plugin，要麼就是和create-react-app結合在一起的那種。

實際上咱們只需要升級一下babel-plugin-import到最新就可以了。

我之前就是因為babel-plugin-import版本太低，導致只對js檔案有效，對ts檔案無效。

然後配置一下babel-plugin-import即可：

module: {
  rules: [
    //...
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: [
          '@babel/preset-env',
          '@babel/preset-react',
          '@babel/preset-typescript'
        ],
        plugins: [
          ['import', { libraryName: 'antd', style: 'css' }], // `style: true` 會載入 less 檔案
        ],
      }
    }
    //...
  ]
}

總結

這次升級花的最多時間就在ant-design的按需載入上，其它的東西其實都很好配置，無非是知識點零散些罷了。

說實話很感謝那篇譯文，但是讀起來還是覺得有點生硬。

所以另外一個花時間的點，就是如何有條理地把為什麼升級闡述清楚。

這裡再附上參考專案：腳手架專案