[譯]TypeScript 和 Babel 7

做者：Daniel

日期：August 27th, 2018

原文：devblogs.microsoft.com/typescript/…

今天咱們很高興爲Babel用戶宣佈一些特別的東西。一年前，咱們開始着手發現用戶在使用TypeScript時遇到的最大困難，咱們發現Babel用戶的一個共同問題是嘗試設置好TypeScript 太難了。 緣由一般各不相同，但對於許多開發人員來講，重寫已經正在使用的構建配置多是一項艱鉅的任務。 Babel是一個出色的工具，擁有一個充滿活力的生態系統，經過將最新的JavaScript特性轉換爲舊的運行時和瀏覽器，爲數百萬開發人員提供服 但它不進行類型檢查，咱們的團隊認爲能夠將這種體驗帶到另外一個層次。 雖然TypeScript自己能夠同時執行這兩項操做，但咱們但願在不強制用戶從Babel切換的狀況下更輕鬆地得到該體驗。

這就是爲何在過去的一年裏咱們與Babel團隊合做，今天咱們很高興聯合宣佈Babel 7如今提供TypeScript支持！

我怎麼使用它？

若是你已經在使用Babel而且你從何嘗試過TypeScript，那麼如今是你的機會，由於它比以往更容易。 至少，您須要安裝TypeScript插件。

npm install --save-dev @babel/preset-typescript
複製代碼

您可能還想得到TypeScript支持的其餘ECMAScript特性：

npm install --save-dev @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
複製代碼

確保你的.babelrc中的presets和plugins配置正確：

{
    "presets": [
        "@babel/env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}
複製代碼

一個使用@babel/cli編譯的樣例，你僅須要執行：

babel ./src --out-dir lib --extensions ".ts,.tsx"
複製代碼

你的文件如今構建並生成到了lib文件夾中。

使用TypeScript檢查類型，須要建立一個tsconfig.json文件：

{
  "compilerOptions": {
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Process & infer types from .js files.
    "allowJs": true,
    // Don't emit; allow Babel to transform files.
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    // Disallow features that require cross-file information for emit.
    "isolatedModules": true,
    // Import non-ES modules as default imports.
    "esModuleInterop": true
  },
  "include": [
    "src"
  ]
}

複製代碼

而後執行tsc，僅僅就是這樣！tsc將會對你的.ts和.tsx進行類型檢查

隨意添加--watch標誌到任一工具，以便在任何變化時得到即時反饋。 您能夠在此示例存儲庫中查看如何設置更復雜的構建，該存儲庫與Webpack等工具集成。 您也能夠在Babel的在線REPL上使用TypeScript預設。

這對我意味着什麼？

使用TypeScript編譯器仍然是構建TypeScript的首選方法。 雖然Babel能夠接管編譯/轉換 - 執行諸如擦除類型和重寫最新的ECMAScript功能以在較舊的運行時中工做 - 它沒有內置類型檢查，而且仍然須要使用TypeScript來實現這一點。 所以，即便Babel構建成功，您也可能須要使用TypeScript介入以捕獲類型錯誤。 出於這個緣由，咱們認爲tsc和compiler pipeline周圍的工具仍然能夠爲大多數項目提供最好集成和一致的體驗。

所以，若是您已經在使用TypeScript，那麼這對您來講可能沒什麼變化。 可是，若是您已經在使用Babel，或者對Babel生態系統感興趣，並但願得到TypeScript的好處，例如捕獲拼寫錯誤，錯誤檢查以及您可能在Visual Studio和Visual Studio等中看到的編輯體驗 代碼，這是給你的！

注意事項

正如咱們上面提到的，用戶應該注意的第一件事是Babel不會對TypeScript代碼執行類型檢查;它只會轉換你的代碼，不管是否存在類型錯誤，它都會編譯。雖然這意味着Babel不會像讀取.d.ts文件那樣作並確保你的類型兼容，但可能你會想要一些工具來作到這一點，因此你仍然須要TypeScript。這能夠在後臺做爲單獨的tsc --watch任務完成，也能夠是構建中的lint / CI步驟的一部分。幸運的是，經過正確的編輯器支持，您甚至能夠在保存以前發現大多數錯誤。

其次，有些結構Babel 7沒有正確的編譯。具體來講，

• namespaces
• 括號風格的類型斷言/強制轉換語法，當啓用JSX時能夠忽略它們。（即，若是打開JSX支持，寫入 x即便在.ts文件中也不起做用，但您能夠將x as Foo）。
• 跨多個聲明的枚舉（即枚舉合併）
• 遺留式導入/導出語法（即import foo = require（...）和export = foo）

這些遺漏主要基於Babel的單文件發射架構中的技術限制。咱們相信大多數用戶會發現這種體驗是徹底能夠接受的。要確保TypeScript能夠調出其中的一些遺漏，您應該確保TypeScript使用--isolatedModules標誌。

接下來作什麼？

您能夠在發佈博客文章中閱讀Babel方面的詳細信息。 咱們很高興咱們有機會與Babel團隊的人們合做，如Henry Zhu，Andrew Levine，Logan Smyth，Daniel Tschinder，James Henry，Diogo Franco，Ivan Babak，NicolòRibaudo，Brian Ng和Vladimir Kurchatkin。 咱們甚至有機會加速Babylon，Babel的解析器，並幫助調整James Henry在typescript-eslint-parser上的工做，該解析器如今支持Prettier's TypeScript。 若是咱們遺漏沒有提到你，咱們很抱歉，但咱們很感激，咱們感謝全部人們共同投入的幫助！

咱們的團隊將爲TypeScript插件的將來更新作出貢獻，咱們期待爲全部TypeScript用戶帶來出色的體驗。 展望將來，咱們很樂意聽到您對Babel中這種新TypeScript支持的反饋，以及咱們如何使其更易於使用。 在Twitter上@typescriptlang或下面的評論中給咱們一個聲音。

快樂的黑客！

資源

Babel+TypeScript以及其它工具的配置參考

TypeScript-Babel-Starter

react-webpack-typescript-babel

webpack-typescript-babel

TypeScript With Babel: A Beautiful Marriage

關注微信公衆號，發現更多精彩內容