1、TypeScript 入门：TypeScript 发展史、核心优势、开发环境搭建（Node.js + VSCode + tsc）

1.1 为什么要有 TypeScript？

先聊聊背景。JavaScript 本身是门好语言，但有个硬伤——它是动态类型。说白了，变量到底是个数字还是个对象，只有运行起来才知道。我刚开始写前端那会儿，经常遇到「undefined is not a function」这种报错，查半天发现是传参类型不对。嗯，这种体验，写过 JS 的都懂。

TypeScript 的出现，就是为了解决这个问题。它给 JavaScript 加了一套类型系统，让你在写代码的时候就能发现错误，而不是等到浏览器里跑起来才崩溃。

1.2 TypeScript 发展史：从诞生到主流

TypeScript 是微软在 2012 年发布的。我记得当时很多人不看好，觉得「又多了一个要学的语言」。但事实证明，它活下来了，而且活得很好。

时间	版本	关键变化
2012年10月	0.8	首次公开，支持基本类型和类
2014年4月	1.0	正式发布，加入泛型支持
2016年	2.0	引入非空类型、控制流分析
2020年	4.0	可变元组、模板字面量类型
2023年	5.0	装饰器标准化、性能大幅提升

你想想看，一个语言能活十多年还在持续更新，说明它确实解决了真问题。现在 Angular、Vue 3、React 都在用 TS，连 Node.js 生态也开始全面拥抱它。

1.3 TypeScript 的核心优势

说了这么多，TypeScript 到底好在哪？我总结了几点，都是我在项目中真实感受到的。

• 静态类型检查：写代码时就能发现类型错误，不用等到运行。比如你给一个函数传了字符串，但它要的是数字，编辑器直接给你标红。
• 更好的 IDE 支持：VSCode 里写 TS，自动补全、跳转定义、重构，体验比纯 JS 好太多。我个人习惯是，没有类型提示的代码我都不想看。
• 代码可读性高：类型本身就是文档。你看一个函数签名，就知道它要什么参数、返回什么值，不用翻实现。
• 重构更安全：改一个接口，所有用到的地方都会报错。我曾经在纯 JS 项目里改了个函数名，结果漏了三个调用处，线上出了 bug。用 TS 之后，这种事再没发生过。
• 渐进式采用：你可以把 .js 改成 .ts，然后一点点加类型。不用一次性全改完，这对老项目很友好。

1.4 开发环境搭建：Node.js + VSCode + tsc

好，理论说完了，咱们动手搭环境。这一步很简单，跟着做就行。

1.4.1 安装 Node.js

TypeScript 编译器（tsc）是跑在 Node.js 上的，所以先装 Node。去官网下载 LTS 版本就行，我建议用 18 或 20 版本。

装完后打开终端，验证一下：

node -v
# 输出类似 v18.17.0

npm -v
# 输出类似 9.6.7

如果能看到版本号，说明 Node 装好了。

1.4.2 安装 VSCode

编辑器我推荐 VSCode，它本身就是微软出的，对 TypeScript 支持最好。装好后，建议安装这几个扩展：

• ESLint：代码规范检查
• Prettier：代码格式化
• GitLens：Git 历史查看（可选）

VSCode 内置了对 TS 的支持，你打开 .ts 文件就能看到类型提示和错误检查，不需要额外配置。

1.4.3 安装 TypeScript 编译器

有两种方式安装 tsc：全局安装或项目内安装。我个人习惯全局装一份，项目内再装一份。

全局安装：

npm install -g typescript

装完后验证：

tsc -v
# 输出类似 Version 5.3.3

项目内安装：

mkdir my-ts-project
cd my-ts-project
npm init -y
npm install --save-dev typescript

1.4.4 创建第一个 TypeScript 文件

在项目根目录下创建一个 hello.ts 文件：

function greet(name: string): string {
  return `Hello, ${name}!`;
}

const message = greet('TypeScript');
console.log(message);

然后编译它：

npx tsc hello.ts

你会看到同目录下生成了一个 hello.js 文件。打开看看：

function greet(name) {
  return "Hello, " + name + "!";
}

var message = greet('TypeScript');
console.log(message);

看到了吗？类型注解被去掉了，变成了纯 JS。这就是 TypeScript 的编译过程——它只做类型检查，不改变你的运行时行为。

1.4.5 配置 tsconfig.json

每次编译都指定文件太麻烦了。我们创建一个配置文件：

npx tsc --init

这会生成一个 tsconfig.json。我常用的配置是这样的：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

解释一下关键字段：

• target：编译成哪个版本的 JS。ES2020 比较新，兼容性也够用。
• module：模块系统。Node.js 用 commonjs，前端项目用 esnext。
• outDir：编译后的 JS 输出目录。
• rootDir：源码目录。我习惯把 .ts 文件放在 src 文件夹里。
• strict：开启严格模式。我建议所有项目都开，它能帮你发现很多潜在问题。

配置好后，把 hello.ts 移到 src/ 目录下，然后运行：

npx tsc

编译后的文件会输出到 dist/ 目录。干净又整洁。

1.5 避坑指南：新手常见问题

最后分享几个我踩过的坑，希望能帮你少走弯路。

• 类型定义文件找不到：安装第三方库时，记得装对应的 @types/xxx。比如 npm install lodash 之后，还要 npm install @types/lodash --save-dev。
• tsc 命令找不到：如果你用的是项目内安装，记得加 npx 前缀，或者配置 npm scripts。
• 编译后路径不对：检查 tsconfig.json 里的 rootDir 和 outDir 是否匹配。我曾经把 rootDir 设成 ./，结果编译出来的目录结构乱七八糟。
• 严格模式报错太多：可以先关掉 strict，但我不建议这么做。更好的做法是逐个打开 strict 下的子选项，比如 noImplicitAny、strictNullChecks，慢慢适应。

好了，环境搭好了，第一个 TS 文件也跑起来了。下一章我们正式进入类型系统，聊聊基础类型和类型推断。到时候你会发现，类型其实没那么可怕。