TypeScript 类型系统: 从基础到体操

1
// 原始类型 - 最基础的积木块
2
const str: string = 'hello'
3
const num: number = 42
4
const bool: boolean = true
5
const sym: symbol = Symbol('foo')
6
const big: bigint = 100n
7

8
// 特殊类型 - 几个"怪咖"
9
const nullValue: null = null
10
const undef: undefined = undefined
11
const voidFunc: () => void = () => {}
12

13
// 数组和元组 - 一组数据的容器
14
const arr: string[] = ['a', 'b']  // 数组：全是字符串
15
const tuple: [string, number] = ['hello', 42]  // 元组：固定位置、固定类型
16

17
// 联合类型 - "要么这个，要么那个"
18
const mixed: (string | number)[] = [123, 'str']
19

20
// 对象类型 - 描述事物的形状
21

22
// 用 interface 描述
23
interface User {
24
  name: string
25
  age: number
26
}
27

28
// 或用 type 别名
29
type User2 = {
30
  name: string
31
  age: number
32
}
33

34
// 加点修饰符：只读、可选
35
interface AdvancedUser {
36
  readonly id: number  // 只读：一旦定了就不能改
37
  name: string
38
  age?: number  // 可选：有也行，没有也行
39
}
40

41
// 函数类型 - 描述函数的输入输出
42

43
// 函数声明
44
function add(x: number, y: number): number {
45
  return x + y
46
}
47

48
// 函数表达式
49
const multiply: (x: number, y: number) => number = (x, y) => x * y
50

51
// 可选参数和默认参数
52
function greet(name: string, greeting?: string): string {
53
  return greeting ? `${greeting}, ${name}` : `Hello, ${name}`
54
}

1
function process(value: string | number) {
2
  // 在这里，value 既可能是 string 也可能是 number
3
  // TypeScript 不确定它到底是啥，所以不敢让你调用专属方法
4

5
  // 如果直接调用 string 的方法，会报错
6
  // value.toUpperCase()  // 错误！value 可能是 number
7

8
  // 所以得先"确认"一下 value 的类型
9
  if (typeof value === 'string') {
10
    // TypeScript 心里就有数了：既然进了这个分支，value 肯定是 string
11
    // 所以这里可以放心调用 string 的方法
12
    return value.toUpperCase()
13
  } else {
14
    // 通过控制流分析，到这里 value 必定是 number
15
    return value.toFixed(2)
16
  }
17
}

1
class Dog {
2
  bark() { console.log('woof') }
3
}
4

5
class Cat {
6
  meow() { console.log('meow') }
7
}
8

9
function makeSound(animal: Dog | Cat) {
10
  if (animal instanceof Dog) {
11
    // TypeScript 知道：既然 instanceof Dog 成功了，那肯定是 Dog
12
    animal.bark()
13
  } else {
14
    // 到了 else，肯定是 Cat 没跑了（控制流分析）
15
    animal.meow()
16
  }
17
}

1
interface Bird {
2
  fly(): void
3
  layEggs(): void
4
}
5

6
interface Fish {
7
  swim(): void
8
  layEggs(): void
9
}
10

11
function move(animal: Bird | Fish) {
12
  if ('fly' in animal) {
13
    // 既然有 fly 方法，那肯定是 Bird 没跑了
14
    animal.fly()
15
  } else {
16
    // 到了这里，只能是 Fish
17
    animal.swim()
18
  }
19
}

1
interface Bird {
2
  fly(): void
3
  layEggs(): void
4
}
5

6
interface Fish {
7
  swim(): void
8
  layEggs(): void
9
}
10

11
// 类型守护：返回 true 表示这是 Bird
12
function isBird(value: Bird | Fish): value is Bird {
13
  return 'fly' in value
14
}
15

16
// 类型守护：返回 true 表示这是 Fish
17
function isFish(value: Bird | Fish): value is Fish {
18
  return 'swim' in value
19
}
20

21
function move(animal: Bird | Fish) {
22
  if (isBird(animal)) {
23
    // TypeScript 看到返回 true，就知道 animal 肯定是 Bird
24
    animal.fly()
25
  } else if (isFish(animal)) {
26
    // 同理，这里肯定是 Fish
27
    animal.swim()
28
  }
29
}

1
interface SuccessState {
2
  // 区分标志
3
  status: 'success'
4
  data: string
5
}
6

7
interface ErrorState {
8
  // 区分标志
9
  status: 'error'
10
  error: Error
11
}
12

13
interface LoadingState {
14
  // 区分标志
15
  status: 'loading'
16
}
17

18
// 对于 AsyncState，可以通过对 `status` 属性的判断来缩窄类型
19
type AsyncState = SuccessState | ErrorState | LoadingState
20

21
function handleState(state: AsyncState) {
22
  switch (state.status) {
23
    case 'success':
24
      // 必定是 SuccessState
25
      console.log('Data:', state.data)
26
      break
27
    case 'error':
28
      // 必定是 ErrorState
29
      console.error('Error:', state.error.message)
30
      break
31
    case 'loading':
32
      // 必定是 LoadingState
33
      console.log('Loading...')
34
      break
35
    default:
36
      // 上面已经穷尽了，所以此处永远不可达
37
      throw new Error('never')
38
  }
39
}

1
function identity(arg) {
2
  return arg
3
}
4

5
const num = identity(123)
6
const str = identity('string')

1
function identityNum(arg: number): number {
2
  return arg
3
}
4
function identityStr(arg: string): string {
5
  return arg
6
}

1
function identity(arg: 类型占位符): 类型占位符 {
2
  return arg
3
}

1
function identity<T>(arg: T): T {
2
  return arg
3
}

1
const num = identity<number>(123)
2
const str = identity<string>('string')

1
const num = identity(123)  // 自动推断 T 是 number
2
const str = identity('string')  // 自动推断 T 是 string

1
// 定义了两个类型参数：
2
// - T：输入数组中每一项的类型
3
// - U：输出数组中每一项的类型
4
function map<T, U>(fn: (item: T) => U, arr: T[]): U[] {
5
  return arr.map(item => fn(item))
6
}
7

8
// TypeScript 自动推断：T 是 number，U 是 string
9
const strArr = map(String, [1, 2, 3])
10
// 结果：['1', '2', '3']

1
interface Ref<T> {
2
  value: T
3
}
4

5
const numRef: Ref<number> = { value: 123 }
6
const strRef: Ref<string> = { value: 'string' }

1
class Ref<T> {
2
  value: T
3
  constructor(value: T) {
4
    this.value = value
5
  }
6
}
7

8
// TypeScript 自动推断 T 是 number
9
const numRef = new Ref(123)

1
type Ref<T> = { value: T }
2
const numRef: Ref<number> = { value: 123 }

1
function getLength(arg: any): number {
2
  return arg.length
3
}

1
function getLength<T>(arg: T): number {
2
  // 下面这行依然会报错: Property 'length' does not exist on type 'T'
3
  return arg.length
4
}

1
// 定义一个接口，声明一个包含数字类型 length 属性的数据结构
2
interface Lengthwise {
3
  length: number
4
}
5

6
// 使用 extends 约束泛型 T 必须符合 Lengthwise 接口
7
function getLength<T extends Lengthwise>(arg: T): number {
8
  // 此时就能安全访问 length 属性了
9
  return arg.length
10
}
11

12
// 使用示例
13
const strLength = getLength('hello')  // 字符串有 length 属性,返回 5
14
const arrLength = getLength([1, 2, 3])  // 数组有 length 属性,返回 3
15
const objLength = getLength({ length: 10, value: 'hi' })  // 对象有 length 属性,返回 10
16

17
// getLength(123)  // 这行会编译错误: number 没有 length 属性

1
// 约束 K 类型是 T 对象类型的 key
2
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
3
  return obj[key]
4
}
5

6
const user = { name: 'Alice', age: 30, email: 'alice@example.com' }
7

8
const name = getProperty(user, 'name')  // 返回类型是 string
9
const age = getProperty(user, 'age')    // 返回类型是 number
10
// getProperty(user, 'invalid')  // 编译错误: 'invalid' 不是 user 的属性

1
let animal: Animal = new Dog()  // Dog 能赋值给 Animal

1
interface Person {
2
  name: string
3
}
4

5
class User {
6
  name: string
7
}
8

9
// User 类压根没声明 implements Person
10
// 但结构一样，所以能直接赋值
11
const person: Person = new User()  // 没问题
12

13
// 对象字面量也一样，只要结构对得上
14
const person2: Person = { name: 'Alice' }  // 没问题

1
// 原始类型的兼容
2
let num: number = 42
3
let str: string = 'hello'
4

5
// num = str  // 这样不行，string 不是 number 的子类型

1
type T1 = string | number | boolean  // 最宽泛
2
type T2 = string | number            // 中等
3
type T3 = string                     // 最具体

1
type StringOrNumber = string | number
2
type StringOnly = string
3

4
let union: StringOrNumber = 'hello'
5
let single: StringOnly = 'world'
6

7
// 单一类型可以赋值给包含它的联合类型
8
union = single  // 合法
9

10
// 联合类型不能直接赋值给单一类型
11
// single = union  // 不合法，union 可能是 number
12

13
// 需要类型收窄后才能赋值
14
if (typeof union === 'string') {
15
  single = union  // 合法
16
}

1
interface Animal {
2
  name: string
3
}
4

5
interface Dog {
6
  name: string
7
  breed: string
8
}
9

10
const dog: Dog = { name: 'Buddy', breed: 'Golden Retriever' }
11

12
// Animal 的成员（name）在 Dog 里都有，且类型一样
13
// 所以 Dog 是 Animal 的子类型，能赋值
14
const animal: Animal = dog  // 没问题
15

16
// 反过来呢？Dog 的成员（name 和 breed）Animal 都有吗？
17
// 显然没有，breed 不在 Animal 里
18
const dog2: Dog = animal  // 报错

1
interface Optional {
2
  name: string
3
  age?: number  // 可选属性
4
}
5

6
interface Required {
7
  name: string
8
  age: number
9
}

1
const optional: Optional = { name: 'Alice' }
2
const required: Required = optional // 报错

1
const required: Required = { name: 'Bob', age: 30 }
2
const optional: Optional = required // 没问题

1
// 数字枚举——没指定值的话，默认就是 0, 1, 2...
2
// 这种枚举跟 number 类型兼容
3
enum Status {
4
  Pending,
5
  Approved,
6
  Rejected
7
}
8

9
let status: Status = Status.Pending
10

11
// 1. 枚举能赋给 number，没问题
12
let num: number = status
13

14
// 2. number 也能赋给枚举类型——但这很危险！
15
// 枚举的值是有限的，随便塞个数字进去，运行时可能出问题
16
num = 0
17
status = num // 能过编译，但别这么干
18

19
// 字符串枚举就不一样了
20
enum StringStatus {
21
  Pending = 'PENDING',
22
  Approved = 'APPROVED'
23
}
24

25
let strStatus: StringStatus = StringStatus.Pending
26

27
// 1. 字符串枚举能赋给 string，OK
28
let str: string = strStatus
29
// 2. 但 string 不能赋给字符串枚举——编译器直接拦住
30
str = 'PENDING'
31
strStatus = str  // 报错

1
let t = (x: number, y: number) => 0
2
let s = (x: number) => 0
3

4
t = s // 没问题
5
s = t // 报错

1
// 目标：参数都是必须的
2
type RequiredCallback = (name: string, age: number) => void
3

4
// 源：参数都是可选的
5
// 没问题——可选参数能满足必须参数的要求
6
const optionalCallback: RequiredCallback = (name?: string, age?: number) => {
7
  console.log(name, age)
8
}
9

10
// 反过来就不行了
11
// 目标：参数是可选的
12
type OptionalCallback = (name?: string, age?: number) => void
13

14
// 源：参数都是必须的
15
// 报错——必须参数不能替换可选参数
16
const requiredCallback: OptionalCallback = (name: string, age: number) => {
17
  console.log(name, age)
18
}

1
type DogHandler = (dog: Dog) => void
2
type AnimalHandler = (animal: Animal) => void
3

4
let handleDog: DogHandler = (dog: Dog) => {
5
  dog.bark() // 调用 Dog 特有的方法
6
}
7

8
// handleDog 不能赋给 handleAnimal
9
// let handleAnimal: AnimalHandler = handleDog  // 报错
10

11
// 但反过来可以
12
handleDog = ((animal: Animal) => {})  // 没问题

1
type DogHandler = (dog: Dog) => void
2
type AnimalHandler = (animal: Animal) => void
3

4
let handleDog: DogHandler = (dog: Dog) => {
5
  dog.bark() // 这里会调用 Dog 特有的方法
6
}
7

8
// 假设允许这种赋值（实际上不允许）
9
let handleAnimal: AnimalHandler = handleDog
10

11
handleAnimal(new Animal()) // 运行时错误！Animal 没有 bark 方法

1
type AnimalFactory = () => Animal
2
type DogFactory = () => Dog
3

4
interface Animal {
5
  name: string
6
}
7

8
interface Dog extends Animal {
9
  breed: string
10
}
11

12
// 合法：返回 Dog 的函数可以当作返回 Animal 的函数
13
const createDog: AnimalFactory = () => {
14
  return { name: 'Buddy', breed: 'Golden' }
15
}
16

17
// 不合法：返回 Animal 的函数不能当作返回 Dog 的函数
18
// const createAnimal: DogFactory = () => {
19
//   return { name: 'Buddy' }
20
// }

1
class Animal {
2
  name: string
3
  constructor(name: string) {
4
    this.name = name
5
  }
6
}
7

8
class Dog {
9
  name: string
10
  breed: string
11
  constructor(name: string, breed: string) {
12
    this.name = name
13
    this.breed = breed
14
  }
15
}
16

17
const dog: Dog = new Dog('Buddy', 'Golden')
18
const animal: Animal = dog  // 没问题，结构兼容

1
class Base {
2
  protected name: string
3
  constructor(name: string) {
4
    this.name = name
5
  }
6
}
7

8
class Derived1 extends Base {
9
  constructor(name: string) {
10
    super(name)
11
  }
12
}
13

14
class Derived2 extends Base {
15
  constructor(name: string) {
16
    super(name)
17
  }
18
}
19

20
// Derived1 和 Derived2 的 protected name 都来自 Base
21
// 它们是"同源"的，所以可以互相赋值
22
const d1: Derived1 = new Derived1('test')
23
const d2: Derived2 = d1  // 合法

1
class OtherBase {
2
  protected name: string  // 虽然也是 protected name，但不是来自 Base
3
  constructor(name: string) {
4
    this.name = name
5
  }
6
}
7

8
class OtherDerived extends OtherBase {
9
  constructor(name: string) {
10
    super(name)
11
  }
12
}
13

14
// OtherDerived 的 protected name 来自 OtherBase，不是 Base
15
// 所以不能兼容
16
const other: OtherDerived = d1  // 报错！不同源

1
class Safe {
2
  private secret: string = '我的秘密'
3
}
4

5
class Unsafe {
6
  private secret: string = '也是秘密？'
7
  steal() {
8
    console.log(this.secret)
9
  }
10
}
11

12
// 如果允许这样赋值（实际上不允许）
13
const safe: Safe = new Safe()
14
const unsafe: Unsafe = safe  // 报错！
15
unsafe.steal()  // 就能偷到 Safe 的 secret 了！

1
// 类型参数 T 完全没有被使用
2
interface Empty<T> {}
3

4
let empty1: Empty<number> = {}
5
let empty2: Empty<string> = empty1  // 没问题，T 没被用到
6
let empty3: Empty<boolean> = empty1  // 也没问题
7
// 不管用啥类型替换 T，Empty<T> 的结构都是一样的

1
interface Ref<T> {
2
  value: T
3
}
4
let numRef: Ref<number> = { value: 42 }
5
let strRef: Ref<string> = numRef // 不行，number 不兼容 string
6
let numRef2: Ref<number> = numRef  // 没问题，完全相同的类型

1
interface Pair<T> {
2
  first: T
3
  second: T
4
}
5
interface PairWithMore<T> {
6
  first: T
7
  second: T
8
  third: T
9
}
10
let pair: Pair<number> = { first: 1, second: 2 }
11
// Pair<number> 不能赋给 Pair<string>
12
let pair2: Pair<string> = pair  // 报错
13
// 但 PairWithMore<number> 可以赋给 Pair<number>
14
let pairMore: PairWithMore<number> = { first: 1, second: 2, third: 3 }
15
pair = pairMore  // 没问题——Pair<number> 的成员 PairWithMore<number> 都有

1
class Storage<T> {
2
  data: T
3
  constructor(data: T) {
4
    this.data = data
5
  }
6

7
  get(): T {
8
    return this.data
9
  }
10
}
11

12
let numStorage: Storage<number> = new Storage(100)
13
let strStorage: Storage<string> = numStorage // 不行
14

15
// 但如果类型参数未使用，则兼容
16
class NoUse<T> {
17
  id: number
18
}
19

20
let noUse1: NoUse<number> = { id: 1 }
21
let noUse2: NoUse<string> = noUse1  // 没问题

1
interface List<T> {
2
  length: number
3
  [index: number]: T
4
}
5

6
interface ReadonlyList<T> {
7
  readonly length: number
8
  readonly [index: number]: T
9
}
10

11
let list: List<number> = [1, 2, 3]
12
let readonlyList: ReadonlyList<number> = list  // 合法，readonly 只是让属性变成只读，不影响兼容性

1
interface User {
2
  name: string
3
}
4

5
const data = { name: 'Alice', age: 30 }
6

7
// 使用 as 断言
8
const user = data as User // 没问题
9

10
// 尖括号语法（JSX 中不可用）
11
const user2 = <User>data // 没问题
12

13
// 但断言不能实现不可能的转换
14
const num = 42 as string // 编译错误，除非用双重断言
15
const num2 = 42 as unknown as string // 能过编译，但危险！

1
// 协变：只能读，方向一致
2
interface Producer<T> {
3
  make(): T  // 只往外吐
4
}

1
// 逆变：只能写，方向反过来
2
interface Consumer<T> {
3
  consume: (arg: T) => void  // 只往里吞
4
}

1
// 不变：可读可写，必须完全匹配
2
interface Box<T> {
3
  set(value: T): void  // 写
4
  get(): T  // 读
5
}

1
class Animal {
2
  name: string = ''
3
}
4

5
class Dog extends Animal {
6
  bark() { console.log('woof') }
7
}
8

9
// 数组既能读也能写，理论上应该是不变的
10
// 但 TypeScript 允许这种协变赋值
11
const dogs: Dog[] = [new Dog()]
12
const animals: Animal[] = dogs  // 允许协变
13

14
// 问题来了：通过 animals 引用可以写入 Animal
15
animals.push(new Animal())  // 把 Animal 塞进了 Dog 数组！
16
const dog = dogs[0]  // 读出来的可能不是 Dog
17
dog.bark()  // 运行时错误！

1
// readonly 数组只能读，不能写
2
const readonlyDogs: readonly Dog[] = [new Dog()]
3
const readonlyAnimals: readonly Animal[] = readonlyDogs  // 安全的协变
4

5
readonlyAnimals.push(new Animal())  // 报错，不允许写

1
interface Box<T> {
2
  value: T
3
  getValue(): T  // 读
4
  setValue(value: T): void  // 写
5
}
6

7
const dogBox: Box<Dog> = {
8
  value: new Dog(),
9
  setValue(dog: Dog) { this.value = dog },
10
  getValue() { return this.value }
11
}
12

13
// Box 既能读又能写，理论上应该是不变的
14
// 但 TypeScript 同样允许了协变赋值
15
const animalBox: Box<Animal> = dogBox
16

17
// 问题出现了
18
animalBox.setValue(new Animal())  // 通过写操作塞入了 Animal
19
const dog = dogBox.getValue()  // 通过读操作取出来的可能不是 Dog
20
dog.bark()  // 运行时错误：dog.bark is not a function

1
// 协变：Producer<Cat> 能赋值给 Producer<Animal>
2
// 推断：out T
3
interface Producer<T> {
4
  make(): T
5
}
6

7
// 逆变：Consumer<Animal> 能赋值给 Consumer<Cat>
8
// 推断: in T
9
interface Consumer<T> {
10
  consume: (arg: T) => void
11
}

1
// 错！这个接口明显是逆变的，但标注为协变
2
interface Foo<out T> {
3
  consume: (arg: T) => void  // 编译器会报错
4
}

1
// 逆变标注
2
interface Consumer<in T> {
3
  consume: (arg: T) => void
4
}
5

6
// 协变标注
7
interface Producer<out T> {
8
  make(): T
9
}
10

11
// 不变标注（同时用 in 和 out）
12
interface ProducerConsumer<in out T> {
13
  consume: (arg: T) => void
14
  make(): T
15
}

1
interface Producer<out T> {
2
  make(): T
3
}
4

5
class Animal {}
6
class Dog extends Animal {
7
  bark() {}
8
}
9

10
// 实例化比较：同一个泛型类型的不同实例
11
let dogProducer: Producer<Dog> = {
12
  make: () => new Dog()
13
}
14

15
let animalProducer: Producer<Animal> = dogProducer  // 合法，协变生效
16
let dogProducer2: Producer<Dog> = animalProducer  // 不合法，变体标注阻止了反方向赋值

1
interface Producer<out T> {
2
  make(): T
3
}
4

5
// 变体标注在这里不生效，仍然是结构化比较
6
const p: Producer<string | number> = {
7
  make(): number {
8
    return 42
9
  }
10
}

1
// 别这么干！
2
interface Producer<in out T> {
3
  make(): T
4
}

1
let str: string = 'hello'
2
let num: any = 123
3
str = num  // 合法，编译器允许你这样做，但是后果自负。
4
str.slice(0) // 爆炸，因为 str 是个 string，编译器认为调用 slice 方法是合法的，但实际上其值已经被覆盖为 number 了

1
let str: string = 'hello'
2
let unknownValue: unknown = 123
3
// str = unknownValue  // 不合法，不能直接赋值，因为本质 unknown 相当于父类型，无法安全将父类型赋值给子类型，编译器会阻止我们犯错
4

5
// 配合类型守护
6
if (typeof unknownValue === 'string') {
7
  // 此时 unknownValue 被 narrowing 到 string，可以安全赋值，非法值进不来这里
8
  str = unknownValue
9
}

1
// string[] 是 any[] 的子类型，所以 T1 为 true
2
type T1 = string[] extends any[] ? true : false // T1 类型为 true
3

4
// string 不是 any[] 的子类型，所以 T2 为 false
5
type T2 = string extends any[] ? true : false // T2 类型为 false

1
type IsArray<T> = T extends any[] ? true : false

1
type T1 = IsArray<string[]> // T1 类型为 true
2
type T2 = IsArray<string> // T2 类型为 false

1
// 普通条件类型
2
type ToArray<T> = T extends any ? T[] : never
3

4
// 用于联合类型时，会自动分发
5
type NumArr = ToArray<number>  // number[]
6
type StrArr = ToArray<string>  // string[]
7

8
// 关键：作用于联合类型时，会分发到每个成员
9
type Mixed = ToArray<string | number>  // string[] | number[]

1
// 过滤掉 null 和 undefined
2
type NonNullable<T> = T extends null | undefined ? never : T
3

4
type Test1 = NonNullable<string | null>  // string
5
type Test2 = NonNullable<number | undefined>  // number
6
type Test3 = NonNullable<string | null | undefined>  // string