現(xiàn)代前端開發(fā)現(xiàn)在越來越偏向于使用TypeScript了，TypeScript的鴨子類型系統(tǒng)讓代碼更加的規(guī)范，同時在編輯器中也能更加有效的進行推導(dǎo)。

問題提出

但是，作為一個混跡于各大項目的前端們，總會遇到一些純JavaScript項目，這些項目注解不規(guī)范，也沒考慮后期擴展，VsCode代碼提示基本等于沒有。

那么，在VsCode中，如何為這些純JavaScript項目添加代碼提示呢？本篇文章就來為你解決這個問題。

方法1、安裝依賴包 @types/pkg-name

對于純粹的JavaScript項目，大部分都是NodeJS項目。如果項目是采用了的esmodule的開發(fā)模式，項目里用到了import、require這一類關(guān)鍵字的，那么這是最快速的一種方式了。

最常用的就是@types/node了：

在VsCode中，如果你的項目沒安裝這個包，NodeJS的大部分功能，是不會有代碼提示的。

萬幸的是，大多數(shù)常見的框架/庫，都是提供了這個類型聲明文件的。比如，3D前端開發(fā)庫three.js提供的：

假設(shè)你的項目中使用了某個三方庫pkg，你直接安裝它對應(yīng)的類型聲明模塊@types/pkg就行了，非常方便！

方法2、使用jsdoc注釋

對于某些類型確實沒有第三方庫支持的，簡單的類型，是可以通過jsdoc注釋來解決的。

上面圖片中可以看到，雖然adminToken和adminTicket都等于null，但是通過添加注釋，這兩個為null的變量也有了類型，VsCode也進行了智能提示。

/** @type {{access_token:string,expires_in:7200,create_time:number}} */

還有很多其他的jsdoc注釋，大家就參考其官方文檔了吧

方法3、使用三斜線指令，自定義.d.ts

通過如上兩種方式的引入，應(yīng)該也解決了大部分代碼提示問題了。但是，除此之外，還是有很多自定義的類型、自定義的原型方法、自定義的全局變量等等，這就不得不上終極殺手锏了。

那就是，三斜線指令。

三斜線指令，是TS的一個特性，類似于C語言的#include，格式大概如下：

/// <reference  path="xxx.d.ts"/>

為什么說它是終極殺手锏，那是因為在JavaScript文件中，它也是可以使用的！

比如，創(chuàng)建一個database.d.ts文件，在文件內(nèi)定義一個類型：

/**
 * 商品表`wxpay_goods`的數(shù)據(jù)結(jié)構(gòu)
 */
interface DB_Goods{
  /**
   * 商品id
   */
  _id:string;

  /**
   * 單價
   */
  amount: number;

  /**
   * 庫存
   */
  inventory:number;
  
  /**
   * 商品名稱
   */
  name: string;

  /**
   * 商品描述
   */
  description: string;

  /**
   * 上架/下架狀態(tài)
   * 1-上架 2-已下架
   */
  status: 1|2;
}

通過三斜線指令引入后，再配合@type注釋就可以完全達到自定義的效果了：

真的是殺手锏?。∵@樣一來，所有的JavaScript代碼都可以加入智能提示了！非常好用！

覺得有用，還請點贊收藏！
勵志前端，CSDN唯一賬號！關(guān)注我，帶你了解更多前端知識！文章來源地址http://www.zghlxwxcb.cn/news/detail-744235.html

到了這里，關(guān)于在VsCode中，如何給JavaScript項目增加代碼提示的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！