TypeScript 简介

什么是 TypeScript

TypeScript 是一种由 Microsoft 维护和开发的开源语言。

基本上，TypeScript 向 JavaScript 添加了额外的语法，以支持与编辑器的更紧密集成。在编辑器或 CI/CD 管道中尽早捕获错误，并编写更易于维护的代码。

我们稍后可以讨论 TypeScript 的其他好处，现在让我们看一些示例！

第一个 TypeScript 代码

看一下这段代码片段，然后我们可以一起分解它

type User = {
  name: string;
  age: number;
};

function isAdult(user: User): boolean {
  return user.age >= 18;
}

const justine = {
  name: 'Justine',
  age: 23,
} satisfies User;

const isJustineAnAdult = isAdult(justine);

第一部分（带有 type 关键字）负责声明代表用户的自定义对象类型。稍后，我们利用这个新创建的类型来创建函数 isAdult，它接受一个类型为 User 的参数并返回一个 boolean。之后，我们创建 justine，这是我们的示例数据，可用于调用先前定义的函数。最后，我们创建一个新变量，其中包含有关 justine 是否为成年人的信息。

关于这个例子，您还应该了解一些其他的事情。首先，如果我们不遵守声明的类型，TypeScript 会通知我们出现错误并防止滥用。其次，并非所有内容都必须显式键入——TypeScript 会为我们推断类型。例如，变量 isJustineAnAdult 的类型为 boolean，即使我们没有显式键入它，并且 justine 将是我们函数的有效参数，即使我们没有将此变量声明为 User 类型。

TypeScript 由什么组成？

TypeScript 由两个主要组件组成：代码本身和类型定义。

TypeScript 代码

代码部分是常规 JavaScript，带有用于类型注释的额外 TypeScript 特定语法。编译 TypeScript 代码时，所有 TypeScript 特定部分都会被删除，从而生成干净的 JavaScript，可以在任何环境中运行。例如

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

类型定义

类型定义描述了现有 JavaScript 代码的形状。它们通常存储在 .d.ts 文件中，并且不包含任何实际实现——它们仅描述类型。这些定义对于与 JavaScript 的互操作性至关重要：代码通常不作为 TypeScript 分发，而是转换为包含 sidecar 类型定义文件的 JavaScript。

例如，当您将 Node.js 与 TypeScript 一起使用时，您需要 Node.js API 的类型定义。这可以通过 @types/node 获得。使用以下命令安装它

npm add --save-dev @types/node

这些类型定义允许 TypeScript 了解 Node.js API，并在您使用 fs.readFile 或 http.createServer 等函数时提供适当的类型检查和自动完成功能。例如

import * as fs from 'fs';

fs.readFile('example.txt', 'foo', (err, data) => {
  //                          ^^^ Argument of type '"foo"' is not assignable to parameter of type …
  if (err) throw err;
  console.log(data);
});

许多流行的 JavaScript 库在 @types 命名空间下都有其类型定义，由 DefinitelyTyped 社区维护。这使得现有 JavaScript 库与 TypeScript 项目能够无缝集成。

转换能力

TypeScript 还包括强大的转换功能，特别是对于 JSX（在 React 和类似框架中使用）。 TypeScript 编译器可以将 JSX 语法转换为常规 JavaScript，类似于 Babel 的工作方式。虽然我们不会在这些文章中介绍这些转换功能，但值得注意的是，TypeScript 不仅仅是类型检查工具——它也是一个构建工具，用于将现代 JavaScript 语法转换为适用于不同环境的兼容版本。

如何运行 TypeScript 代码

好的，我们有一些 TypeScript 代码。现在我们如何运行它？有几种可能的方式来运行 TypeScript 代码，我们将在接下来的文章中介绍所有这些方式。

安全最佳实践原生运行 TypeScript