介紹
Typescirpt 以下簡稱 TS 是一個強型別的語言在 React 通常也可以使用 Flow 來增加型別，TS 有更多優異的功能例如智能提示,有錯誤在開發階段型別有錯誤馬上提示，不會累積到要 Build 的時候在提示錯誤,此外在重構也可以使用 Referenc 看看程式關聯避免漏掉 ，TS 也有支援 JSX 副檔名為tsx ，更強的是也內建了 Babel 轉換功能,而且是babel未來版本都支援,所以使用 TS 是一個很好的選項

安裝
npm i typescirpt concurrently -D

設定
因為 Typescirpt 是開發時期會使用所以加上 -D ， 另外 concurrently 是同步執行的意思因為在 package.json script 中 TS 會執行 tsc --watch 只要有異動檔案就會自動 Rebuild 程式碼 因為除了執行 tsc --watch(持續不中斷)， Next.js 也需要同時並行所以需要 concurrently， 這樣就可以在 package.json 的 script 縮短成一行指令同時執行(要不然就要分兩次執行)

package.json
設定concurrently 同時跑 tsc 監聽與 next， \是包在"裡面

    "dev": "concurrently \"tsc --pretty --watch\" \"next\"",

Typescirpt 的tsconfig.json 檔案是重點， 設定完後就會代理許多事情

{
  "compilerOptions": {
    "outDir": "./dist",   
    "module": "commonjs",
    "target": "es2015",
    "moduleResolution": "node",
    "jsx": "react",
    "allowJs": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017"
    ]
  }
}

常見的設定就如同上方
outDir 是輸出的資料夾根據 target 看要產生哪種的 script 以上範例指定 es2015 也就是 es6
moduleResolution 因為 Next.js 是屬於 node 項目所以選擇 node
jsx 可以選擇 react 或是 react-native
typeRoots 是預設 ts module 的定義檔
lib 如果選擇 2017 就會包含之前所有的 2016 2015....等等

以上設定完後就可以享受 Typescirpt 帶來的智能提示以及一些強型別錯誤的偵測功能
進到程式端的部分 以 React 基本元件為 範例

interface Props {
// 這邊定 Props 有哪些
    Open:boolean,
    Word:string
}
interface States {
// 這邊定 States 有哪些
    Show?:boolean
}

class componentName extends React.Component<Props, States> {

省略
}

以上是定義這個元件的 Props 與 States 的 interface 這樣就可以在這個 元件 呼叫 Props 或是 States 的時候用到智能提示了，如果有缺少的也立即用紅色小波浪提示，只要把滑鼠移到小波浪就會提示哪些沒有吻合定義檔

當越來越多程式會用到各式各樣的 Plugin 的時候這時後,會建議 由 TS Build Script 後再由 Next.js 來幫忙補需要的 Plugin ，例如要加上一些 bablerc 但又不希望由 TS 來加入，所以在 script 的部分就會使用到一些檔案搬移的工作.

以下的 script 就會每次在執行tsc之前先把移除之前的檔案再把需要的檔案建立好然後再把 TS 的程式藉由tsc幫忙轉換 (mac 或 linux指令)

    "dev:prework": "rm -rf ./dist && mkdir ./dist && cp -rf static ./dist/static && cp ./nextwork/.babelrc ./dist && tsc",

補充 如果是用 windows 的話指令要改 rimraf cp-cli

總結

在 React 中使用 Typescirpt 設定上不會很難，好處也多多，建議 Typescirpt 與 Next.js 需要理解各自的用途，然後再進行組合發揮各自的功能，這樣可以讓設定檔變更少，例如 Next.js 就有例如提供 Automatic Code Splitting 而 TS 有幫忙轉 Babel 等等...這兩者的搭配可以少設定 Webpack 或 BabelRc ，如果真的有需要在交付給 Next.js 的next.config.js ... 沒有看到 Webpack或BabelRc 那些設定專注於開發 是一件心情很好的事啊

參考設定檔案

https://github.com/polo13999/StartWithTsAndNext