摘要：原文地址原文作者譯者校對者和其他人有一些關(guān)于比較好的博文，跟隨這些博文，我最近開始使用。今天，我將展示如何從零開始建立一個(gè)工程，以及如何使用管理構(gòu)建過程。我也將陳述關(guān)于的第一印象，尤其是使用和。

原文地址：Getting started with TypeScript and React

原文作者：Jack_Franklin

譯者：luxj

校對者：veizz

Tom Dale 和其他人有一些關(guān)于 TypeScript 比較好的博文，跟隨這些博文，我最近開始使用 TypeScript。今天，我將展示如何從零開始建立一個(gè) TypeScript 工程，以及如何使用 Webpack 管理構(gòu)建過程。我也將陳述關(guān)于 TypeScript 的第一印象，尤其是使用 TypeScript 和 ReactJS。

我不會(huì)深入到 TypeScript 語法的具體細(xì)節(jié)，你可以閱讀 TypeScript handbook 或者免費(fèi)書籍 TypeScript Deep Dive，它們是關(guān)于 TypeScript 比較好的入門材料。

更新：如果你想用德語閱讀這篇文章，你可以 thanks to the awesome folks at Reactx.de

第一步要做的事情是使用 Yarn 將 TypeScript 安裝到本地的 node_modules 目錄，首先，使用 yarn init 創(chuàng)建一個(gè)工程：

yarn init
yarn add typescript

當(dāng)你安裝了 TypeScript，你就可以使用 tsc 命令行工具，這個(gè)工具可以編譯 TypeScript，編譯時(shí)會(huì)創(chuàng)建一個(gè)開始文件 tsconfig.json，你可以編輯這個(gè)文件。你可以運(yùn)行 tsc --init 獲得這個(gè)文件 — 如果你已經(jīng)在本地安裝了 TypeScript，你需要運(yùn)行 ./node_modules/.bin/tsc --init。

注意：你可以在我的點(diǎn)開頭的配置文件中看到，我將 $PATH 定義為 ./node_modules/.bin 這個(gè)目錄。這有點(diǎn)危險(xiǎn)，因?yàn)槲铱赡懿唤?jīng)意地運(yùn)行這個(gè)目錄下的任何可執(zhí)行的文件，但是我愿意承擔(dān)這個(gè)風(fēng)險(xiǎn)，因?yàn)槲抑肋@個(gè)目錄下安裝了什么，而且這能節(jié)省很多打字時(shí)間！

tsc --init 這個(gè)命令會(huì)生成一個(gè) tsconfig.json 文件，所有 TypeScript 編譯器的配置都存在于這個(gè)文件中。在默認(rèn)配置的基礎(chǔ)上，我做了一些修改，下面是我正在用的一個(gè)配置：

{
  "compilerOptions": {
    "module": "es6", // 使用 ES2015 模塊
    "target": "es6", // 編譯成 ES2015 (Babel 將做剩下的事情)
    "allowSyntheticDefaultImports": true, // 看下面
    "baseUrl": "src", // 可以相對這個(gè)目錄 import 文件
    "sourceMap": true, // 使 TypeScript 生成 sourcemaps
    "outDir": "ts-build", // 構(gòu)建輸出目錄 (因?yàn)槲覀兇蟛糠謺r(shí)間都在使用 Webpack，所以不太相關(guān))
    "jsx": "preserve", // 開啟 JSX 模式, 但是 "preserve" 告訴 TypeScript 不要轉(zhuǎn)換它(我們將使用 Babel)
    "strict": true,
  },
  "exclude": [
    "node_modules" // 這個(gè)目錄下的代碼不會(huì)被 typescript 處理
  ]
}

將這個(gè)屬性的值設(shè)置為 true，它允許你使用 ES2015 默認(rèn)的 imports 風(fēng)格, 即使你導(dǎo)入的代碼沒有使用 ES2015 默認(rèn)的 export。

舉個(gè)例子，當(dāng)你 import 不是用 ES2015 編寫的 React 時(shí)（雖然源碼是，但是 React 使用一個(gè)構(gòu)建好的版本），就可以利用上面的屬性設(shè)置。這意味著，嚴(yán)格意義上來講，它沒有使用 ES2015 默認(rèn)的 export，所以當(dāng)你使用 import 的時(shí)候， TypeScript 會(huì)警告你。盡管如此，像 Webpack 這樣的構(gòu)建工具能夠?qū)胝_的代碼，所以我將這個(gè)屬性設(shè)置為 true，相比使用 import * as React from "react"，我更喜歡 import React from "react" 這種方式。

TypeScript 2.3 版本引入了一種新的配置選項(xiàng)，strict。當(dāng)將這個(gè)值設(shè)置為 true 時(shí)，TypeScript 編譯器會(huì)盡可能的嚴(yán)格 - 如果你將一些 JS 轉(zhuǎn)為 TS，這可能不是你想要的，但是對于一些新的項(xiàng)目，使其盡可能的嚴(yán)格是有意義的。它還引入了一些不同的配置，其中幾個(gè)比較重要的的有 noImplicitAny 和 strictNullChecks:

將 TypeScript 引入一個(gè)現(xiàn)有的項(xiàng)目，當(dāng)你不聲明變量的類型時(shí)，TypeScript 不會(huì)拋出錯(cuò)誤。但是，當(dāng)我從零開始新建一個(gè) TypeScript 項(xiàng)目，我希望編譯器盡可能地嚴(yán)格。
TypeScript 默認(rèn)做的一件事是將變量設(shè)置為 any 類型。any 是 TypeScript 中避免類型檢查的有效手段，它可以是任何值。當(dāng)你轉(zhuǎn)換 JavaScript 時(shí)，使用 any 是很有用的，但是最好還是盡可能地嚴(yán)格。當(dāng)將 noImplicitAny 設(shè)置為 true，你必須為變量設(shè)置類型。舉個(gè)例子，當(dāng)將 noImplicitAny 設(shè)置為 true 時(shí)，下面的代碼會(huì)報(bào)錯(cuò)：

function log(thing) {
  console.log("thing", thing)
}

如果你想了解更多關(guān)于 noImplicitAny 的信息，可以閱讀 TypeScript Deep Dive

這是另一個(gè)使 TypeScript 編譯器更嚴(yán)格的選項(xiàng)。TypeScript Deep Dive 這本書有一個(gè)很好的章節(jié)介紹這個(gè)選項(xiàng)。如果將這個(gè)選項(xiàng)設(shè)置為true，TypeScript 會(huì)更容易識別出你引用的一個(gè)可能是 undefined 值的地方，并將展示這個(gè)錯(cuò)誤。例如：

person.age.increment()

當(dāng)將 strictNullChecks 設(shè)置為 true，TypeScript 會(huì)認(rèn)為 person 或者 person.age 可能是 undefined，它會(huì)報(bào)個(gè)錯(cuò)以確保你處理它。這會(huì)防止出現(xiàn)運(yùn)行時(shí)錯(cuò)誤，所以這看起來是一個(gè)從一開始就要打開的很棒的選項(xiàng)。

我是 Webpack 的腦殘粉；我喜歡它的插件生態(tài)系統(tǒng)、開發(fā)者工作流，喜歡它擅長管理復(fù)雜的應(yīng)用和構(gòu)建流程。所以，即使我們可能僅僅使用 TypeScript 編譯器，我仍然喜歡引入 Webpack。因?yàn)?TypeScript 輸出 React 和 es6（也就是 es2015，babel 把 es6 轉(zhuǎn)成 es5，所以我們還需要 babel。讓我們安裝 Webpack，Babel 和相關(guān)的 presets 及 ts-loader，ts-loader 是 TypeScript 在 Webpack 中的插件。

還有 awesome-typescript-loader ，也是 TypeScript 在 Webpack 中的插件，但是我首先找到的是 ts-loader 而且到目前為止它非常不錯(cuò)。如果誰使用了 awesome-typescript-loader，我很樂意看到關(guān)于它們兩者的對比。

yarn add webpack babel-core babel-loader babel-preset-es2015 babel-preset-react ts-loader webpack-dev-server

此時(shí)此刻，我必須感謝 Tom Duncalf,他在博客中發(fā)表的 TypeScript 1.9 + React，對我來說，是一個(gè)特別好的開始，我極力推薦它。

在 Webpack 中沒有特別的配置，但是我還是在代碼中列出一些注釋來解釋它：

const webpack = require("webpack")
const path = require("path")

module.exports = {
  // 設(shè)置 sourcemaps 為 eval 模式，將模塊封裝到 eval 包裹起來
  devtool: "eval",

  // 我們應(yīng)用的入口, 在 `src` 目錄 (我們添加到下面的 resolve.modules):
  entry: [
    "index.tsx"
  ],

  // 配置 devServer 的輸出目錄和 publicPath
  output: {
    filename: "app.js",
    publicPath: "dist",
    path: path.resolve("dist")
  },

  // 配置 devServer 
  devServer: {
    port: 3000,
    historyApiFallback: true,
    inline: true,
  },

  // 告訴 Webpack 加載 TypeScript 文件
  resolve: {
    // 首先尋找模塊中的 .ts(x) 文件, 然后是 .js 文件
    extensions: [".ts", ".tsx", ".js"],

    // 在模塊中添加 src, 當(dāng)你導(dǎo)入文件時(shí)，可以將 src 作為相關(guān)路徑
    modules: ["src", "node_modules"],
  },

  module: {
    loaders: [
      // .ts(x) 文件應(yīng)該首先經(jīng)過 Typescript loader 的處理, 然后是 babel 的處理
      { test: /.tsx?$/, loaders: ["babel-loader", "ts-loader"], include: path.resolve("src") }
    ]
  },
}

我們按照上面的方式配置 loaders ，從而使 .ts(x) 文件首先經(jīng)過 ts-loader 的處理。按照 tsconfig.json 中的配置，使用 TypeScript 編譯 .ts(x) 文件 - 輸出 ES2015。然后，我們使用 Babel 將它降級到 ES5。為了實(shí)現(xiàn)這些，我創(chuàng)建了一個(gè)包含需要的 presets 的 .babelrc 文件：

{
  "presets": ["es2015", "react"]
}

現(xiàn)在我們已經(jīng)做好了寫 TypeScript 應(yīng)用的準(zhǔn)備。

現(xiàn)在，我們準(zhǔn)備好建立 src/index.tsx，這是我們這個(gè)應(yīng)用的入口。我們可以創(chuàng)建一個(gè)虛擬的組件，渲染它，查看它是否正常運(yùn)行。

import React from "react"
import ReactDOM from "react-dom"

const App = () => {
  return (
    

      
Hello world!
    
  )
}

ReactDOM.render(, document.getElementById("app"))

如果你運(yùn)行 webpack，會(huì)看到下面的錯(cuò)誤：

ERROR in ./src/index.tsx
(1,19): error TS2307: Cannot find module "react".

ERROR in ./src/index.tsx
(2,22): error TS2307: Cannot find module "react-dom".

發(fā)生上面的錯(cuò)誤是因?yàn)?TypeScript 試圖確認(rèn) React 的類型、React 導(dǎo)出了什么。對于 React DOM，TypeScript 會(huì)做同樣的事情。React 并不是使用 TypeScript 編寫的，所以它并沒有包含那些信息。幸運(yùn)地是，為了應(yīng)對這種情況，社區(qū)已經(jīng)創(chuàng)建了 DefinitelyTyped，這是一個(gè)大型的組件類型庫。

最近，安裝機(jī)制改變了；所有的類型被發(fā)布到 npm @types scope 下。為了獲得 React 和 ReactDOM 的類型，我們運(yùn)行下面的命令：

yarn add @types/react
yarn add @types/react-dom

通過上面的處理，錯(cuò)誤不見了。無論何時(shí)，你安裝一個(gè)依賴時(shí)，都應(yīng)該試著安裝 @types 包，或者你想查看是否有被支持的類型，你可以在 TypeSearch 網(wǎng)站上查看。

為了在本地運(yùn)行 app，我們只需要運(yùn)行 webpack-dev-server 命令。我配置了一個(gè)腳本 start, 它能做上面的事情：

"scripts": {
  "start": "webpack-dev-server"
}

服務(wù)會(huì)找到 webpack.config.json 這個(gè)文件，使用它創(chuàng)建我們的應(yīng)用。

如果你運(yùn)行 yarn start ,你會(huì)看到來自于 webpack-dev-server 的輸出，包含 ts-loader 的輸出，這些能夠確認(rèn)應(yīng)用是否正常運(yùn)行。

$ webpack-dev-server
Project is running at http://localhost:3000/
webpack output is served from /dist
404s will fallback to /index.html
ts-loader: Using [email protected] and /Users/jackfranklin/git/interactive-react-introduction/tsconfig.json
Version: webpack 2.4.1
Time: 6077ms
 Asset     Size  Chunks                    Chunk Names
app.js  1.14 MB       0  [emitted]  [big]  main
webpack: Compiled successfully.

為了能夠在本地看到效果，我創(chuàng)建了一個(gè) index.html 文件，讓它加載編譯后的代碼：

在端口 3000，我們將會(huì)看到 Hello world!，我們讓 TypeScript 運(yùn)行了！

在現(xiàn)在的工程中，我想使用 React Ace module 包含一個(gè)代碼編輯器。但是這個(gè)模塊并不提供 types，并且也沒有 @types/react-ace。在這種情況下，我們必須在應(yīng)用中增加類型，這樣可以使 TypeScript 知道如何去檢查它的類型。這看起來非常煩人，讓 TypeScript 至少知道所有第三方依賴關(guān)系的好處是，可以節(jié)省調(diào)試時(shí)間。

定義一個(gè)只包含類型的文件，后綴是 .d.ts（ ‘d‘ 代表 ‘declaration‘ )，你可以從 TypeScript docs 了解更多。在你的工程中，TypeScript 將會(huì)自動(dòng)地找到這些文件，你不需要顯式地導(dǎo)入它們。

我創(chuàng)建了 react-ace.d.ts 文件，添加下面的代碼，創(chuàng)建模塊，定義它的默認(rèn) export 為一個(gè) React 組件。

declare module "react-ace" {
    interface ReactAceProps {
      mode: string
      theme: string
      name: string
      editorProps?: {}
      showPrintMargin?: boolean
      minLines?: number
      maxLines?: number
      wrapEnabled?: boolean
      value: string
      highlightActiveLine?: boolean
      width?: string
      fontSize?: number
    }

    const ReactAce: React.ComponentClass
    export = ReactAce
}

我首先創(chuàng)建了一個(gè) TypeScript 接口，這個(gè)接口包含組件的屬性，export = ReactAce 標(biāo)明組件通過模塊被導(dǎo)出。通過定義屬性的類型，TypeScript 會(huì)告訴我是否弄錯(cuò)了屬性的類型或者忘記設(shè)置一個(gè)類型，這是非常有價(jià)值的。

最后，使用 TypeScript，我也想有一個(gè)很好的測試方案。我是 Facebook 的 Jest 的超級粉絲，我在 google 上做了一些搜索，確認(rèn)它是否能用 TypeScript 運(yùn)行。結(jié)果發(fā)現(xiàn)，這是可行的，ts-jest 包可以做一些很重的轉(zhuǎn)換。除此之外，還有一個(gè)做類型檢查的 @types/jest 包，可以讓你所有的測試都是類型確認(rèn)過的。

非常感謝 RJ Zaworski，他在博客上發(fā)表了 TypeScript and Jest ，這使我開始了解這個(gè)主題。如果你安裝了 ts-jest，你只需要在 package.json 中配置 Jest，下面是配置：

"jest": {
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "transform": {
    ".(ts|tsx)$": "/node_modules/ts-jest/preprocessor.js"
  },
  "testRegex": "/*.spec.(ts|tsx|js)$"
},

第一個(gè)配置告訴 Jest 尋找 .ts 和 .tsx 文件。 transform 對象告訴 Jest 通過 ts-jest 預(yù)處理器運(yùn)行任何 TypeScript 文件，ts-jest 預(yù)處理器通過 TypeScript 編譯器運(yùn)行 TypeScript 文件，產(chǎn)出能讓 Jest 識別的 JavaScript。最后，我更新了 testRegex 設(shè)置，目的是尋找任何 *.spec.ts(x) 文件，我更喜歡用這種方式命名轉(zhuǎn)換。

通過上面這些配置，我可以運(yùn)行 jest 并且讓每一件事情都如預(yù)期一樣運(yùn)行。

盡管 TypeScript 在代碼中會(huì)給出很多檢查提示，我仍然想要一個(gè)規(guī)范器，做些代碼風(fēng)格和質(zhì)量檢查。就像 JavaScript 的 ESLint，TSLint 是檢查 TypeScript 的最好選擇。它和 ESlint 的工作方式相同 - 用一系列生效或不生效的規(guī)則，還有一個(gè) TSLint-React 包增加 React 的具體規(guī)則。

你可以通過 tslint.json 文件配置 TSLint，我的配置文件如下。我用 tslint:latest 和 tslint-react presets，它們可以使用很多規(guī)則。我不贊成一些默認(rèn)設(shè)置，所以我重寫了它們 - 你可以和我的配置不同 - 這完全取決于你！

{
    "defaultSeverity": "error",
    "extends": ["tslint:latest", "tslint-react"],
    "jsRules": {},
    "rules": {
      // 用單引號, 但是在 JSX 中，強(qiáng)制使用雙引號
      "quotemark": [true, "single", "jsx-double"],
      // 我更喜歡沒有分號 :)
      "semicolon": [true, "never"],
      // 這個(gè)規(guī)則使每個(gè)接口以 I 開頭，這點(diǎn)我不喜歡
      "interface-name": [true, "never-prefix"],
      // 這個(gè)規(guī)則強(qiáng)制對象中的 key 按照字母順序排列 
      "object-literal-sort-keys": false
    },
    "rulesDirectory": []
}

我可以運(yùn)行 tslint --project tsconfig.json 規(guī)范我的項(xiàng)目

總之，到目前為止，用 TypeScript 開發(fā)我很高興。我肯定會(huì)發(fā)表更多博文來描述這門語言的細(xì)節(jié)和我是如何使用 TypeScript 的。但僅就如下操作而言，構(gòu)建過程、配置所有的工具、開始使用類型，這真是一種享受。如果你正在將你的 JS 應(yīng)用結(jié)構(gòu)化，想要一個(gè)更強(qiáng)大的編譯器避免錯(cuò)誤并減少調(diào)試時(shí)間，我極力推薦你嘗試 TypeScript。

如果你想看源碼或者以本文中的例子作為開始，我在 GitHub 上放了一個(gè)例子，如果你有任何問題，可以提 issue。

iKcamp原創(chuàng)新書《移動(dòng)Web前端高效開發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。