Skip to content

基础类型

1. TS 类型地图(从顶层到底层)

在 TS 中,类型是有“父子关系”的。

  1. 顶层类型(Top Type):anyunknown
    • 它们是所有类型的“爸爸”,任何东西都可以赋值给它们。
    • 区别:any 是“放弃治疗”,随便怎么用都不报错;unknown 是“虽然我不知道它是啥,但在你确定它是啥之前,不准乱动”。
  2. 原始类型:string, number, boolean, symbol, bigint
  3. 特殊类型:nullundefined
  4. 底层类型(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>