利用types增强vscode中js代码提示功能详解

利用types增强VS Code中JS代码提示功能，可以使得在代码编写过程中有更好的提示和自动补全，让代码更加高效、准确的完成。

1. 安装@types模块

首先需要安装项目相关的依赖@types模块，例如：

npm install @types/react @types/react-dom --save-dev

该命令将会安装React和React-DOM的类型声明依赖。在安装了相应的类型声明依赖后，VS Code将会自动识别代码文件中引入的模块并提供相应的类型提示。

2. 配置tsconfig.json

接下来需要在tsconfig.json文件中添加以下配置：

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

以上配置将启用类型检查，允许检查.js文件，并排除node_modules中的文件。

示例说明

示例1：使用React组件时支持类型提示

在项目中我们安装了React和@types/react，现在我们在一个.js文件中使用React来创建一个组件，结合@types/react提供的类型声明，我们可以获得如下的代码提示：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  )
}

export default App;

在上面的代码中，当我们输入<时VS Code会自动弹出div和h1等标签的提示，同时，当我们输入组件的prop名称时，也会立即展示出可用的选项。

示例2：使用第三方库支持类型提示

我们在一个.js文件中使用第三方库axios，并安装了@types/axios，接下来我们看下VS Code类型提示的体验：

import axios from 'axios';

// 使用axios发送get请求
axios.get('http://localhost:8080/api/users').then((response) => {
  console.log(response.data);
});

// 使用axios发送post请求
axios.post('http://localhost:8080/api/users', {
  firstName: 'John',
  lastName: 'Doe'
}).then((response) => {
  console.log(response.data);
});

在上面的代码中，当我们输入axios.时，VS Code会弹出相关的选择列表，例如get和post等方法，同时可以快速展示出它们的参数和返回类型。这样可以大大加快我们的代码编写速度，减少错误发生的概率。