TypeScript 简介

在动手装环境之前，我们先认识一下 TypeScript 到底是什么、为什么值得学、它和 JavaScript 是什么关系。理解了背景，后面学类型语法时会更有的放矢。本篇假设你已经熟悉 JavaScript 基本语法。

TypeScript 是什么？

TypeScript（简称 TS）是微软在 2012 年开源的一门编程语言，由 C# 之父 Anders Hejlsberg 主导设计。一句话定义：它是 JavaScript 的超集，在 JS 之上加了一层静态类型系统。"超集"的意思是——所有合法的 JS 代码几乎都是合法的 TS 代码，TS 只是额外允许你写类型标注。

// hello.ts —— 一眼看上去和 JS 几乎一样,只是多了 ": string"
function greet(name: string): string {
  return `你好, ${name}!`;
}

console.log(greet("TypeScript"));
// 输出: 你好, TypeScript!

注意 name: string 和函数名后面的 : string——这就是 TS 比 JS 多出来的全部"外观特征"：给变量、参数、返回值标上类型。

核心特点：它是 JavaScript 的超集

"超集"是理解 TS 的关键。下面这段代码完全是 JS，但它也是合法的 TS：

// 下面这段是完全合法的 JavaScript,也是完全合法的 TypeScript
const title = "TypeScript";
const year = 2012;
console.log(`${title} 诞生于 ${year} 年`);

// TS 只是在此基础上,允许你"可选地"加上类型标注
const openSource: boolean = true;   // : boolean 就是 TS 加的部分

这意味着迁移成本极低：你可以把一个 .js 文件直接改名成 .ts，它通常立刻就能通过编译。然后你逐步地给关键变量补上类型，这种"渐进式类型化"的体验是 TS 能迅速普及的重要原因。

TS 不能直接运行，需要编译

浏览器和 Node.js 都不认识 .ts 文件，它们只懂 JS。所以 TS 代码必须先用官方的 tsc（TypeScript Compiler）编译成 JS：

# 1. 把上面的代码保存为 hello.ts
# 2. 用 tsc 编译成 JS(tsc 会去掉所有类型标注)
tsc hello.ts
# 生成 hello.js,内容是纯 JS,任何浏览器/Node 都能跑

# 3. 运行编译后的 JS
node hello.js
# 输出: 你好, TypeScript!

关键点：编译的过程会擦除所有类型信息。打开生成的 hello.js，你会发现 : string 全都不见了，剩下的就是普通 JS。也就是说，类型只在开发阶段保驾护航，运行时零成本——这就是为什么大型项目敢于全量上 TS。

为什么值得学 TS？

写过 JS 的人多半踩过这些坑，TS 正是来治这些病的：

• 运行时才报错 → 编译期就报错：传错参数类型，JS 要等跑起来才崩；TS 在你敲代码的瞬间就红线提示。
• 重构像拆弹 → 重构像散步：改一个对象字段名，JS 里几十个文件用到的地方只能全局搜索；TS 会精确告诉你每一处调用点，改完就放心。
• 记不住 API → 编辑器智能补全：类型信息让 VS Code 能精确提示对象有哪些字段、函数接受什么参数，几乎不用查文档。
• 团队协作靠注释 → 类型即文档：一个好的 interface，本身就是最清晰的接口契约，看签名就知道函数怎么用。

TS 都用在哪？

今天 TS 已经是前端工程的事实标准：

• 框架：Angular 默认 TS；React 官方推荐 TS（create-react-app、Next.js 都支持）；Vue 3 的源码本身就用 TS 写的。
• 后端：Node.js + NestJS、Express + TS 是当下后端的主流组合。
• 开源库：VS Code、Denorun、Vite、Vue、Pinia 等主流项目都用 TS 编写。
• 全栈框架：Next.js、Nuxt、Remix、SvelteKit 都深度集成 TS。

简单说：想做中大型前端工程、想进正规团队，TS 几乎是必修课。

TS vs JavaScript

• 关系：TS 是 JS 的超集，JS 是 TS 的子集。学 TS 不等于学新语言，只是给 JS 加类型。
• 类型检查：JS 是动态类型（运行时才知道类型），TS 是静态类型（写代码时就检查）。
• 运行：JS 直接跑；TS 需要先编译成 JS（但工具链会自动处理，开发时几乎无感）。
• 学习曲线：会 JS 之后再学 TS，三五天就能上手日常用法；精通高级类型需要更久。

本系列怎么学？

本系列默认你已经懂 JavaScript（变量、函数、对象、数组、Promise 等），不会重复讲这些。我们只把焦点放在"TS 给 JS 加了什么"——类型注解、接口、泛型、工具类型、配置。每篇都配有可运行的 .ts 示例，建议边读边敲。

← 返回 TypeScript 教程目录

下一篇 TypeScript 环境安装 →