一、TypeScript 是什么？

项目	说明
本质	JavaScript 的 超集
作用	给 JS 增加 类型系统
运行时	❌ 不能直接运行，需要编译成 JS
编译器	tsc
核心价值	类型安全 + IDE 智能提示 + 可维护性

一句话：

TS = 带类型的 JavaScript

二、基础类型（最重要）

1️⃣ 原始类型

let count: number = 1
let name: string = 'Tom'
let isDone: boolean = true

⚠️ 不要滥用 any

let value: any = 123 // 等于放弃 TS

2️⃣ 数组

let list: number[] = [1, 2, 3]
let list2: Array<string> = ['a', 'b']

3️⃣ 元组（Tuple）

let user: [string, number] = ['Tom', 18]

常用于：

• useState
• 返回固定结构的数据

4️⃣ 枚举（Enum）

enum Status {
  Pending,
  Success,
  Error
}

let s: Status = Status.Success

📌 实战中 更推荐联合类型替代 enum（后面讲）

三、对象类型 & interface（高频）

1️⃣ 普通对象类型

const user: {
  name: string
  age: number
} = {
  name: 'Tom',
  age: 18
}

2️⃣ interface（重点）

interface User {
  name: string
  age: number
  avatar?: string   // 可选
  readonly id: number
}

const u: User = {
  id: 1,
  name: 'Tom',
  age: 18
}

✅ Vue props ✅ React props ✅ 接口返回值 都靠 interface

3️⃣ interface vs type（先记结论）

对比	interface	type
对象	✅ 强	✅
联合	❌	✅
扩展	extends	&
React / Vue	常用	常用

四、函数类型（前端必会）

1️⃣ 参数 & 返回值

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

2️⃣ 可选参数 & 默认值

function greet(name: string, age?: number) {}
function greet2(name: string, age = 18) {}

3️⃣ 函数类型声明

type Fn = (a: number, b: number) => number

const add: Fn = (a, b) => a + b

五、联合类型 & 字面量类型（非常重要）

1️⃣ 联合类型

let id: number | string

2️⃣ 字面量联合（代替 enum）

type Status = 'pending' | 'success' | 'error'

function setStatus(s: Status) {}

📌 React / Vue 状态、props 强烈推荐

六、类型推断 & 类型断言

1️⃣ 类型推断（TS 的灵魂）

let num = 1 // 自动推断为 number

❗能不写就不写类型

2️⃣ 类型断言（as）

const img = document.querySelector('img') as HTMLImageElement

⚠️ 断言 ≠ 转换 只是告诉 TS「我比你清楚」

七、泛型（进阶但常用）

1️⃣ 泛型函数

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

2️⃣ 泛型接口（接口返回值）

interface ApiResult<T> {
  code: number
  data: T
}

type User = { name: string }

const res: ApiResult<User> = {
  code: 0,
  data: { name: 'Tom' }
}

📌 Axios、Vue Query、React Query 核心用法

八、常见内置工具类型（必须认识）

工具类型	作用
Partial<T>	变可选
Required<T>	变必选
Pick<T, K>	取部分字段
Omit<T, K>	排除字段
Record<K, T>	key-value 对象

type User = {
  id: number
  name: string
  age: number
}

type UserBase = Pick<User, 'id' | 'name'>

九、TS 在前端中的真实应用

场景	用法
Vue props	defineProps<T>()
React props	interface Props {}
状态管理	联合类型
表单	Partial<T>
接口数据	泛型

十、学习路线（给你一个清晰方向）

阶段 1（必会）

• 基础类型
• interface / type
• 函数类型
• 联合类型

阶段 2（前端实战）

• 泛型
• 工具类型
• DOM 类型
• Props / Emits

阶段 3（高手）

• 条件类型
• 映射类型
• infer
• TS + React / Vue 源码