TypeScript类型体操进阶：掌握高级类型系统

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 类似三元表达式
type IsString<T> = T extends string ? true : false

type Test1 = IsString<string>  // true
type Test2 = IsString<number>  // false

// 嵌套条件类型
type NonNullable<T> = T extends null | undefined ? never : T

type Test3 = NonNullable<string | null>  // string

1
2
3
4
5
6
7
8
9

// 联合类型会分布式应用条件类型
type ToArray<T> = T extends any ? T[] : never

type Test4 = ToArray<string | number>  // string[] | number[]

// 阻止分布
type ToArrayNonDistributive<T> = [T] extends [any] ? T[] : never

type Test5 = ToArrayNonDistributive<string | number>  // (string | number)[]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// Infer关键字
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never

type Fn = (x: number) => string
type Test6 = ReturnType<Fn>  // string

// 解包Promise
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T

type Test7 = UnwrapPromise<Promise<string>>  // string

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// 将所有属性变为可选
type Partial<T> = {
  [P in keyof T]?: T[P]
}

// 将所有属性变为必需
type Required<T> = {
  [P in keyof T]-?: T[P]
}

// 只读
type Readonly<T> = {
  readonly [P in keyof T]: T[P]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// 只保留特定类型
type OnlyStrings<T> = {
  [P in keyof T as T[P] extends string ? P : never]: T[P]
}

interface User {
  name: string
  age: number
  email: string
}

type Test8 = OnlyStrings<User>
// { name: string; email: string }

// 条件映射
type Getters<T> = {
  [P in keyof T as `get${Capitalize<string & P>}`]: () => T[P]
}

type Test9 = Getters<{ name: string; age: number }>
// { getName: () => string; getAge: () => number }

1
2
3
4

type Greeting = `hello ${string}`

const test: Greeting = 'hello world'  // ✓
const test2: Greeting = 'hi world'    // ✗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 事件名称类型
type EventName<T extends string> = `on${Capitalize<T>}`

type Test10 = EventName<'click'>  // 'onClick'

// 路径类型
type Path<T extends string> = `/${T}` | `${Path<T>}/${T}`

// 组合类型
type CssValue<T extends number> = `${T}px` | `${T}%` | `${t}em`

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P]
}

interface Config {
  database: {
    host: string
    port: number
  }
}

type Test11 = DeepReadonly<Config>
// 所有嵌套属性都变为只读

1
2
3

type DeepRequired<T> = {
  [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : T[P]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// 创建唯一类型
type Brand<T, B> = T & { __brand: B }

type USD = Brand<number, 'USD'>
type EUR = Brand<number, 'EUR'>

const usd: USD = 100 as USD
const eur: EUR = 100 as EUR

// 不能直接赋值
// eur = usd  // ✗ 类型错误

function addUSD(a: USD, b: USD): USD {
  return (a + b) as USD
}

1
2
3
4
5
6
7
8

function process(input: string): string
function process(input: number): number
function process(input: string | number): string | number {
  return input
}

const result1 = process('hello')  // string
const result2 = process(123)      // number

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 元组转函数参数
type TupleToFn<T extends any[]> = T extends [...infer Args, infer R]
  ? (...args: Args) => R
  : never

type Test12 = TupleToFn<[string, number, boolean]>

// 反向推断
type FnToTuple<T extends (...args: any[]) => any> =
  T extends (...args: infer A) => any ? A : never

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function isString(value: unknown): value is string {
  return typeof value === 'string'
}

function process(value: unknown) {
  if (isString(value)) {
    // 这里value的类型是string
    console.log(value.toUpperCase())
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

interface Cat {
  meow(): void
}

interface Dog {
  bark(): void
}

function makeSound(animal: Cat | Dog) {
  if ('meow' in animal) {
    animal.meow()
  } else {
    animal.bark()
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

class Error1 extends Error {
  code = 'ERROR_1'
}

class Error2 extends Error {
  code = 'ERROR_2'
}

function handleError(error: Error) {
  if (error instanceof Error1) {
    console.log(error.code)
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

type OmitByType<T, U> = {
  [P in keyof T as T[P] extends U ? never : P]: T[P]
}

interface Test {
  name: string
  age: number
  active: boolean
}

type Test13 = OmitByType<Test, boolean>
// { name: string; age: number }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

type DeepPick<T, K extends string> = K extends `${infer Key}.${infer Rest}`
  ? Key extends keyof T
    ? { [P in Key]: DeepPick<T[P], Rest> }
    : never
  : K extends keyof T
    ? { [P in K]: T[K] }
    : never

interface User {
  profile: {
    name: string
    email: string
  }
  settings: {
    theme: string
  }
}

type Test14 = DeepPick<User, 'profile.name'>
// { profile: { name: string } }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

type FieldProps<T> = {
  value: T
  onChange: (value: T) => void
  error?: string
}

type FormFields<T> = {
  [K in keyof T]: FieldProps<T[K]>
}

interface LoginData {
  email: string
  password: string
  remember: boolean
}

type LoginForm = FormFields<LoginData>

1
2
3
4
5
6

type ApiResponse<T, E = Error> =
  | { success: true; data: T }
  | { success: false; error: E }

type UserResponse = ApiResponse<User>
type ErrorResponse = ApiResponse<never, NetworkError>