使用转译运行 TypeScript 代码

¥Running TypeScript code using transpilation

转译是将源代码从一种语言转换为另一种语言的过程。对于 TypeScript，它是将 TypeScript 代码转换为 JavaScript 代码的过程。这是必要的，因为浏览器和 Node.js 无法直接运行 TypeScript 代码。

¥Transpilation is the process of converting source code from one language to another. In the case of TypeScript, it's the process of converting TypeScript code to JavaScript code. This is necessary because browsers and Node.js can't run TypeScript code directly.

编译 TypeScript 到 JavaScript

¥Compiling TypeScript to JavaScript

运行 TypeScript 代码的最常见方法是先将其编译为 JavaScript。你可以使用 TypeScript 编译器 tsc 执行此操作。

¥The most common way to run TypeScript code is to compile it to JavaScript first. You can do this using the TypeScript compiler tsc.

步骤 1：将你的 TypeScript 代码写入文件中，例如 example.ts。

¥Step 1: Write your TypeScript code in a file, for example example.ts.

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);

步骤 2：使用包管理器在本地安装 TypeScript：

¥Step 2: Install TypeScript locally using a package manager:

在此示例中，我们将使用 npm，你可以查看我们的 我们对 npm 包管理器的介绍 了解更多信息。

¥In this example we're going to use npm, you can check our our introduction to the npm package manager for more information.

npm i -D typescript # -D is a shorthand for --save-dev

步骤 3：使用 tsc 命令将你的 TypeScript 代码编译为 JavaScript：

¥Step 3: Compile your TypeScript code to JavaScript using the tsc command:

npx tsc example.ts

注意：npx 是一种工具，可让你运行 Node.js 包而无需全局安装它们。

¥NOTE: npx is a tool that allows you to run Node.js packages without installing them globally.

tsc 是 TypeScript 编译器，它将获取我们的 TypeScript 代码并将其编译为 JavaScript。此命令将生成一个名为 example.js 的新文件，我们可以使用 Node.js 运行该文件。现在当我们知道如何编译和运行 TypeScript 代码时，让我们看看 TypeScript 的错误预防功能在起作用！

¥tsc is the TypeScript compiler which will take our TypeScript code and compile it to JavaScript. This command will result in a new file named example.js that we can run using Node.js. Now when we know how to compile and run TypeScript code let's see TypeScript bug-preventing capabilities in action!

步骤 4：使用 Node.js 运行你的 JavaScript 代码：

¥Step 4: Run your JavaScript code using Node.js:

node example.js

你应该在终端中看到 TypeScript 代码的输出

¥You should see the output of your TypeScript code in the terminal

如果存在类型错误

¥If there are type errors

如果你的 TypeScript 代码中有类型错误，TypeScript 编译器将捕获它们并阻止你运行代码。例如，如果你将 justine 的 age 属性更改为字符串，TypeScript 将抛出错误：

¥If you have type errors in your TypeScript code, the TypeScript compiler will catch them and prevent you from running the code. For example, if you change the age property of justine to a string, TypeScript will throw an error:

我们将像这样修改我们的代码，以自愿引入类型错误：

¥We will modify our code like this, to voluntarily introduce a type error:

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

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

const justine: User = {
  name: 'Justine',
  age: 'Secret!',
};

const isJustineAnAdult: string = isAdult(justine, "I shouldn't be here!");

TypeScript 对此的看法是：

¥And this is what TypeScript has to say about this:

example.ts:12:5 - error TS2322: Type 'string' is not assignable to type 'number'.

12     age: 'Secret!',
       ~~~

  example.ts:3:5
    3     age: number;
          ~~~
    The expected type comes from property 'age' which is declared here on type 'User'

example.ts:15:7 - error TS2322: Type 'boolean' is not assignable to type 'string'.

15 const isJustineAnAdult: string = isAdult(justine, "I shouldn't be here!");
         ~~~~~~~~~~~~~~~~

example.ts:15:51 - error TS2554: Expected 1 arguments, but got 2.

15 const isJustineAnAdult: string = isAdult(justine, "I shouldn't be here!");
                                                     ~~~~~~~~~~~~~~~~~~~~~~


Found 3 errors in the same file, starting at: example.ts:12

如你所见，TypeScript 在错误发生之前捕获它们非常有用。这是 TypeScript 在开发者中如此受欢迎的原因之一。

¥As you can see, TypeScript is very helpful in catching bugs before they even happen. This is one of the reasons why TypeScript is so popular among developers.