這聽(tīng)起來(lái)是不是很耳熟：你想寫一個(gè)小型腳本，不管是為頁(yè)面、命令行工具，還是其他什么類型。你從JavaScript開(kāi)始，直到你想起寫代碼時(shí)沒(méi)有類型是多么痛苦。所以你把文件從.js重命名為.ts。然后意識(shí)到你已經(jīng)打開(kāi)了一個(gè)麻煩的玩意兒。

如果你在為一個(gè)網(wǎng)站或一個(gè)庫(kù)寫代碼，你就需要引入編譯的步驟。如果你在編寫CLI腳本，你可以求助于Deno（它支持TypeScript，開(kāi)箱即用），但是你需要設(shè)置你的IDE來(lái)理解Deno的API，而且混合和匹配Deno和node并不總是那么容易。

一旦你在本地完成了所有工作，你就需要考慮如何分發(fā)你的代碼。你會(huì)檢查你編譯的.js文件嗎？你會(huì)創(chuàng)建一個(gè)CI管道來(lái)自動(dòng)編譯你的.ts文件嗎？如果你在寫一個(gè)庫(kù)，你如何發(fā)布你的庫(kù)，以便它可以被其他項(xiàng)目使用？

你實(shí)際上不需要TypeScript

問(wèn)題是......你不需要為了獲得靜態(tài)類型分析而編寫TypeScript！

你可以通過(guò)使用JSDoc在JavaScript中獲得TypeScript的所有好處

TypeScript所提供的是一個(gè)靜態(tài)類型系統(tǒng)。這意味著類型信息在運(yùn)行代碼中沒(méi)有影響。當(dāng)你的TypeScript被執(zhí)行時(shí)，所有的類型信息都會(huì)完全丟失（這就是為什么你不寫一個(gè)類型守衛(wèi)，就不能測(cè)試一個(gè)變量是否是某個(gè)類型的原因）。

這也意味著TypeScript只是提供給TypeScript分析器的額外類型信息，對(duì)運(yùn)行你代碼的JavaScript引擎沒(méi)有任何意義。當(dāng)你把TypeScript編譯成JavaScript時(shí)，它基本上只是從你的代碼中刪除了所有的類型信息，所以它又變成了有效的JavaScript代碼。

JSDoc

在JavaScript誕生25年多后，JSDoc作為一種注釋JavaScript代碼的方式被引入。它是一種正式的標(biāo)記語(yǔ)言，允許IDE在開(kāi)發(fā)者看到一個(gè)函數(shù)時(shí)提供額外的上下文。

類似的注釋標(biāo)記存在于大多數(shù)語(yǔ)言中，我相信你已經(jīng)知道它了。這就是它的樣子：

/**
 * This is the JSDOC block. IDEs will show this text when you hover the
 * printName function.
 *
 * @param {string} name
 */
function printName(name) {
  console.log(name)
}

「TypeScript 和 JSDoc」

較少人知道的是，JSDoc是你充分使用TypeScript所需要的。TypeScript分析器能夠理解用JSDoc寫的類型，并給你提供與.ts文件相同的靜態(tài)分析。

我不會(huì)在這里提供完整的語(yǔ)法文檔。最重要的是你要知道，幾乎所有你能在.ts文件中做的事情，你都能用JSDoc來(lái)做。但這里有幾個(gè)例子：

帶有原生類型的函數(shù)參數(shù)：

/**
 * @param {string} a
 * @param {number} b
 */
function foo(a, b) {}

使用TypeScript提供的開(kāi)箱即用的類型：

/**
 * @param {HTMLElement} element
 * @param {Window} window
 */
function foo(element, window) {}

/** @type {number[]} */
let years

定義對(duì)象字面量和函數(shù)：

/** @type {{ name: string; age: number }} */
let person

/** @type {(s: string, b: boolean) => void} */
let myCallback

從*.d.ts文件中導(dǎo)入類型：

/** @param {import('./types').User} user */
const deleteUser = (user) => {}

定義一個(gè)類型供以后使用：

/**
 * @typedef {object} Color
 * @property {number} chroma
 * @property {number} hue
 */

/** @type {Color[]} */
const colors = [
  { chroma: 0.2, hue: 262 },
  { chroma: 0.2, hue: 28.3 },
]

參見(jiàn)官方TypeScript JSDoc文檔[1]以獲得詳盡的列表。

如果你有復(fù)雜的類型，你仍然可以編寫你的*.d.ts文件并在你的JSDoc注釋中導(dǎo)入它們。

注意，你仍然需要為typescript設(shè)置你的項(xiàng)目（和IDE），你需要?jiǎng)?chuàng)建一個(gè)tsconfig.json文件，將編譯器選項(xiàng)allowJs和checkJs設(shè)置為true：

// tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
    // ...
  }
}

什么時(shí)候?qū)慣ypeScript

雖然完全使用JSDoc進(jìn)行類型聲明是可能的，但這并不是最方便的。TypeScript的語(yǔ)法要好得多，而且不那么重復(fù)。

TypeScript團(tuán)隊(duì)創(chuàng)建了一個(gè)"作為注釋的類型"ECMAScript提案[2]，允許你編寫TypeScript并在不修改的情況下在JavaScript引擎中運(yùn)行（JavaScript引擎將把這些類型注釋視為注釋。）

但是在這個(gè)提案被接受之前，我們只能決定使用JSDoc或者TypeScript工具鏈。

建議

所以現(xiàn)在我的建議是這樣的：

• 當(dāng)你正在做一個(gè)有編譯步驟的項(xiàng)目時(shí)，使用TypeScript沒(méi)有什么壞處
• 但是如果你不需要編譯步驟，那么堅(jiān)持使用JSDoc類型注釋可能更容易。

本文譯自：https://www.pausly.app/blog/full-type-support-with-plain-javascript[3]

以上就是本文的全部?jī)?nèi)容，如果對(duì)你有所幫助，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)~

參考資料

[1]文檔:https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html

[2]ECMAScript提案:https://github.com/tc39/proposal-type-annotations

[3]https://www.pausly.app/blog/full-type-support-with-plain-javascript:https://www.pausly.app/blog/full-type-support-with-plain-javascript