這個部分需要整理的蠻多的

TypeScript 不會憑空存在

他還是依存於 Javascript 的生態圈內

有很多舊的 Javascript 要轉譯為 TypeScript 過程中很無趣的

如果你是要轉譯 React project 我們會推薦你先閱讀這份文件

設定你的資料結構

基本的檔案架構會如下

projectRoot
├── src
│   ├── file1.js
│   └── file2.js
├── built
└── tsconfig.json

如果你有想要用測試的話，在 src 再加上 tests 並且在 tsconfig.json 除了 src 之外再加上 tests

寫一個設定檔案

TypeScript 使用 tsconfig.json 來做專案的設定

{
    "compilerOptions": {
        "outDir": "./built",
        "allowJs": true,
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

我們利用這個設定檔案 對 TypeScript 做一些設定

1. 包含 include 讀取 src 中所有檔案
2. 允許 Javascript 文件直接輸入
3. 可以在 build 輸出所有編譯後文件
4. 將 ES6或是ES7 轉譯為 ES5

如果你是使用 tsc 轉譯你的專案，你應該會在 built 資料夾裡面看到編譯成功的檔案

優勢

如果你使用的是VS code 或是 Visual Studio 你可以使用相當多的工具，例如自動完成。也可以增加一些設定方便你 debug

• noImplicitReturns 可以防止你在 function 的最後忘記回傳值
• noFallthroughCasesInSwitch 可以協助你補上 break 在 switch 中的 case

TypeScript 依舊會對無法訪問的標籤的錯誤顯示，你可以利用 allowUnreachableCode 和 allowUnusedLabels 來取消

整合你的編譯工具

Gulp

相關的 gulp 使用可以參考另外一篇文章

Webpack

Webpack 是一個相當簡單的工具！

你可以使用 awesome-typescript-loader 這是一個 TypeScript Loader

另外也可以使用 source-map-loader 讓你更易於 debug

  $ yarn add awesome-typescript-loader source-map-loader

將上述兩個套件加入你的 webpack.config.js

module.exports = {
  entry: './src/index.ts'
  output: {
    filename: './dist/bundle.js'
  },

  devtool: 'source-map',

  resolve: {
    extensions: ['', 'webpack.js', '.web.js', '.ts', '.tsx', 'js']
  },

  moudle: {
    loaders: [
      {test: /\.tsx?$/, loader: 'awesome-typescript-loader'}
    ],

    preLoaders: [
      {test: /\.js$/, loader: 'source-map-loader'}
    ]
  }
}

awesome-typescript-load 必須在所有的 loader 的前面 ts-loader 也是一樣的道理

你可以在這邊獲得更多資訊

將 .js 轉換成為 .ts

我們可以開始對檔案做一些動作開始轉換

第一個步驟就是將所有的 .js 換成 .ts

若是你的檔案有使用 JSX 則需要將檔案名稱換成 .tsx

當然你會覺得怪怪的，這樣就結束了麻？

當然不是！

接著你可以打開你的編輯器或是使用 command line

  $ tsc --pretty

你可以看到一些 紅色 的波浪底線

這些就像是 微軟的軟體提醒你這些並不符合 TypeScript 的規範

如果這些對你說太寬鬆

你希望可以更加嚴謹的話你也可以使用 noEmitOnError 這一個選項來讓檢查更加嚴謹

如果你希望使用嚴謹模式可以參考這篇文章

例如你不希望變數型態使用不明確的 any 你可以在編輯檔案之前使用 noImplicitAny。

解決錯誤相關問題

就像剛剛提到的，你會修改 .js 為 .ts 或是 .tsx 的時候會有相當多的錯誤訊息

你會發現這些錯誤雖然是屬於合法的錯誤，但是透過這些錯誤可以發現 TypeScript 對你開發程式碼的好處。

import 模組

你可能會得到錯誤訊息是 Cannot find name 'require' 或是 Cannot find name 'deffined'

在這些狀況在這些狀況應該是 TypeScript 找不到這些模組

你需要預先選擇使用引入模組的方式，可以使用 commonjs, amd, system 和 umd

如果你有使用 Nod/CommonJS

var foo = require('foo');
foo.doStuff();

或是 RequireJS/AMD

define(["foo"], function(foo){
  foo.doStuff();
});

你可以修改為

import foo = require('foo');
foo.doStuff();

TypeScript 的宣告

如果你編譯檔案的時候有安裝 foo module

但是依然看到 Cannot find module 'foo'

這個錯誤訊息，很有可能是你並未有宣告的檔案來宣告你的 library，

要處理這個問題也很簡單

  $ yarn add @types/lodash -D

如果你有使用 module 選項是 commonjs 你另外需要設定 moduleResolution 為 node

然後你才可以正常的引用 lodash