前端框架Svelte放棄TS，如何使用純JS實(shí)現(xiàn)類型檢查？
近日，前端框架 Svelte 的創(chuàng)建者 Rich Harris 提出要將 Svelte 從 TypeScript 切換到使用 JSDoc 的 JavaScript。這種轉(zhuǎn)變得到了 Svelte 團(tuán)隊(duì)的大力支持，他們決定在 Svelte 4 代碼庫中從 TypeScript 遷移到 JavaScript JSDoc。而這個(gè)決定引起了開發(fā)社區(qū)的驚訝和懷疑。
那為什么要從 TypeScript 轉(zhuǎn)向 JavaScript JSDoc 呢？這是否是技術(shù)的倒退？JSDoc 又是什么？它有什么特點(diǎn)？如何使用？下面將詳細(xì)介紹！
Svelte 是一個(gè)現(xiàn)代的 JavaScript 框架，它允許開發(fā)者以聲明式的方式寫組件，并在構(gòu)建時(shí)將這些組件轉(zhuǎn)化為高效、優(yōu)化的純 JavaScript 代碼。相比于其他框架，Svelte 更加輕巧，在性能和體驗(yàn)方面也有著不俗的表現(xiàn)。使用 Svelte 可以幫助開發(fā)人員更快速地構(gòu)建交互式應(yīng)用程序，同時(shí)還可以減少運(yùn)行時(shí)性能負(fù)擔(dān)和包大小。
為什么轉(zhuǎn)向JSDoc？
Svelte 團(tuán)隊(duì)認(rèn)為，盡管類型系統(tǒng)非常棒，但作為一種語言，TypeScript有些“麻煩”。主要問題在于使用 TypeScript 會(huì)帶來額外的工具。例如，如果在 TypeScript 中構(gòu)建一個(gè)庫，并在另一個(gè)項(xiàng)目中使用該庫，就不能只修改代碼庫還需要重新構(gòu)建代碼，這增加了不必要的復(fù)雜性。
為了規(guī)避這些問題，Svelte 團(tuán)隊(duì)決定使用 JavaScript 和 JSDoc 注釋來實(shí)現(xiàn)類型安全。這種方法提供了所有類型安全的好處，而沒有與 TypeScript 相關(guān)的缺點(diǎn)。SvelteKit 代碼庫已經(jīng)采用了這種方法，團(tuán)隊(duì)計(jì)劃對(duì) Svelte 4 進(jìn)行同樣的處理。不過，作為Svelte的用戶，這不會(huì)影響在Svelte 中使用 TypeScript 的能力，從Svelte導(dǎo)出的函數(shù)仍將具有習(xí)以為常的所有 TypeScript 優(yōu)點(diǎn)（類型檢查、智能感知、內(nèi)部文檔等）。
什么是 JSDoc？
很多開發(fā)人員之所以選擇 TypeScript，是因?yàn)閺?qiáng)類型可以減少錯(cuò)誤，并通過代碼完成和彈出幫助等功能改善代碼編輯器中的開發(fā)體驗(yàn)。而主要是 API 文檔工具的 JSDoc 也可以用于類型檢查。
JSDoc 是一種用于在 JavaScript 代碼中編寫文檔和類型注釋的標(biāo)記語言，它使用類似于JavaDoc 的注釋語法。通過在代碼中添加特定的注釋標(biāo)記，可以生成文檔，提高代碼的可讀性和可維護(hù)性。JSDoc不僅可以描述函數(shù)的參數(shù)和返回值類型，還可以用來描述類、對(duì)象、模塊和命名空間等各種 JavaScript 實(shí)體的屬性和方法。
那相較于 TypeScript，JSDoc 有什么優(yōu)點(diǎn)呢？
- 與語言無關(guān)：JSDoc只是一種在類似于JavaScript的語言中編寫文檔和類型注釋的方式，使其更加靈活?？梢栽诟鞣N環(huán)境中使用它，而TypeScript可能不太適合某些環(huán)境。
- 易于集成：由于 JSDoc 只是基于注釋的系統(tǒng)，因此不需要更改代碼或工具。可以開始向現(xiàn)有的JavaScript代碼庫添加JSDoc注釋，而無需太多麻煩。
- 學(xué)習(xí)曲線較低：與TypeScript相比，JSDoc非常直接明了，學(xué)習(xí)起來更容易，TypeScript可能需要開發(fā)人員學(xué)習(xí)新的語法和類型概念。
- 文檔受益：JSDoc為編寫代碼文檔提供了一種一致的方法。這使得其他開發(fā)人員更容易理解代碼庫，并有助于生成文檔。
- 漸進(jìn)式采用：可以逐漸向代碼庫添加JSDoc，這樣可以逐步將類型檢查和文檔引入項(xiàng)目，而無需完全采用TypeScript。
- 無需構(gòu)建步驟：JSDoc不像TypeScript那樣需要構(gòu)建步驟進(jìn)行類型檢查和轉(zhuǎn)譯。
如何使用 JSDoc？
使用 JSDoc 不需要任何前置操作。只需要在 JavaScript 代碼中添加 JSDoc 注釋即可。JSDoc 注釋以“/**”開頭，以“*/”結(jié)尾，位于要描述的代碼塊之前。可以通過以下方式來將 JSDoc 用于類型檢查。
- 在每個(gè)變量聲明、函數(shù)聲明等之前添加 JSDoc 注釋，描述它們的類型和用途。例如：
/**
* @type {number}
*/
const num = 42;
/**
* 兩數(shù)之和
* @param {number} x
* @param {number} y
* @returns {number} 返回值
*/
function add(x, y) {
return x + y;
}- 使用 JSDoc 注釋來描述自定義類型和接口。例如：
/**
* @typedef {Object} Person
* @property {string} name - The person's name.
* @property {number} age - The person's age in years.
*/
/**
* @interface Shape
* @property {number} x
* @property {number} y
* @property {number} width
* @property {number} height
*/- 可以使用文檔生成工具（如 JSDoc-to-HTML）將 JSDoc 注釋自動(dòng)生成為文檔。例如，在使用 JSDoc 注釋編寫完整的庫或應(yīng)用后，可以使用 JSDoc-to-HTML 工具將其轉(zhuǎn)換為漂亮的文檔。
JSDoc 以@標(biāo)記名稱的形式提供了很多標(biāo)記，常用的包括：
- @param：用于描述函數(shù)的參數(shù)。允許指定參數(shù)名稱、類型和描述信息。
- @returns：用于描述函數(shù)返回值的類型和描述信息。
- @typedef：用于定義自定義類型或?qū)ο蟆Ｔ试S指定類型名稱、屬性列表和描述信息。
- @property：用于描述對(duì)象的屬性。允許指定屬性名稱、類型和描述信息。
- @callback：用于描述回調(diào)函數(shù)的參數(shù)和返回值類型。
- @class：用于描述一個(gè)類。允許指定類的名稱、屬性、方法和描述信息。
- @constructor：用于描述一個(gè)構(gòu)造函數(shù)。允許指定構(gòu)造函數(shù)的參數(shù)、返回值和描述信息。
- @enum：用于定義一個(gè)枚舉類型。允許指定枚舉名稱、屬性列表和描述信息。
- @namespace：用于描述命名空間。允許指定命名空間的名稱和描述信息。
- @readonly：用于指定只讀屬性或參數(shù)。
- @private：用于指定私有屬性或方法。
- @public：用于指定公共屬性或方法。
- @protected：用于指定受保護(hù)的屬性或方法。
- @throws：用于描述函數(shù)可能引發(fā)的異常。允許指定異常類型和描述信息。
這些標(biāo)記只是 JSDoc 提供的許多標(biāo)記中的一部分。JSDoc 還提供了許多其他標(biāo)記，如 @augments、@example、@ignore、@link、@since 等。通過使用這些標(biāo)記，可以更好地記錄和描述 JavaScript 代碼。
需要注意，盡管可以使用 JSDoc 代替 TypeScript 進(jìn)行類型檢查，但它并不像 TypeScript 一樣強(qiáng)制執(zhí)行類型檢查。如果在 JSDoc 注釋中錯(cuò)誤地描述了類型，或者沒有提供足夠的類型信息，將無法得到類型檢查的保護(hù)，這可能會(huì)導(dǎo)致運(yùn)行時(shí)錯(cuò)誤。因此，在使用 JSDoc 進(jìn)行類型檢查時(shí)，需要格外小心，并盡可能詳細(xì)地記錄變量和參數(shù)的類型。
小結(jié)
最終 JSDoc 會(huì)取代 TypeScript 進(jìn)行類型檢查嗎？我認(rèn)為是不會(huì)的。TypeScript 非常適合應(yīng)用開發(fā)，而且它正在不斷改進(jìn)。不過對(duì)于庫開發(fā)來說，使用純 JavaScript 和 JSDoc 注釋似乎是更好的選擇。
絕大多數(shù)開發(fā)人員不是在構(gòu)建庫，而是在構(gòu)建應(yīng)用。因此，TypeScript 將保持主要的類型檢查方式，直到 JavaScript 實(shí)現(xiàn)原生類型檢查為止。
選擇 TypeScript 還是帶有 JSDoc 的 JavaScript 取決于開發(fā)團(tuán)隊(duì)或開發(fā)人員的需求和偏好。對(duì)于庫作者來說，JavaScript 和 JSDoc 的簡單性和靈活性特別有吸引力的。對(duì)于已經(jīng)具有構(gòu)建中的應(yīng)用，TypeScript 仍然可能是首選。
