前端開發(fā)何必執(zhí)著于Typescript?Jsdoc一樣很好用
為什么很多公司執(zhí)著于typescript?因為typescript支持很多JS不支持的特性,正確的使用typescript,可以使你的代碼更易于維護。
最主要的是可以給JS添加類型,使編輯器的提示更智能。
但是,typescript是很復雜的一門語言,很多開發(fā)者并不能很好的運用typescript,甚至很多人是被迫的,他們內心是反感使用typescript的,導致代碼寫的亂七八糟。
事實上,JS也有很多優(yōu)勢是typescript所不具備的,比如:JS的靈活性很高。
如果我告訴你,有一種工具,完全可以像寫typescript一樣寫JS,你會用嗎?
我說的這個工具就是jsdoc,我們可以叫它JS文檔注釋。它的目的也是為JS添加類型的,只是以注釋的形式添加的,它有固定的語法。
我就以項目中的代碼來舉例吧,大家看如下文檔注釋。其中,@template 用于聲明泛型類型,@typedef 用于定義一個類型。
在這里,我們定義了一個泛型T和一個名叫TreeNode的類型。TreeNode包含2個確定的字段:id和children,剩下的字段由泛型T確定。
/**
* @template T
* @typedef {T & {id: number, children: TreeNode<T>[]}} TreeNode
*/
下面,我們來測試一下這個類型。
如下圖,我們聲明一個變量node,使用@type指定為TreeNode類型,尖括號中間的對象類型替代了我們定義中的泛型T。
當我們鍵入點號后,編輯器給出了非常智能的提示。大家說,是不是很酷?
這是真實項目中的代碼,一個生成ID的函數(shù)。
使用@param可以為函數(shù)參數(shù)指定類型,在這里,我們?yōu)閠ree指定了TreeNode數(shù)組類型。使用@returns可以指定函數(shù)返回值的類型。
/**
* @param {TreeNode<{}>[]} tree
* @returns {number}
*/
export const genId = tree => {
return (function eachFn (data) {
return data.reduce((t, item) => {
return Math.max(
t,
item.id || 0,
item.children ? eachFn(item.children) : 0
)
}, 0)
})(tree) + 1
}
如下圖,由于我們給tree指定了類型,當鍵入點號后,編輯器知道data是數(shù)組類型,正確地給出了數(shù)組的成員提示。這使我們在鍵入時,不易出錯。
通過數(shù)組方法,編輯器也推導出了item的類型,當我們鍵入點號后,給出了合理的提示。
當我們鼠標指針移入函數(shù)名時,編輯器給出了該函數(shù)的提示。告訴我們,該函數(shù)接收一個TreeNode數(shù)組參數(shù)tree,返回數(shù)值類型結果。
現(xiàn)在,大家覺得jsdoc怎么樣?是不是很好用?酷不酷?
如果大家開發(fā)用的語言是JS,我建議大家學學jsdoc。jsdoc的用法遠比本文介紹的要多,它很強大,但語法卻很簡單易學。