十分鐘瞭解 TypeScript 是怎樣工做的

時間 2020-04-29

標籤十分 10分瞭解 typescript 怎樣简体版

原文原文鏈接

做者：Dr. Axel Rauschmayer
翻譯：瘋狂的技術宅javascript

原文：https://2ality.com/2020/04/ty...html

未經容許嚴禁轉載前端

本文概述了 TypeScript 的工做原理：典型的 TypeScript 項目的結構是什麼？什麼被編譯以及怎樣編譯？咱們如何使用 IDE 編寫 TypeScript？java

TypeScript項目的結構

如下是 TypeScript 項目的一種可能的文件結構：程序員

typescript-project/
  dist/
  ts/
    src/
      main.ts
      util.ts
    test/
      util_test.ts
  tsconfig.json

說明：面試

目錄 ts/ 包含 TypeScript 文件：typescript
- 子目錄 ts/src/ 包含實際代碼。
- 子目錄 ts/test/ 包含代碼測試。
目錄 dist/ 是編譯器的輸出位置。
TypeScript 編譯器將諸如 ts/src/main.ts 之類的 TypeScript 文件編譯爲 JavaScript 文件 dist/src/main.js （可能還有其餘文件）。
tsconfig.json 用於配置 TypeScript 編譯器。

`tsconfig.json`

tsconfig.json tsconfig.json的內容以下：npm

{
  "compilerOptions": {
    "rootDir": "ts",
    "outDir": "dist",
    "module": "commonjs",
    ···
  }
}

咱們已指定：編程

TypeScript 代碼的根目錄是 ts/。
TypeScript 編譯器保存其輸出的目錄爲 dist/。
輸出文件的模塊格式爲 CommonJS。

經過集成開發環境（IDE）編程 TypeScript

Visual Studio Code 是用於編寫 TypeScript 代碼的最受歡迎的 IDE 之一。爲了更好地使用它，咱們須要瞭解 TypeScript 源代碼是以兩種獨立的方式處理的：json

檢查打開的編輯器是否存在錯誤：這是經過所謂的 language server 完成的。它們是與編輯器無關的方法，可爲編輯器提供與語言相關的服務（檢測錯誤、重構、自動完成等）。編輯器（例如IDE）經過特殊協議（JSON-RPC，即基於JSON的遠程過程調用）與語言服務器進行通訊。這樣一來，幾乎能夠用任何編程語言編寫此類服務器。
- 要記住：language server 僅列出當前打開的編輯器的錯誤，且不編譯 TypeScript，而是僅僅靜態分析它。
Building（將 TypeScript 文件編譯爲 JavaScript 文件）：在這裏，咱們有兩個選擇。
- 咱們能夠經過命令行運行構建工具。例如，TypeScript 編譯器 tsc 有 --watch 模式，該模式能夠監視輸入文件，並在更改文件時將其編譯爲輸出文件。這樣，每當咱們在 IDE 中保存 TypeScript 文件時，都會當即得到相應的輸出文件。
- 咱們能夠在 Visual Studio Code 中運行 tsc。爲此，必須將其安裝在咱們當前正在開發的項目內部或進行全局安裝（經過 Node.js 包管理器 npm）。

經過構建，咱們能夠得到完整的錯誤列表。有關在 Visual Studio Code 中編譯 TypeScript 的更多信息，請參見該 IDE 的官方文檔。

TypeScript 編譯器生成的其餘文件

給定 TypeScript 文件 main.ts，TypeScript 編譯器能夠產生幾種工件。最多見的是：

JavaScript文件：main.js
聲明文件：main.d.ts（包含類型信息）
源碼映射文件：main.js.map

TypeScript 一般不是經過 .ts 文件提供的，而是經過 .js 文件和 .d.ts 文件提供：

JavaScript 代碼包含實際的功能，能夠經過普通 JavaScript 使用。
聲明文件可幫助編程編輯者實現自動補全和相似的服務。此信息使普通 JavaScript 能夠經過 TypeScript 使用。可是若是使用純 JavaScript，咱們甚至會從中受益，由於它能夠提供更好的自動完成以及更多功能。

源碼映射爲 main.js 中輸出代碼的每一部分指定在 main.ts 中的輸入代碼的哪一部分生成了它。除其餘外，此信息使運行時環境可以執行 JavaScript 代碼，同時在錯誤信息中顯示 TypeScript 代碼的行號。

爲了使用 TypeScript 中的 npm 包，咱們須要類型信息

npm 註冊表是一個巨大的 JavaScript 代碼庫。若是要使用 TypeScript 中的 JavaScript包，則須要類型信息：

軟件包自己可能包含 .d.ts 文件，甚至完整的 TypeScript 代碼。
若是沒有，咱們仍然可使用它：DefinitelyTyped是人們爲普通 JavaScript 包編寫的聲明文件的庫。

DefinitelyTyped 的聲明文件位於 @types 命名空間中。因此若是咱們須要像 lodash 這樣的包的聲明文件，則必須安裝 @types/lodash 包。

將 TypeScript 編譯器用於純 JavaScript 文件

TypeScript 編譯器還能夠處理普通的 JavaScript 文件：

使用選項 --allowJs，TypeScript 編譯器將輸入目錄中的 JavaScript 文件複製到輸出目錄中。好處：當從 JavaScript 遷移到 TypeScript 時，咱們能夠先使 JavaScript 和 TypeScript 文件混合存在，而後再慢慢把更多 JavaScript 文件轉換爲 TypeScript 。
使用選項 --checkJs，編譯器還會對 JavaScript 文件進行類型檢查（必須啓用 --allowJs 才能使該選項起做用）。鑑於可用信息有限，它會盡其所能。
若是 JavaScript 文件包含註釋 //@ts-nocheck，則不會對其進行類型檢查。
- 若是沒有 --checkJs，註釋 //@ts-check 可用於對單個 JavaScript 文件進行類型檢查。
TypeScript 編譯器使用經過 JSDoc 註釋指定的靜態類型信息（請參見下面的例子）。若是能夠的話，咱們能夠徹底靜態類型化純 JavaScript 文件，甚至能夠派生它們的聲明文件。
使用選項 --noEmit，編譯器不會產生任何輸出，它只會對文件進行類型檢查。

This is an example of a JSDoc comment that provides static type information for a function add():
這是一個 JSDoc 註釋的例子，它爲函數 add() 提供靜態類型信息：

/**
 * @param {number} x - A number param.
 * @param {number} y - A number param.
 * @returns {number} This is the result
 */
function add(x, y) {
  return x + y;
}

詳細信息：《 TypeScript手冊》中的 Type-Checking JavaScript Files。