为你的项目引入 TypeScript，通常有几种途径：
- 通过 npm（Node.js 的包管理器）
- 安装 TypeScript 的 Visual Studio 插件
对于 Visual Studio 2017 和 Visual Studio 2015 Update3 的用户，它们默认包含 TypeScript 的语言支持，但可能不包含 TypeScript 编译器 tsc。如果你在安装时漏掉了它，仍然可以单独下载。
对于使用 npm 的用户，可以通过以下命令全局安装：
npm install -g typescript
创建你的第一个 TypeScript 文件
打开你的编辑器，创建一个名为 greeter.ts 的文件，并输入以下 JavaScript 代码：
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);
编译你的代码
我们使用了 .ts 扩展名，但这段代码其实就是普通的 JavaScript。你甚至可以直接从现有的 JavaScript 应用中复制粘贴过来。
在命令行中运行 TypeScript 编译器：
tsc greeter.ts
编译后会生成一个 greeter.js 文件，其内容就是你刚才输入的 JavaScript。看，我们已经在 JavaScript 应用中成功运行起 TypeScript 了！
接下来，让我们体验一下 TypeScript 的新特性。例如，给函数参数 person 添加一个 : string 类型注解：
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);
类型注解
在 TypeScript 中，类型注解是一种轻量级的方式，用于记录函数或变量的预期类型。在这个例子中，我们希望 greeter 函数接收一个字符串参数，因此添加了类型注解。
现在，尝试将调用 greeter 的参数改为一个数组：
function greeter(person: string) {
return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.textContent = greeter(user);
重新编译，你会看到一个错误提示：
error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
同样，如果你不传入任何参数调用 greeter，TypeScript 也会提示参数数量不正确。在这两种情况下，TypeScript 都能够基于你的代码结构和类型注解进行静态分析。
需要注意的是，即使存在错误，greeter.js 文件仍然会被生成。这意味着你依然可以使用 TypeScript，但它会提前发出警告：这段代码在运行时可能不会按预期工作。
接口
让我们继续扩展这个例子。这次我们使用一个接口来描述包含 firstName 和 lastName 字段的对象。TypeScript 的核心原则之一是结构化类型系统：只要两个类型的内部结构兼容，它们就是兼容的。这意味着对象无需显式声明 implements，只要结构符合接口定义即可。
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.textContent = greeter(user);
在这个例子中，user 对象拥有 firstName 和 lastName 属性，因此它符合 Person 接口的结构要求，可以直接作为参数传递给 greeter 函数。
类
最后，我们再用类来扩展这个示例。TypeScript 完全支持像基于类的面向对象编程这样的现代 JavaScript 特性。
这里我们创建一个 Student 类，它包含一个构造函数和几个 public 字段。注意，在构造函数参数前使用 public 是一种简写，它会自动创建同名的类属性。这个例子也展示了类与接口如何协同工作，让你可以根据需要选择合适的抽象层级。
class Student {
fullName: string;
constructor(
public firstName: string,
public middleInitial: string,
public lastName: string
) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);
再次运行 tsc greeter.ts，生成的 JavaScript 代码与之前几乎一致。TypeScript 中的类，实质上是对 JavaScript 中原型继承的一种语法糖封装。
图1：TypeScript中类与接口的代码示例
运行你的 TypeScript Web 应用
现在，创建一个 greeter.html 文件并输入以下内容：
<!DOCTYPE html>
<html>
<head>
<title>TypeScript Greeter</title>
</head>
<body>
<script src="greeter.js"></script>
</body>
</html>
在浏览器中打开 greeter.html，你的第一个 TypeScript Web 应用就跑起来了！
可选操作：在 Visual Studio 中打开 greeter.ts，或者将代码复制到在线的 TypeScript Playground 中。你可以将鼠标悬停在标识符上查看它们的类型。重新输入代码时，编辑器会基于 DOM 元素的类型提供自动补全和参数提示。将光标放在对 greeter 函数的引用上并按 F12 可以跳转到定义。你也可以使用右键的重构功能来重命名符号。
这些类型信息与工具的结合，能显著提升在大型应用中使用 JavaScript 的效率。
核心思维解读
如果你已经接触过一些 TypeScript 文章，可能会觉得这篇指南“过于简单”。然而，它恰恰是一份精心设计的经典入门样本。其核心价值在于，它没有从“TypeScript 很强大、很高级”的角度切入，而是强调了一个关键定位：
TypeScript 的真正角色不是一门新语言，而是为 JavaScript 添加约束的工具链。
整个教程的设计节奏非常巧妙：
第一步：让你把 TypeScript 当 JavaScript 用
开头让你写一段没有任何类型标注的代码。这传达了一个重要理念：你不需要立刻理解所有类型系统也能开始使用 TypeScript。这极大地降低了初学者的心理门槛。
第二步：逐步引入类型
教程没有一上来就讲解复杂的类型系统，而是从一个最自然、最常见的场景切入：为函数参数添加 : string 注解。这种设计让你能立刻看懂、并马上体验到 TypeScript 的“即时错误反馈”价值，这是许多人坚持使用它的重要原因。
第三步：揭示“结构化类型”的本质
在讲解接口时，它只展示了最核心的一点：只要结构匹配，就是兼容的类型。这就是 TypeScript 结构化类型系统的灵魂。理解了这一点，你就能明白为什么一个普通的 JavaScript 对象可以直接当作接口使用，以及为什么许多 JS 库迁移到 TS 时改动很小。
第四步：展示类，但不强推OOP
最后的类示例非常克制，只展示了构造器和公共字段，避免引入继承、多态等复杂概念。这暗示着 TypeScript 并非为了让你写“更像 Java 的 JavaScript”，它只是忠实地支持 JavaScript 的现代语法（包括类），让你根据项目需要自由选择抽象方式。
“五分钟上手”真正想传递的思维方式是：
- TypeScript = JavaScript + 静态类型系统：它不是替代品，而是增强工具。
- 编译结果永远是 JavaScript：最终产物必须是浏览器或 Node.js 能够运行的代码。
- 类型系统服务于开发体验：其主要目的是在编写时捕获潜在 Bug、赋能 IDE 智能提示、提升大型项目的可维护性，而非让代码变得更复杂。
这篇教程本质上想让你体会到：你其实已经会写 TypeScript 了，只是还未开启它的全部能力。 从“能用”到“用好”的桥梁，正是对类型系统的逐步深入理解。希望这篇来自官方文档核心的解读，能帮助你更系统地迈出第一步。如果你想深入探索更多前端工程化与框架的最佳实践，欢迎在云栈社区与其他开发者交流。对于希望系统学习 TypeScript 的开发者来说，结合官方文档与实战是最高效的路径。
发表于 2025-12-30 05:18:59
|
查看: 24|
回复: 0
