国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

為你的 JavaScript 項目添加智能提示和類型檢查

zhaochunqi / 2842人閱讀

摘要：前言最近在做項目代碼重構，其中有一個要求是為代碼添加智能提示和類型檢查。調(diào)研了一段時間后，下文以編輯器作為開發(fā)工具，介紹一下如何為加上智能提示以及類型檢查。

本文首發(fā)于我的博客（點此查看），歡迎關注。
前言

最近在做項目代碼重構，其中有一個要求是為代碼添加智能提示和類型檢查。智能提示，英文為 IntelliSense，能為開發(fā)者提供代碼智能補全、懸浮提示、跳轉(zhuǎn)定義等功能，幫助其正確并且快速完成編碼。說起來，JavaScript 作為一門動態(tài)弱類型解釋型語言，變量聲明后可以更改類型，并且類型在運行時才能確定，由此容易產(chǎn)生大量代碼運行中才能發(fā)現(xiàn)的錯誤，相比 Java 等靜態(tài)類型語言，開發(fā)體驗上確實差了一截。更煩躁的是，智能提示就是依賴于靜態(tài)類型檢查的，所以在以前，指望 JavaScript 的智能提示完善度追上 Java 基本不可能。當然，時代在進步，TypeScript 已經(jīng)問世許久，為 JavaScript 帶來了靜態(tài)類型檢查以及其他諸多特性。JavaScript 的智能提示也已有了解決方案。調(diào)研了一段時間后，下文以 VSCode 編輯器作為開發(fā)工具，介紹一下如何為 JavaScript 加上智能提示以及類型檢查。

基于 JSDoc

JSDoc 是目前最通用的 JavaScript API 文檔生成器，根據(jù)其語法編寫代碼注釋，可以十分方便地自動生成文檔。由于 JSDoc 能提供詳細的類型信息，其也被 VSCode 等編輯器接受應用于智能提示。例如，可以使用 @type 標簽來賦予部分聲明的 object 一個特殊類型：

/**
 * @type {{a: boolean, b: boolean, c: number}}
 */
var x = {a: true};
x.b = false;
x. // <- 由于 type 聲明，"x" 將被提示含有屬性 a,b 以及 c

JSDoc 最常見的使用是為函數(shù)的參數(shù)聲明類型，使用 @param 來完成：

/**
 * @param {string} param1 - 這里可以用于解釋參數(shù)含義
 */
function Foo(param1) {
    this.prop = param1; // param1 （以及 this.prop）均為 string 類型
}

為代碼添加 JSDoc 注釋使得閱讀和理解代碼更加方便（代碼交接時再也不用抓狂了，當然前提是注釋寫得好），也保障了開發(fā)時的體驗并且降低了很多運行時才能發(fā)現(xiàn)的數(shù)據(jù)類型方面的 bug。VSCode 基本支持 JSDoc 的常見語法，具體使用可參見JSDoc support in JavaScript。

基于 TypeScript 類型聲明文件

除了使用 JSDoc 提前聲明類型，更為激進的做法是直接使用微軟開發(fā)的 TypeScript，為整個項目帶來完善的靜態(tài)類型檢查。當然，對于老項目來說，改造的成本較為巨大（使用 Flow 也類似，要動的代碼太多，況且 Flow 爛尾了）。不過由于和 TypeScript 師出同門，VSCode 能夠直接讀取前者的類型聲明文件，來為 JavaScript 提供智能提示（實際上 JavaScript 的智能提示功能就是基于 TypeScript 團隊為 VSCode 提供的 JavaScript 語言服務開發(fā)的）。 TypeScript 的類型聲明文件以 .d.ts 為后綴，用于描述同名的 JavaScript 文件導出代碼的類型，功能上類似于 C 語言的 .h 頭文件。不嚴格地來說，ts 類型聲明文件就像用 TypeScript 語法將 JSDoc 的注釋重寫了一遍并提取到了多帶帶的文件中。VSCode 更是將二者作了融合，當你二者混用的時候，可以直接在 JSDoc 的注釋中直接使用 ts 類型聲明文件中定義的 interface 和 class 等。直接使用官方提供的示意圖（圖中是 Visual Studio，不過無傷大雅）：

對于自己的代碼，可以編寫對應的 ts 類型聲明文件，而對于引用的第三方庫，社區(qū)同樣提供了解決方案：DefinitelyTyped 提供了常見的第三方庫的類型聲明文件。VSCode 有很多第三方庫已經(jīng)內(nèi)置類型聲明文件，自己下載的話直接使用 npm 即可：

# @types + 第三方庫名稱
npm i @types/express

關于 ts 類型聲明文件的語法等相關信息，參見官網(wǎng)介紹。

另外，在 VSCode 中，類型檢查并非默認開啟，這意味著即使你有詳盡的 JSDoc 注釋或 ts 類型聲明文件，依然可能在數(shù)據(jù)類型上栽跟頭。開啟方式為在項目根目錄下添加 jsconfig.json 文件，并設置 "checkJs": true，示例如下：

{
    "compilerOptions": {
        "checkJs": true
    },
    
    // 位于此目錄下的文件不進行靜態(tài)檢查和智能提示
    "exclude": [
        "node_modules",
        "**/node_modules/*"
    ]
}
總結

最后，無論是對老項目的改造或是新項目的開發(fā)，使用以上的方式添加智能提示和類型檢查顯而易見會略微拖慢開發(fā)速度，但我們認為，與智能提示帶來的開發(fā)體驗、將很多可能在運行時才能發(fā)現(xiàn)的錯誤通過類型檢查前置解決、順手完成的詳細文檔以及重構代碼時的信心相比，這點速度的犧牲是值得的。

參考文檔：
JavaScript in Visual Studio Code


Working with JavaScript


JavaScript Language Service in Visual Studio

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102495.html

相關文章

  • JS 靜態(tài)類型檢查工具 Flow

    摘要：本文主要介紹了解決作為弱類型語言沒有類型檢查痛點的靜態(tài)類型檢查工具，并且介紹了在中使用的方法，最后介紹了一些常用的語法。 本文主要介紹了解決JS作為弱類型語言沒有類型檢查痛點的靜態(tài)類型檢查工具 Flow ，并且介紹了在WebStorm中使用Flow的方法，最后介紹了一些常用的Flow語法。 1. 簡介 JS作為一種腳本語言是沒有類型檢測的，這個特點有時候用著很方便，但在一個較大的項目中...

    CloudDeveloper 評論0 收藏0

  • vue2.0學習筆記（prop）

    摘要：用一個變量進行動態(tài)賦值。傳入一個對象即便對象是靜態(tài)的，我們?nèi)匀恍枰獊砀嬖V這是一個表達式而不是一個字符串。我們可以將這個特性添加到你的組件實例上然后這個特性就會自動添加到的根元素上。 1、prop的大小寫 HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。這意味著當你使用 DOM 中的模板時，camelCase (駝峰命名法) 的 prop 名需要使用其等價...

    I_Am 評論0 收藏0

  • 2017前端性能優(yōu)化清單

    摘要：性能最好具有可量化可監(jiān)測以及可改動的特性。下文是一份年的前端性能優(yōu)化清單，闡述了作為前端開發(fā)人員，為了確保反饋速度以及瀏覽器兼容性我們需要考慮的問題。地圖設計的決定違背了性能理念，所以他在這份清單內(nèi)的順序有待考慮。 2017前端性能優(yōu)化清單 你開始使用漸進啟動了么？是不是已經(jīng)使用過React和Angular中tree-shaking和code-splitting兩個工具？有沒有用過Br...

    verano 評論0 收藏0

  • 2017前端性能優(yōu)化清單

    摘要：性能最好具有可量化可監(jiān)測以及可改動的特性。下文是一份年的前端性能優(yōu)化清單，闡述了作為前端開發(fā)人員，為了確保反饋速度以及瀏覽器兼容性我們需要考慮的問題。地圖設計的決定違背了性能理念，所以他在這份清單內(nèi)的順序有待考慮。 2017前端性能優(yōu)化清單 你開始使用漸進啟動了么？是不是已經(jīng)使用過React和Angular中tree-shaking和code-splitting兩個工具？有沒有用過Br...

    kycool 評論0 收藏0

  • 2017前端性能優(yōu)化清單

    摘要：性能最好具有可量化可監(jiān)測以及可改動的特性。下文是一份年的前端性能優(yōu)化清單，闡述了作為前端開發(fā)人員，為了確保反饋速度以及瀏覽器兼容性我們需要考慮的問題。地圖設計的決定違背了性能理念，所以他在這份清單內(nèi)的順序有待考慮。 2017前端性能優(yōu)化清單 你開始使用漸進啟動了么？是不是已經(jīng)使用過React和Angular中tree-shaking和code-splitting兩個工具？有沒有用過Br...

    CollinPeng 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<