TypeScript 是什么

这一课你将能做到

1. 说清楚 TypeScript 和 JavaScript 的关系（超集、编译、类型擦除）
2. 独立完成 TypeScript 的安装、初始化 tsconfig.json、编译运行一个 .ts 文件
3. 写出带类型注解的变量、函数，并解释编译期报错与运行时报错的区别

为什么要学

JavaScript 是动态类型语言：变量是什么类型，跑起来才知道。灵活是灵活，但项目一大就出事故——接口返回的字段名写错了、把 null 当对象调方法、把字符串当数字做加法，这些错误统统要等到运行时、甚至是用户点了某个按钮之后才炸出来。

TypeScript 就是给 JavaScript 加一套「类型系统」。人话：你在写代码的时候就声明「这个变量是字符串」「这个函数必须收数字返回布尔」，编辑器当场标红，编译器当场报错，错误从运行时被提前到了编写时。

现实层面的理由更直接：

• 主流前端框架（React / Vue / Next.js）的新项目默认就是 TypeScript
• 大厂前端招聘 JD 里 TypeScript 几乎是必选项
• 面试时「会不会 TS」已经从加分项变成基础项

一句话：不会 TypeScript，现代前端项目你连代码都读不顺。

先建立图像

TypeScript 的整条工作流：

你写的 hello.ts（带类型注解）
        │
        ▼
  tsc 编译器检查类型 ──类型有错──▶ 编译失败，报错给你看
        │ 类型没错
        ▼
  擦掉所有类型注解，生成 hello.js（纯 JavaScript）
        │
        ▼
  浏览器 / Node.js 执行（运行时完全看不到类型的影子）

三个关键词先记住：

术语	人话解释
超集（Superset）	所有合法 JS 都是合法 TS，TS = JS + 类型
静态类型	写代码时（而非运行时）就确定并检查类型
类型擦除	编译后类型注解全部被删掉，运行时零开销

跟着做

步骤 1：安装 TypeScript

确保已装 Node.js（node -v 能输出版本号即可），然后全局安装编译器：

npm install -g typescript

验证安装：

tsc --version
# 输出类似：Version 5.5.3

步骤 2：写第一个 TS 文件

新建文件夹 ts-demo，在里面创建 hello.ts：

// hello.ts
function greet(name: string): string {
  return `你好，${name}！`;
}

const message: string = greet("TypeScript");
console.log(message);

注意 : string 就是类型注解——声明参数 name 必须是字符串，返回值也是字符串。

步骤 3：编译并运行

tsc hello.ts
node hello.js

输出：

你好，TypeScript！

打开生成的 hello.js，你会发现类型注解全被擦掉了：