整个TypeScript官方文档分为这么一些模块：
快速开始
手册
参考文档
模块参考
教程
更新内容
声明文件
JavaScript
项目
原文链接：https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html
文档位置：快速开始
翻译：谢杰
审校：谢杰
让我们从构建一个简单的 TypeScript Web 应用开始。
安装TypeScript
将TypeScript添加到项目中主要有两种方式：
Visual Studio 2017 和 Visual Studio 2015 Update3 默认包含 TypeScript 的语言支持，但不包含 TypeScript 编译器 tsc。如果你没有在安装 Visual Studio 时一并安装 TypeScript，仍然可以单独下载。
对于使用 npm 的用户：
npm install -g typescript
创建你的第一个TypeScript文件
打开你的编辑器，在greeter.ts文件中写下如下的JS代码：
function greeter(person) { return "Hello, " + person;}
let user = "Jane User";
document.body.textContent = greeter(user);
编译你的代码
我们使用了 .ts 扩展名，但这段代码其实就是普通的 JavaScript。你甚至可以直接从现有的 JavaScript 应用中复制粘贴这段代码过来。
在命令行中运行 TypeScript 编译器：
编译结果会生成一个名为 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);
你会看到如下报错：
Argument of type 'number[]' is not assignable to parameter of type 'string'.
试着重新编译，你现在会看到一个错误提示：
error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
类似地，如果你尝试调用 greeter 时不传入任何参数，TypeScript 也会提示你调用函数时传入的参数数量不正确。
在这两种情况下，TypeScript 都能够基于你的代码结构以及你提供的类型注解进行静态分析。
需要注意的是，尽管存在错误，greeter.js 文件仍然会被生成。也就是说，即使代码中有错误，你仍然可以使用 TypeScript。不过在这种情况下，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 函数。
类
最后，我们再通过类（class）对示例进行一次扩展。TypeScript 支持 JavaScript 中的现代特性，比如基于类的面向对象编程。
下面我们创建一个 Student 类，它包含一个构造函数和几个 public 字段。可以看到，类和接口可以很好地协同使用，让开发者根据需要选择合适的抽象层级。
另外需要注意的是，构造函数中参数前使用 public 关键字是一种简写形式，TypeScript 会自动为这些参数创建同名的属性。
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);
试着重新运行：
你会看到生成的 JavaScript 与之前的代码几乎一致。TypeScript 中的类，其实只是对 JavaScript 中基于原型的面向对象编程的一种语法糖封装。
运行你的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 能力示例，请参见官网的 Samples 部分。
译者解读：
如果你已经看过不少TypeScript相关文章，那么这篇官方文档一开始可能会让你觉得“太简单了”。
但事实恰恰相反：它是一篇极度经典的TypeScript入门设计样本。这篇文档的核心价值在于，它没有从“TypeScript 很强、很高级”这种叙事切入，而是强调一件关键的事：
「TypeScript 的真正定位不是一门新的语言，而是给JavaScript加约束的工具链」
在整个文章中，你会看到几个刻意设计的节奏：
第一步：让你把TypeScript当JavaScript用
文章开头故意让你写一段没有任何类型的代码。因为TypeScript最重要的理念之一是：
「你不需要立刻理解所有类型系统，也能开始写 TS」
这能大幅降低学习成本，让入门者不会因为“噢天啊我要学一堆新语法”而退缩。
第二步：再慢慢加一点点类型
文章并没有一上来讲什么类型推断、联合类型、可选属性……而是从一个最常见、最自然的场景切入：给函数参数加一个 : string。
这种设计目的很明确：
让你马上体验到TypeScript的“即时反馈”价值，这也是让无数人坚持使用TypeScript的最大理由。
第三步：让你意识到 TS 是「结构化类型系统」
文章接着讲接口，但注意它并没有讲复杂的“接口继承”、“泛型接口”、“索引签名”等内容。它只展示最核心的一点：
「只要结构一样，就能当成同一种类型使用」
这就是TypeScript的灵魂：结构化类型。理解了这一点，就能明白为何：
TypeScript 和 Java/C# 那种“名义类型”完全不同
为什么一个 { firstName, lastName } 的普通对象就能当作 Person 接口
为什么很多JavaScript库迁移到TypeScript时几乎不用改动
这也间接说明：TypeScript并没有“强推 OOP 思维”，它依然是 JS 的那套结构化哲学。
第四步：展示 class，但不推行 class
最后的 class 示例非常“克制”：
只写构造器
只写几个属性
故意不出现继承、多态等“重量级 OOP 概念”
这是因为TypeScript官方始终在强调：TypeScript不是为了让你写“更像 Java 的 JS”。它只是忠实支持JavaScript的新语法。官方文档的示例避免推崇 OOP，而是告诉你：不论是 interface 还是 class，你都可以用，使得TypeScript更像你需要的那种语言。
“五分钟上手”真正想传达的，是 TS 的思维方式
TypeScript = JavaScript + 静态类型系统：不是 “JavaScript替代品”，不是“另起炉灶的新语言”。
编译结果永远是 JS：你写的不管多fancy，最后都要编译成浏览器或 Node 能跑的 JS。
类型系统是给开发体验服务的：不是为了把语言“写得更复杂”，而是为了：
捕获 bug
让 IDE 更聪明
写大型项目更稳定
增强代码表达能力
这篇五分钟教程本质上就是想让你慢慢体会到：
TypeScript并不会改变你写JavaScript的方式，只会让你写得更放心。
你其实已经会写TypeScript 了，只是还没打开它的全部能力而已。
从“能用”到“好用”，中间差的就是你是否愿意一步步理解TypeScript的类型系统。
阅读原文：原文链接
该文章在 2026/1/4 10:44:12 编辑过
400 186 1886
