前言

進到入最後一個章節，本篇章開始會持續說明如何將 TypeScript 導入 React 專案裡，最後會再和大家介紹筆者怎麼在專案裡運用 TypeScript。

另外要提醒一下，文內說明的專案並非是 Create React App 架構，需要的東西全都是自己配置的，所以可能不適用於使用 Create React App 的讀者。

前置準備

1. 文中的專案會以 Day22 的專案架構繼續講解，如果未跟到前一天的進度，可以從 GitHub 上 Clone 下來。
2. 一顆擁有學習熱忱的心。

安裝 TypeScript

因為在這個專案裡還沒有安裝 TypeScript，因此得執行安裝，如果先前幾篇文章有將 TypeScript 先裝在 Global 中，那這裡就可以先跳過：

npm install typescript -g

安裝完後，初始化 TypeScript 專案：

tsc --init

如果成功就會看見專案裡多個 tsconfig.json。

Webpack、Babel

把他們放在一起講，是因為我們編譯的方式是在 Webpack 中用 Babel 提供的 Presets 去編譯，所以流程是在一起的。

首先從 Babel 中下載編譯 TypeScript 的 Presets：

npm install @babel/preset-typescript  --save-dev

下載後到 webpack.config.js 中，原本的 rule 內有針對 .js 和 .jsx 的 loader 設定，這裡將他們改成 .ts 和 .tsx ，並把剛剛下載的 @babel/preset-typescript 加到 presets 中的第一個。

還有一個地方不能忘記，就是預設編譯的檔案在 entry 中是設置為 index.js ，也要改成 index.tsx ：

module.exports = {
  entry: ['@babel/polyfill', './src/index.tsx'],
  /* 其餘省略 */
  module: {
    rules: [
      {
        test: /.ts$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/typescript', '@babel/preset-env'],
          },
        },
      },
      {
        test: /.tsx$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/typescript', '@babel/preset-react', '@babel/preset-env'],
          },
        },
      },
      /* 其餘省略 */
    ],
  },
};

修改完 webpack.config.js 後，便可以將專案中 src 路徑內所有的 .js 檔案改成 .ts、.jsx 改成 .tsx，src目錄會變成：

接下來打開負責用 react-dom 將 Component Render 到 HTML 的檔案 src/index.tsx，會發現上方在 import 套件時出現一些錯誤：

因為專案裡改用了 TypeScript，所以會檢測到這些套件沒有指定型別，不過好在 React 生態圈的幾個套件都已經有另外的 @types 提供支援，只需下載它們就能解決這個問題：

npm install @types/react @types/react-dom --save-dev
npm install @types/react-redux @types/react-router-dom --save-dev

下載完後套件下的警告就會消失：

除此之外，.ts 是預設無法使用 JSX 的，因此會出現以下錯誤：

Cannot use JSX unless the '--jsx' flag is provided.ts(17004)

解法很簡單，只需要打開 tsconfig.json，然後將 jsx 的註解取消掉：

如此一來，原本 TypeScript 的錯誤就會消失，剩下的 ESLint 的語法問題會在後面的章節中解決，接下來打開 webpack.config.js，設定檔中有個 resolve 屬性，原先只有 .js 與 .jsx，現在替他再加上 .ts 和 .tsx 兩個副檔名：

module.exports = {
  /* 其餘省略 */
  resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
  /* 其餘省略 */
}

循序漸進地改完後，就能放手輸入 npm run build，進行編譯了：

Jest

除了編譯之外，還有一個部分需要請 Babel 幫忙處理，那就是測試，記得先前我們在處理 ES6 也好，React 也好，在測試的時候總是需要添加 Preset 嗎？既然走到了 TypeScript，也是得需要到 .babelrc.js 添加上 TypeScript 的 Preset，測試才不會有問題。

替 .babelrc.js 加上 TypeScript 的 Preset：

module.exports = {
  presets: ['@babel/typescript', '@babel/preset-react', '@babel/preset-env'],
  plugins: ['@babel/plugin-transform-runtime']
};

本文的範例程式碼會提供在 GitHub 上，歡迎各位參考：）

結尾

在這個階段最麻煩的應該是將所有副檔名都改成 TypeScript，如果專案一大，要再導入就得一個一個重新命名，如果各位有其他好方式，都歡迎在下方留言，明天繼續處理 CSS 的部分！

最後，如果文章中有任何問題，或是不理解的地方，都可以留言告訴我！謝謝大家！