项目中 TypeScript 类型推导 极简实战总结

项目中 TypeScript 类型推导 极简实战总结

（前端 90% 场景都能用，一看就会、一用就对）

我用最通俗、最实用 的方式讲：什么是类型推导 + 什么时候用 + 怎么用 + 不用会怎样。

---

一、什么是 TS 类型推导？

TS 自动猜出变量/函数/返回值的类型，不用你手动写。

你不写类型，TS 也知道它是什么类型。

let name = "张三" // TS 自动推导出：string
let age = 18      // 自动推导出：number

---

二、类型推导的 5 种最常用场景（前端项目必用）

1. 变量自动推导（最基础）

const a = 123        // 推导：number
const b = true       // 推导：boolean
const c = [1,2,3]    // 推导：number[]

好处：不用写冗余类型，代码更干净。

---

2. 函数返回值自动推导（超级常用）

function add(a: number, b: number) {
  return a + b
}
// TS 自动推导出返回值是 number
// 你不用写：function add(a:number,b:number): number

什么时候必须手动写返回类型？

API 请求、复杂函数、为了可读性时写。

---

3. 对象自动推导（配合 interface）

const emp = {
  id: 1,
  name: "小明"
}
// TS 自动推导出 { id: number; name: string }

如果你定义了接口，TS 会严格推导：

interface Employee { id: number; name: string }

const emp: Employee = { id:1, name:"xx" }
// 推导 + 约束 一起生效

---

4. 数组自动推导

const list = [1,2,3] // 推导：number[]
list.push(4)         // 正确
list.push("5")       // 报错

---

5. 异步请求 / API 自动推导（最重要）

你封装的 API：

getAll: () => api.get('/employees')

如果你写：

getAll: (): Promise<Employee[]> => api.get('/employees')

那么调用时：

const list = await employeeApi.getAll()
// TS 自动推导出 list 是 Employee[]

不用你再 (list as Employee\[\]) 强行转换！

---

三、什么时候必须手动写类型（不能靠推导）

1. 空数组

const list: Employee[] = []

不写会变成 any[]，失去类型检查。

2. 函数参数

function fn(a: number) {}

参数不会自动推导，必须手动写。

3. 接口返回值（API）

getAll: (): Promise<Employee[]> => ...

为了安全 + 提示，必须写。

4. 组件 Props / 表单

const ruleForm: EmployeeForm = { ... }

---

四、一句话记住：

TS 能自动推出来的 → 不写

自动推不出来 / 不安全的 → 必须写

---

五、前端项目最佳实践（背会）

1. 变量不写类型（自动推导）
2. 函数参数必须写类型
3. 函数返回值能推导就不写
4. API 返回值必须写类型
5. 对象、表单、接口必须用 interface 约束
6. 空数组必须写类型
7. 类型导入用 import type

---

六、最精简总结（你只需要记这句）

TypeScript 类型推导 = TS 自动猜类型

能推导就不写，不能推导才手写

API、表单、对象必须手动约束类型

---