如何在VisualStudioCode中使用TypeScript

来自菜鸟教程
跳转至：导航、​搜索

介绍

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

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

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

先决条件

对于这个项目，您将需要：

  • 对 JavaScript 的工作理解。 您可以查看 如何在 JavaScript 系列中编写代码以获取更多信息。
  • Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。
  • Visual Studio Code（VS Code）下载并安装。

第 1 步 — 安装和编译 TypeScript

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

npm install -g typescript

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

mkdir typescript_test

进入新创建的目录： 

cd typescript_test

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

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

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

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

应用程序.ts 

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 对象。

应用程序.ts 

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 对象而不是字符串。 

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

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

tsc app.ts

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

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

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

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

ls

您将看到原来的 ts 文件以及一个新的 js 文件： 

Outputapp.js
app.ts

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

应用程序.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);

请注意，作为 ES6 功能的 模板文字字符串 从 ES5 编译为简单的字符串连接。 我们很快就会回到这一点。

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

node app.js

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

OutputHey James Quick

第 2 步 — 创建 TypeScript 配置文件

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

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

tsc --init

您将收到以下输出： 

Outputmessage 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 配置文件中设置的属性。

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

tsconfig.json 

"outDir": "./dist"

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

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

cd dist
ls

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

Outputapp.js

第三步——在现代前端框架中探索 TypeScript

在过去的几年里，TypeScript 越来越受欢迎。 下面是几个如何在现代前端框架中使用它的示例。

角 CLI

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

创建反应应用程序 2

Create React App 默认不附带 TypeScript，但在最新版本中，可以这样配置。 如果您有兴趣了解如何将 TypeScript 与 Create React App 一起使用，请查看 使用 Create React App v2 和 TypeScript 文章。

Vue CLI 3

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

结论

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

取自“https://cainiaojiaocheng.com/index.php?title=如何在VisualStudioCode中使用TypeScript&oldid=28730”
Powered by MediaWiki