TypeScript 学习教程（一篇覆盖全部核心知识点与常用技巧）

作者

这是一篇工程导向的 TypeScript 完整指南。 目标不是“按 API 文档顺序讲语法”，而是帮助你通过一篇文章建立完整的 TypeScript 知识体系， 做到：

  • 知道 TypeScript 有哪些能力
  • 知道每种能力解决什么问题
  • 知道在真实项目中该怎么用

如果你能完整理解并实践完这篇文章，已经可以自信地在任何前端/Node 项目中使用 TypeScript。

一、TypeScript 是什么？它解决什么问题？

TypeScript 是 JavaScript 的超集，在 JavaScript 之上引入了静态类型系统。


function sum(a, b) {
  return a + b;
}

sum(1, "2"); // "12"

问题在于：

  • 参数含义不清楚
  • 错误只能在运行时发现
  • 重构没有安全保障

function sum(a: number, b: number): number {
  return a + b;
}

TypeScript 的核心价值：

  • 把错误提前到开发阶段
  • 让代码结构变得可读、可推断
  • 让重构成为“安全操作”

二、TypeScript 如何运行？

TypeScript 并不会直接运行，它的工作流程是：


TypeScript → 编译（tsc）→ JavaScript → 运行

所有类型检查只发生在编译阶段，不会影响运行性能。

三、基础类型（必须熟练）

1. 原始类型


let flag: boolean = true;
let count: number = 10;
let title: string = "TypeScript";

2. 数组与元组


let nums: number[] = [1, 2, 3];
let user: [number, string] = [1, "Alice"];

3. any 与 unknown（非常重要）


let a: any = 1;
a.foo(); // 不报错，但极不安全


let b: unknown = "hello";
if (typeof b === "string") {
  b.toUpperCase();
}

结论：

  • any = 放弃类型系统
  • unknown = 强制你做安全检查

四、函数类型设计

1. 参数与返回值


function add(a: number, b: number): number {
  return a + b;
}

2. 可选参数与默认值


function greet(name: string, age?: number) {
  return age ? `${name}-${age}` : name;
}

3. void 与 never


function log(msg: string): void {
  console.log(msg);
}

function throwError(msg: string): never {
  throw new Error(msg);
}

五、接口（Interface）——TypeScript 的灵魂

1. 描述对象结构


interface User {
  id: number;
  name: string;
  email?: string;
}

2. 接口用于函数参数（强烈推荐）


function createUser(user: User) {
  return user;
}

思想转变：先定义数据结构，再写逻辑。

六、type、联合类型与交叉类型

1. 联合类型


type Status = "success" | "error" | "loading";

2. 交叉类型


type A = { a: string };
type B = { b: number };
type AB = A & B;

七、泛型（Generic）——抽象能力的核心

1. 泛型函数


function identity<T>(value: T): T {
  return value;
}

2. 泛型接口（真实项目高频）


interface ApiResponse<T> {
  code: number;
  data: T;
}

八、枚举（Enum）与常量建模


enum Role {
  Admin = "admin",
  User = "user"
}

工程建议：优先使用字符串枚举。

九、readonly、索引签名、类型断言

1. readonly


interface User {
  readonly id: number;
  name: string;
}

2. 索引签名


interface StringMap {
  [key: string]: string;
}

3. 类型断言


const el = document.getElementById("app") as HTMLDivElement;

十、Utility Types（必会技巧）


type PartialUser = Partial<User>;
type UserPreview = Pick<User, "id" | "name">;
type UserWithoutId = Omit<User, "id">;
type UserMap = Record<string, User>;

这些工具类型在表单、接口更新、接口返回值中极其常见。

十一、TypeScript 工程配置（tsconfig）


{
  "compilerOptions": {
    "strict": true,
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

铁律：永远开启 strict。

十二、TypeScript + React 核心用法


interface Props {
  title: string;
}

function Header({ title }: Props) {
  return <h1>{title}</h1>;
}


const [count, setCount] = useState(0);

十三、最常见误区（比语法更重要）

  • 大量使用 any
  • 为了省事关闭 strict
  • 类型不复用，全部内联
  • 为“写 TS”而写 TS

结语：如何真正学会 TypeScript？

真正掌握 TypeScript 的标志不是“语法都会”，而是：

  • 先设计类型，再写代码
  • 相信编译器，而不是直觉
  • 敢于重构，并且不害怕

当你开始依赖类型系统，而不是躲避它，你就已经入门了。

发表评论