TypeScript 基础详解（2026 年小白友好版）
TypeScript（简称 TS）是 JavaScript 的超集，由 Microsoft 开发并开源（最新稳定版 5.3+，2026 年已到 5.4+）。它在 JS 基础上添加了静态类型系统，让代码更安全、更易维护、更适合大规模项目。
一句话核心价值：
TS = JS + 类型检查（编译时就发现错误，而不是运行时崩溃）。
为什么学 TS（2026 年趋势）：
- 前端框架（如 React、Vue、Angular）几乎全用 TS。
- 后端 Node.js 项目（如 Express/NestJS）也标配 TS。
- 错误早发现、IDE 智能提示强（VS Code 天生支持）。
- 兼容所有 JS 代码（TS 编译后就是纯 JS）。
如果你是 JS 基础选手，TS 入门只需 1–2 天；零基础先补 JS。
1. 环境准备（5 分钟上手）
- 安装 Node.js（TS 依赖它）：
官网 nodejs.org 下载 LTS 版（2026 年 ≥ 20.x）。安装后验证：
node -v # ≥ 20.0.0
npm -v # ≥ 10.0.0- 全局安装 TypeScript：
npm install -g typescript
tsc -v # 验证版本 ≥ 5.3.3- 编辑器：VS Code（内置 TS 支持）+ 插件：TypeScript Extension Pack。
新建hello.ts文件，VS Code 自动高亮/提示。 - 编译运行：
tsc hello.ts # 编译成 hello.js
node hello.js # 运行自动监听（开发推荐）：
npm install -g ts-node ts-node-dev
ts-node-dev --respawn hello.ts # 保存自动重载2. 基本语法（从 JS 到 TS 的升级）
TS 代码以 .ts 结尾，所有 JS 代码在 TS 中直接有效。
2.1 变量声明与基本类型
| 类型 | 语法示例 | 说明 | 常见场景 |
|---|---|---|---|
| 布尔 | let isDone: boolean = false; | true/false | 条件判断 |
| 数字 | let count: number = 42; | 整数/浮点/NaN/Infinity | 计算 |
| 字符串 | let name: string = "Alice"; | 支持模板字符串 ${expr} | 文本处理 |
| 数组 | let list: number[] = [1, 2, 3];let list: Array<string> = ["a", "b"]; | 两种写法等价 | 列表数据 |
| 元组 | let tuple: [string, number] = ["age", 28]; | 固定长度/类型 | 多值返回 |
| 枚举 | enum Color {Red = 1, Green, Blue};let c: Color = Color.Green; | 常量集合 | 状态码/选项 |
| Any | let notSure: any = 4; notSure = "maybe"; | 任意类型（禁用类型检查） | 迁移旧 JS / 未知数据 |
| Void | function warn(): void { console.log("!"); } | 无返回值 | 无返回函数 |
| Null/Undefined | let u: undefined = undefined; | 常用于可选参数 | 空值处理 |
| Never | function error(msg: string): never { throw new Error(msg); } | 永不返回（抛错/死循环） | 错误处理 |
代码示例（类型推断 + 显式类型）：
// 类型推断（推荐，TS 自动猜）
let age = 28; // TS 知道是 number
age = "twenty-eight"; // 编译报错！
// 显式类型（复杂时用）
let score: number | string = 95; // union 类型（或）
score = "A+"; // OK2.2 函数
- 基本定义：
function add(x: number, y: number): number {
return x + y;
}
// 箭头函数
const multiply = (x: number, y: number): number => x * y;- 可选/默认参数：
function greet(name: string, greeting?: string): string { // ? = 可选
return `${greeting || "Hello"}, ${name}`;
}
greet("Bob"); // Hello, Bob- 函数重载（overload）：
function pickCard(x: number): { suit: string; card: number };
function pickCard(x: string): number;
function pickCard(x: any): any { /* 实现 */ }2.3 接口（Interface） —— 定义对象形状
interface User {
name: string;
age: number;
email?: string; // 可选
readonly id: number; // 只读
}
let user: User = { name: "Alice", age: 28, id: 1 };
user.age = 29; // OK
user.id = 2; // 报错！readonly- 函数类型：
interface SearchFunc {
(source: string, subString: string): boolean;
}
let mySearch: SearchFunc = function(src, sub) { return src.includes(sub); };- 扩展接口：
interface Admin extends User {
role: string;
}2.4 类（Class） —— 面向对象基础
class Animal {
private name: string; // 私有（外部不可访问）
constructor(theName: string) { this.name = theName; }
move(distance: number = 0) { // 默认参数
console.log(`${this.name} moved ${distance}m.`);
}
}
class Dog extends Animal {
bark() { console.log("Woof!"); }
}
const dog = new Dog("Buddy");
dog.move(10); // Buddy moved 10m.
dog.bark(); // Woof!- 访问修饰符：public（默认）、private、protected。
- 抽象类：
abstract class Base { abstract method(); }
2.5 泛型（Generics） —— 复用类型
function identity<T>(arg: T): T { // T 是类型变量
return arg;
}
identity<string>("hello"); // 指定 T 为 string
identity(42); // 推断为 number- 泛型接口/类：
interface GenericIdentityFn<T> {
(arg: T): T;
}3. 高级基础（快速上手）
- 模块与命名空间：
// math.ts
export function add(x: number, y: number) { return x + y; }
// main.ts
import { add } from "./math";
console.log(add(1, 2));- 类型断言（as）：
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length; // 告诉 TS “我确定是 string”- 类型守卫：
function isString(x: any): x is string { // 类型谓词
return typeof x === "string";
}- 装饰器（高级，但 React 等常用）：
需要 tsconfig.json 中开启"experimentalDecorators": true。
function sealed(constructor: Function) { /* ... */ }
@sealed
class Greeter { /* ... */ }4. 配置 tsconfig.json（项目必备）
新建项目时运行 tsc --init，然后修改：
{
"compilerOptions": {
"target": "ES2022", // 输出 JS 版本
"module": "ESNext", // 模块系统
"strict": true, // 严格模式（推荐）
"outDir": "./dist", // 输出目录
"rootDir": "./src" // 源目录
}
}编译整个项目：tsc（无参数，自动用 tsconfig）。
5. 常见面试/进阶问题
| 问题 | 答案要点 |
|---|---|
| TS vs JS 最大区别？ | 静态类型 vs 动态类型；TS 编译时检查，JS 运行时。 |
| any 和 unknown 的区别？ | any 禁用类型检查；unknown 必须先检查/断言才能用（更安全）。 |
| interface vs type？ | interface 可扩展/合并；type 支持联合/交叉/条件类型（更灵活）。 |
| TS 如何处理 null/undefined？ | “strictNullChecks”: true 时，必须显式处理（? 或 !）。 |
| 泛型约束？ | <T extends number>（T 必须是 number 子类型）。 |
6. 总结口诀 & 练习建议
- 口诀：变量加类型，函数标返回，接口定形状，泛型复用强。
- 练习：
- 用 TS 重写一个 JS 函数，加类型/接口。
- 建一个简单项目：类 + 继承 + 泛型数组排序。
- 读官网 10 分钟教程：typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html
TS 让代码从“随意”变“严谨”，上手后你会爱上它的提示和安全感～
有哪部分想再深入？如 React + TS、泛型高级、tsconfig 调优 等？告诉我，我继续展开！
