iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
0
Modern Web

TypeScript 初學之路系列 第 11

Day 11 - 從 Javascript 搬移你的程式到 TypeScript(一)

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

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 可以協助你補上 breakswitch 中的 case

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

整合你的編譯工具

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, systemumd

如果你有使用 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 你另外需要設定 moduleResolutionnode

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


上一篇
Day10 - React and Webpack
系列文
TypeScript 初學之路11

尚未有邦友留言

立即登入留言