为什么用 TypeScript，你的第一个带类型的文件

了解什么是 TypeScript、它解决的问题，并写下你的第一个带类型的文件。

6 分钟 · 3 题

你已经了解 JavaScript，那是让网页具有交互性的语言。TypeScript 是 JavaScript 的扩展：任何有效的 JavaScript 代码同时也是 TypeScript 代码。它最大的新增功能是类型。类型描述一个值的性质：一段文本、一个数字、一个真或假……通过声明变量的类型，你让计算机能够在运行之前检查你的代码。

这为什么有用？在 JavaScript 中，没有任何机制阻止你在期望数字的地方传入文本。程序照样运行……并产生一个荒谬的结果，而这往往要到很久以后才被发现。看看这个例子：函数期望价格是一个数字，却收到了一段文本。

function addTax(price) {
  return price + price * 0.2;
}

const total = addTax("100");
console.log(total); // "10020" instead of 120!

在 TypeScript 中，你会添加一个类型注解：在参数或变量名之后，紧接一个冒号加上类型。随后 TypeScript 代码会被编译，也就是由一个叫做编译器（tsc）的工具翻译成普通的 JavaScript。正是在这一步，类型错误会被检测并报告出来。

function addTax(price: number): number {
  return price + price * 0.2;
}

const total = addTax(100);
console.log(total); // 120

现在我们来写你的第一个带类型的文件。TypeScript 文件使用 .ts 扩展名，而不是 .js。在里面，你写的是常规的 JavaScript，并用类型注解加以丰富。

let firstName: string = "Sarah";
let age: number = 28;

console.log(firstName + " is " + age + " years old.");

知识检测

确认你已牢记本课的重点内容。

1. 相对于 JavaScript，TypeScript 是什么？
   • 一种与 JavaScript 完全不同的语言
   • 在 JavaScript 上增加了类型的扩展
   • 一个让 JavaScript 变快的工具
   • 一个网页浏览器
2. 编译一个 .ts 文件时会发生什么？
   • 它被转换成一个普通的 JavaScript 文件
   • 它被浏览器直接执行
   • 它被转换成一个 HTML 页面
3. let age: number 中的注解意味着什么？
   • 变量 age 始终为零
   • 变量 age 只能存放数字
   • 变量 age 是一段文本
   • 变量 age 是可选的