如何在 Visual Studio Code 中使用 TypeScript

笔记首页 >> 教程系列 >> 如何在 Visual Studio Code 中使用 TypeScript

如何在 Visual Studio Code 中使用 TypeScript

介绍

TypeScript是 JavaScript 的类型化超集，可编译为纯 JavaScript。让我们分解一下这到底意味着什么：

typed – 您可以定义变量、参数和返回数据类型。
superset -TypeScript 在 JavaScript 之上添加了一些附加功能。所有有效的 JavaScript 都是有效的 TypeScript，但反之则不然。
编译为纯 JavaScript – TypeScript 无法由浏览器运行。因此，可用工具负责将您的 TypeScript 编译为 JavaScript，以便浏览器能够理解。

在本教程中，您将在 Visual Studio Code 中使用 TypeScript，探索将它们结合使用的好处。

先决条件

对于这个项目，你需要：

对 JavaScript 的有效理解。您可以查看如何在 JavaScript 中编码系列以获取更多信息。
Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
已下载并安装Visual Studio Code (VS Code)。

第 1 步 – 安装和编译 TypeScript

使用 TypeScript 的第一步是在您的计算机上全局安装包。typescript通过在终端中运行以下命令来全局安装包：

npm install -g typescript

接下来，运行以下命令来创建项目目录：

mkdir typescript_test

移动到新创建的目录：

cd typescript_test

现在，您需要创建一个新的 TypeScript 文件。作为参考，这些以.ts扩展类型结尾。

您现在可以打开 VS Code 并通过依次单击File和New File创建一个新文件。之后，通过单击“文件”，然后单击“另存为…”来保存它。您可以命名此文件app.ts以遵循本教程。文件名并不重要，但确保文件类型扩展名.ts是。

该文件的第一行应export {};以 VS Code开头，以将其识别为模块。

创建一个函数来打印person对象的名字和姓氏：

应用程序

export {};

function welcomePerson(person) {
  console.log(`Hey ${person.firstName} ${person.lastName}`);
  return `Hey ${person.firstName} ${person.lastName}`;
}

const james = {
  firstName: "James",
  lastName: "Quick"
};

welcomePerson(james);

上面代码的问题是对可以传递给welcomePerson函数的内容没有限制。在 TypeScript 中，您可以创建接口来定义对象应具有的属性。

在下面的代码段中，有一个Person对象的接口具有两个属性，firstName和lastName. 然后，该welcomePerson函数被修改为只接受Person对象。

应用程序

export {};

function welcomePerson(person: Person) {
  console.log(`Hey ${person.firstName} ${person.lastName}`);
  return `Hey ${person.firstName} ${person.lastName}`;
}

const james = {
  firstName: "James",
  lastName: "Quick"
};

welcomePerson(james);

interface Person {
  firstName: string;
  lastName: string;
}

如果您尝试将字符串传递给welcomePerson函数，这样做的好处将变得显而易见。

例如，替换james：

welcomePerson(james);

与'James'：

welcomePerson('James');

因为我们正在使用 TypeScript 文件，VS Code 会立即为您提供反馈，让您知道该函数需要一个Person对象而不是字符串。

Output
Argument of type '"James"' is not assignable to parameter of type 'Person'.

现在您有一个可用的 TypeScript 文件，您可以将其编译为 JavaScript。为此，您需要调用该函数并告诉它要编译哪个文件。您可以使用 VS Code 中的内置终端来执行此操作。

tsc app.ts

如果您之前没有修复错误，您将看到错误输出：

Output
app.ts:13:15 - error TS2345: Argument of type '"James"' is not assignable to parameter of type 'Person'.

通过Person正确传递对象而不是字符串来修复错误。然后再次编译，您将获得一个有效的 JavaScript 文件。

ls在终端中运行命令将显示我们当前路径中的文件：

ls

您将看到您的原始ts文件和一个新js文件：

Output
app.js
app.ts

现在，让我们app.js在 VS Code 中打开该文件。

应用程序.js

"use strict";
exports.__esModule = true;
function welcomePerson(person) {
    console.log("Hey " + person.firstName + " " + person.lastName);
    return "Hey " + person.firstName + " " + person.lastName;
}
var james = {
    firstName: "James",
    lastName: "Quick"
};
welcomePerson(james);

请注意，模板文字 strings是 ES6 的一个特性，从 ES5 编译为简单的字符串连接。我们很快就会回到这个话题。

为了验证这是否有效，您现在可以在终端中使用 Node 直接运行 JavaScript：

node app.js

您将看到一个名称打印到控制台：

Output
Hey James Quick

第 2 步 – 创建 TypeScript 配置文件

到目前为止，您已经直接编译了一个文件。这很好，但在实际项目中，您可能希望自定义所有文件的编译方式。例如，您可能希望将它们编译为 ES6 而不是 ES5。为此，您需要创建一个 TypeScript 配置文件。

要创建 TypeScript 配置文件，您可以运行以下命令（类似于npm init）：

tsc --init

您将收到此输出：

Output
message TS6071: Successfully created a tsconfig.json file.

打开你的新tsconfig.json文件，你会看到很多不同的选项，其中大部分都被注释掉了。

新配置文件中列出和注释掉的选项的屏幕截图

您可能已经注意到有一个名为的设置"target"被设置为"es5"。将该设置更改为"es6".

对进行这些更改后tsconfig.json，tsc在您的终端中运行：

tsc

注意：与以前不同，您没有指定输入文件。在官方文件指出：“当输入文件在命令行上指定，tsconfig.json文件将被忽略。”

现在，打开新创建的 JavaScript 文件：

应用程序.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function welcomePerson(person) {
    console.log(`Hey ${person.firstName} ${person.lastName}`);
    return `Hey ${person.firstName} ${person.lastName}`;
}
const james = {
    firstName: "James",
    lastName: "Quick"
};
welcomePerson(james);

请注意，模板文字字符串被保留下来，证明您的 TypeScript 已成功编译为 ES6。

您可以更改的另一件事是 JavaScript 文件在创建后的存储位置。此设置可以在"outDir".

尝试删除"outDir"，然后重新开始输入。VS Code 为您提供IntelliSense，您可以在 TypeScript 配置文件中设置哪些属性。

IntelliSense 建议的屏幕截图

您可以"outDir"将当前目录更改为如下dist目录：

配置文件

"outDir": "./dist"

再次编译 ( tsc) 后，请注意您的输出 JavaScript 文件确实位于dist目录中。

您可以在终端中使用cd和ls命令来浏览dist目录的内容：

cd dist
ls

您将在新位置看到已编译的 JavaScript 文件：

Output
app.js

第 3 步——探索现代前端框架中的 TypeScript

在过去的几年里，TypeScript 越来越受欢迎。这里有几个例子说明它如何在现代前端框架中使用。

角 CLI

Angular CLI 项目预先配置了 TypeScript。默认情况下，所有配置、linting 等都是内置的。创建一个 Angular CLI 项目并环顾四周。这是查看 TypeScript 在真实应用中的样子的好方法。

创建 React 应用程序 2

默认情况下，Create React App 没有附带 TypeScript，但在最新版本中，它可以这样配置。如果您有兴趣学习如何在 Create React App 中使用 TypeScript，请查看 [使用 Create React App v2 和 TypeScript]([ https://www.digitalocean.com/community/tutorials/using-create-react- app-v2-and-typescript ) 文章。

Vue CLI 3

Vue CLI 项目可以配置为在创建新项目时使用 TypeScript。有关更多详细信息，您可以查看Vue 文档。

结论

在本教程中，您探索了在 VS Code 中使用 TypeScript。TypeScript 允许您生成更高质量的 JavaScript，从而在交付到生产环境时提供更多信心。如您所知，VS Code 可以很好地帮助您编写 TypeScript、生成配置等。

觉得文章有用？

点个广告表达一下你的爱意吧！