什么是 TypeScript，为什么要使用它？

1function greet(name) {
2  return "Hello, " + name.toUpperCase();
3}
4
5console.log(greet("Mark"));

1function greet(name: string): string {
2  return "Hello, " + name.toUpperCase();
3}
4
5console.log(greet("Mark"));

动手试一试

让我们通过一个简单的例子来体验这个过程。在下方的交互式环境中，你可以编写 TypeScript 代码，将其编译并运行生成的 JavaScript 代码。点击“运行”按钮打开终端，并按以下步骤操作：

1. 编译 TypeScript 代码：

   1tsc index.ts

   注意：tsc 是 TypeScript 编译器，它会读取你的 .ts 文件并输出纯 JavaScript 代码。

2. 查看生成的 JavaScript 代码：

   1cat index.js

3. 运行 JavaScript 文件：

   1node index.js

类型注解（如 <code>n: number</code> 和 <code>: boolean</code>）仅在开发阶段存在，在代码编译时会被移除。

1function double(x) {
2  return x + x;
3}
4
5console.log(double("3")); // 输出 "33" —— 哦不！

1function double(x: number): number {
2  return x + x;
3}
4
5console.log(double("3"));  // 编译时报错

1function getUser(id) {
2  return { id, name: "Alice" };
3}
4
5console.log(getUser(1).email.toLowerCase()); // 无法读取 undefined 的 toLowerCase 属性

1function getUser(id: number): { id: number; name: string } {
2  return { id, name: "Alice" };
3}
4
5console.log(getUser(1).email.toLowerCase()); // 错误：属性 'email' 不存在