VScode中Javascript使用TypeScript文件实现智能提示

柔光的暖阳◎ 2022-06-12 05:59 1599阅读 0赞

## VScode中Javascript使用TypeScript文件实现智能提示 ##

其实智能提示就是引用库，从而智能提示库中的各类成员  
VsCode在JavaScript项目中链接或配置TypeScript文件类型(即\*.d.ts文件)，来实现智能提示，因此我们可以自己编写(根据TypeScript语言规范重新编写已有的JavaScript文件库)或者利用别人编写好的TypeScript文件。  
下面例子是使用别人编写好的TypeScript文件  
步骤一  
下载安装Node.js，因为要使用到npm，npm是Nodejs的管理器，跟随Nodejs安装。  
步骤二  
同时按WIN键和R键，打开Run窗口，输入cmd，打开命令提示符窗口  
步骤三  
在命令提示符窗口输入命令转到你所在项目的路径  
步骤四  
在项目路径下的命令提示符窗口中输入

npm install --save @type/package

**备注**：package指你所需要的TypeScript文件所在的文件包,你在哪个路径下执行该命令下载的文件包就会出现在哪个路径下。  
例子，我需要openlayers的TypeScript文件

npm install --save @type/openlayers

下载完成后，你可以看到@types文件夹，在它下面就是你要的文件夹，而最里面的\*.d.ts文件就是我们所要的TypeScript文件  
那么如何知道你所要的TypeScript文件别人是否编写好，并且上传到npm库中，你可以登陆网址：[https://microsoft.github.io/TypeSearch/][https_microsoft.github.io_TypeSearch]  
步骤五  
一、利用jsconfig.js文件引用TypeScript文件  
在JavaScript项目中创建jsconfig.json文件，然后配置以下内容

{
        "typeAcquisition": { "include": [ "package" ] } }

**备注**：package同上  
对于更多的jsconfig.json文件(此文件只支持JavaScript文件)配置请登录VsCode网址  
二、直接引用TypeScript文件  
在JavaScript文件中最顶层输入代码

/// <reference  path="TypeScript文件的路径"

例子

/// <reference  path="@types/openlayers/index.d.ts"

[https_microsoft.github.io_TypeSearch]: https://microsoft.github.io/TypeSearch/