基础类型
1. TS 类型地图(从顶层到底层)
在 TS 中,类型是有“父子关系”的。
- 顶层类型(Top Type):
any和unknown- 它们是所有类型的“爸爸”,任何东西都可以赋值给它们。
- 区别:
any是“放弃治疗”,随便怎么用都不报错;unknown是“虽然我不知道它是啥,但在你确定它是啥之前,不准乱动”。
- 原始类型:
string,number,boolean,symbol,bigint。 - 特殊类型:
null和undefined。 - 底层类型(Bottom Type):
never- 它是所有类型的“儿子”。它表示永远不会发生的值(比如一个一定会抛出异常的函数返回值)。
2. 核心类型分类
为了让你在架构设计中得心应手,我把 TS 类型归纳为以下四大类:
A. 基础类型
除了 JS 原有的,TS 增加了几个非常有用的:
- Enum(枚举): 给一组数字或字符串起个好记的名字。
- Tuple(元组): 明确知道数组包含多少个元素,以及每个位置的类型。例如
[number, string]。
B. 对象与结构
- Interface(接口): 最常用的,描述对象的形状。
- Type Alias(类型别名): 给类型起外号。它比 Interface 更灵活,可以定义联合类型。
C. 逻辑组合类型(重点)
这就是你觉得“绕”的开始,但也是 TS 最强大的地方:
- 联合类型 (
|): “或者”。例如string | number。 - 交叉类型 (
&): “并且”。将多个类型合并为一个。 - 字面量类型: 不只是
string,我可以规定这个变量只能是"success"。
D. 动态与函数类型
- Void: 函数没有返回值。
- Generic(泛型): 类型的“参数化”。像函数传参一样传类型。
3. 架构师眼中的“高级武器”
当你进阶到中高级开发时,这三个概念会经常出现:
1. 类型断言 (Type Assertion)
当你比编译器更清楚变量的类型时,使用 as。
坑: 不要乱用
as any,那是把护身符扔掉。
2. 类型守卫 (Type Guards)
通过 if (typeof x === 'string') 这样的逻辑,TS 能聪明地推断出在那个代码块里 x 一定是字符串。
3. 索引签名
当你不知道对象里具体有多少个 Key,但知道 Key 和 Value 的类型时:
TypeScript
interface Dictionary {
[key: string]: number;
}4. 怎么学最有效?(避坑总结)
- 不要被
any诱惑: 写any爽一时,重构哭一年。 - 利用“类型推导”: TS 很聪明,如果代码里已经写了
const x = 1,你就不需要再写const x: number = 1。代码越简洁越好。 - 多看报错信息: TS 的报错虽然长,但通常最后一行会告诉你真正的矛盾点在哪。
5. 总结表:该选哪个?
| 场景 | 推荐方案 |
|---|---|
| 定义一个普通的对象 | interface |
| 定义一组固定的常量值 | enum或联合字面量(推荐) |
| 处理不确定的 API 返回值 | unknown+ 类型断言 |
| 编写通用的组件/工具函数 | 泛型<T> |