|
翻譯：瘋狂的技術(shù)宅
作者：Dr. Axel Rauschmayer 來源：2ality 正文共：1956 字 預(yù)計(jì)閱讀時(shí)間：10 分鐘 
本文概述了 TypeScript 的工作原理：典型的 TypeScript 項(xiàng)目的結(jié)構(gòu)是什么？什么被編譯以及怎樣編譯？我們?nèi)绾问褂?IDE 編寫 TypeScript？
TypeScript項(xiàng)目的結(jié)構(gòu)以下是 TypeScript 項(xiàng)目的一種可能的文件結(jié)構(gòu)： 1typescript-project/
2 dist/
3 ts/
4 src/
5 main.ts
6 util.ts
7 test/
8 util_test.ts
9 tsconfig.json
說明： `tsconfig.json`tsconfig.json tsconfig.json的內(nèi)容如下：
1{
2 'compilerOptions': {
3 'rootDir': 'ts',
4 'outDir': 'dist',
5 'module': 'commonjs',
6 ···
7 }
8}
我們已指定： 通過集成開發(fā)環(huán)境（IDE）編程 TypeScriptVisual Studio Code 是用于編寫 TypeScript 代碼的最受歡迎的 IDE 之一。為了更好地使用它，我們需要了解 TypeScript 源代碼是以兩種獨(dú)立的方式處理的： 檢查打開的編輯器是否存在錯(cuò)誤：這是通過所謂的 language server 完成的。它們是與編輯器無關(guān)的方法，可為編輯器提供與語言相關(guān)的服務(wù)（檢測(cè)錯(cuò)誤、重構(gòu)、自動(dòng)完成等）。編輯器（例如IDE）通過特殊協(xié)議（JSON-RPC，即基于JSON的遠(yuǎn)程過程調(diào)用）與語言服務(wù)器進(jìn)行通信。這樣一來，幾乎可以用任何編程語言編寫此類服務(wù)器。 Building（將 TypeScript 文件編譯為 JavaScript 文件）：在這里，我們有兩個(gè)選擇。 我們可以通過命令行運(yùn)行構(gòu)建工具。例如，TypeScript 編譯器 tsc 有 --watch 模式，該模式可以監(jiān)視輸入文件，并在更改文件時(shí)將其編譯為輸出文件。這樣，每當(dāng)我們?cè)?IDE 中保存 TypeScript 文件時(shí)，都會(huì)立即獲得相應(yīng)的輸出文件。 我們可以在 Visual Studio Code 中運(yùn)行 tsc。為此，必須將其安裝在我們當(dāng)前正在開發(fā)的項(xiàng)目?jī)?nèi)部或進(jìn)行全局安裝（通過 Node.js 包管理器 npm）。
通過構(gòu)建，我們可以獲得完整的錯(cuò)誤列表。有關(guān)在 Visual Studio Code 中編譯 TypeScript 的更多信息，請(qǐng)參見該 IDE 的官方文檔(https://code./docs/typescript/typescript-compiling)。 TypeScript 編譯器生成的其他文件給定 TypeScript 文件 main.ts，TypeScript 編譯器可以產(chǎn)生幾種工件。最常見的是： JavaScript文件：main.js 聲明文件：main.d.ts（包含類型信息） 源碼映射文件：main.js.map
TypeScript 通常不是通過 .ts 文件提供的，而是通過 .js 文件和 .d.ts 文件提供： 源碼映射為 main.js 中輸出代碼的每一部分指定在 main.ts 中的輸入代碼的哪一部分生成了它。除其他外，此信息使運(yùn)行時(shí)環(huán)境能夠執(zhí)行 JavaScript 代碼，同時(shí)在錯(cuò)誤信息中顯示 TypeScript 代碼的行號(hào)。 為了使用 TypeScript 中的 npm 包，我們需要類型信息npm 注冊(cè)表是一個(gè)巨大的 JavaScript 代碼庫。如果要使用 TypeScript 中的 JavaScript包，則需要類型信息： DefinitelyTyped 的聲明文件位于 @types 命名空間中。所以如果我們需要像 lodash 這樣的包的聲明文件，則必須安裝 @types/lodash 包。 將 TypeScript 編譯器用于純 JavaScript 文件TypeScript 編譯器還可以處理普通的 JavaScript 文件： 使用選項(xiàng) --allowJs，TypeScript 編譯器將輸入目錄中的 JavaScript 文件復(fù)制到輸出目錄中。好處：當(dāng)從 JavaScript 遷移到 TypeScript 時(shí)，我們可以先使 JavaScript 和 TypeScript 文件混合存在，然后再慢慢把更多 JavaScript 文件轉(zhuǎn)換為 TypeScript 。 使用選項(xiàng) --checkJs，編譯器還會(huì)對(duì) JavaScript 文件進(jìn)行類型檢查（必須啟用 --allowJs 才能使該選項(xiàng)起作用）。鑒于可用信息有限，它會(huì)盡其所能。 如果 JavaScript 文件包含注釋 //@ts-nocheck，則不會(huì)對(duì)其進(jìn)行類型檢查。 如果沒有 --checkJs，注釋 //@ts-check 可用于對(duì)單個(gè) JavaScript 文件進(jìn)行類型檢查。 TypeScript 編譯器使用通過 JSDoc 注釋指定的靜態(tài)類型信息（請(qǐng)參見下面的例子）。如果可以的話，我們可以完全靜態(tài)類型化純 JavaScript 文件，甚至可以派生它們的聲明文件。 使用選項(xiàng) --noEmit，編譯器不會(huì)產(chǎn)生任何輸出，它只會(huì)對(duì)文件進(jìn)行類型檢查。
這是一個(gè) JSDoc 注釋的例子，它為函數(shù) add() 提供靜態(tài)類型信息： 1/**
2 * @param {number} x - A number param.
3 * @param {number} y - A number param.
4 * @returns {number} This is the result
5 */
6function add(x, y) {
7 return x + y;
8}
詳細(xì)信息：《 TypeScript手冊(cè)》中的 Type-Checking JavaScript Files (https://www./docs/handbook/type-checking-javascript-files.html)。 原文鏈接 https:///2020/04/typescript-workflows.html 2020年 京程一燈課程體系上新，這是我們第一次將全部課程列表對(duì)外開放。
愿你有個(gè)好前程，愿你月薪30K。我們是認(rèn)真的 ！ 點(diǎn)擊文末 閱讀全文 查看細(xì)節(jié)。 
|
