TypeScript 在VSCODE中跳转至JS文件定义（而不是.d.ts文件）

在本文中，我们将介绍如何在VSCODE中跳转至TypeScript源码中的JavaScript文件定义，而不是.d.ts文件。

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集，添加了静态类型和其他一些特性，旨在提高代码的可靠性和可维护性。然而，在实际开发中，我们经常需要查看JavaScript文件的定义，以便更好地理解框架或库的实现细节。在VSCODE中，默认情况下，当我们选择一个TypeScript标识符并按下F12键时，会跳转至.d.ts文件的定义，而不是源码的定义。接下来，我们将介绍如何配置VSCODE，以便在跳转时直接查看JavaScript源码。

阅读更多：TypeScript 教程

步骤

步骤1: 打开VSCODE设置

首先，我们需要打开VSCODE的设置。你可以点击左上角的文件菜单，然后选择首选项，再点击设置。

步骤2: 搜索设置

在设置界面中，你可以看到左侧有很多不同的设置选项。在搜索框中输入”TypeScript”，VSCODE将过滤显示与TypeScript相关的设置。

步骤3: 打开TypeScript设置

在搜索结果中，你会看到一个名为”TypeScript – 对于 JavaScript 的工具支持”的设置选项。点击它将打开该设置。

步骤4: 配置TypeScript工具支持

在”TypeScript – 对于 JavaScript 的工具支持”的设置界面中，你可以找到一个名为”Go To: Options”的选项。点击这个选项将打开TypeScript的详细设置。

步骤5: 修改TypeScript工具支持的选项

在详细设置界面中，你可以看到一系列的选项和复选框。我们需要找到一个名为”Check JS”的复选框。默认情况下，该复选框是未勾选的，这就是为什么我们默认会跳转至.d.ts文件定义而不是源码定义的原因。

步骤6: 勾选”Check JS”复选框

现在，我们只需简单地勾选”Check JS”复选框。一旦勾选上该选项，VSCODE将会在跳转时直接查找JavaScript源码定义。

示例

让我们通过一个示例来演示配置VSCODE以跳转至JavaScript源码定义的过程。

假设我们的项目使用了一个名为”axios”的JavaScript库。我们的TypeScript代码如下所示：

import axios from 'axios';

axios.get('https://api.example.com')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

现在，我们想要查看axios.get方法的定义，以便了解它的具体实现。

按下F12键并选择axios.get，VSCODE将会跳转至该方法的定义处。如果之前没有按照上述步骤配置VSCODE，那么它将跳转至axios.d.ts文件的定义。但如果我们已经按照上述步骤配置过VSCODE，它将会直接跳转至axios.js文件的定义，使我们能够更好地了解axios.get方法的实现细节。

总结

在本文中，我们介绍了如何在VSCODE中配置以直接跳转至JavaScript源码定义而不是.d.ts文件。通过按照上述步骤，我们可以更方便地查看框架或库的具体实现细节，从而更加深入地理解它们的工作原理。如果你是一个TypeScript开发者，并且需要频繁地查看JavaScript源码定义，那么这个配置将对你的工作有所帮助。