TypeScript 杂记二 《类型体操》

Posted 2022-12-03 左手121

TypeScript 杂记二 《类型体操》

type-challenges 题目

前提

type A = keyof any
// ===
type A = string | number | symbol

// infer 表示待推断的类型，如下内置类型
type ReturnType<T> = T extends (...args: any[]) => infer P ? P : any
type B = ReturnType<(value: string) => string>
// ===
type B = string

type Func = () => void
type C = keyof Func
// ===
type C = never

class Class 
type C = keyof Class
// ===
type C = never

Pick<T, K>

type _Pick<T, K extends keyof T> = 
  [P in K]: T[P]

Readonly

type _Readonly<T> = 
  readonly [P in keyof T]: T[P]

Partial

type _Partial<T> = 
  [P in keyof T]?: T[P]

Required

type _Required<T> = 
  [P in keyof T]-?: T[P]

Record<T, K>

type _Record<T extends keyof any, K> = 
  [P in T]: K

Exclude<T, K>

type _Exclude<T, K> = T extends K ? never : T

Extract<T, K>

type _Extract<T, K> = T extends K ? T : never

Omit<T, K>

type _Omit<T, K extends keyof any> = _Pick<T, _Exclude<keyof T, K>>

First

实现一个通用 First<T>，它接受一个数组 T 并返回它的第一个元素的类型

type First<T extends any[]> = T extends [] ? never : T[0]

Last

实现一个通用 Last<T>，它接受一个数组 T 并返回它的最后一个元素的类型

type First<T extends any[]> = T extends [...infer O, infer R] ? R : never

Readonly2<T, K>

实现一个通用的 Readonly2<T, K>，K 指定应设置为 Readonly 的 T 的属性集。如果未提供 K，则应使所有属性都变为只读，就像普通的 Readonly一样

// 自己写的
type Readonly2<T, K extends keyof T = any> = K extends never
  ? Readonly<T>
  : 
      readonly [P in K]: T[P]
     & 
      [P in Exclude<keyof T, K>]: T[P]
    

// 别人的精简版
type Readonly2<T, K extends keyof T = keyof T> = 
  readonly [P in K]: T[P]
 & Omit<T, K>

DeepReadonly

实现一个通用的 DeepReadonly<T>，它将对象的每个参数及其子对象递归地设为只读

// 满足简单数据结构
type DeepReadonly<T> = 
  readonly [P in keyof T]: DeepReadonly<T[P]>

// 处理函数和类，原因查看前提的内容
type DeepReadonly<T> = keyof T extends never
  ? T
  : 
      readonly [P in keyof T]: DeepReadonly<T[P]>
    

Trim

type trimed = Trim<' Hello World '> // expected to be 'Hello World'

// 处理左侧的空格和换行，infer 请查看前提
// 一个一个递归处理
type TrimL<T extends string> = T extends `$' ' | '\\t' | '\\n'$infer S`
  ? TrimL<S>
  : T
// 同理处理右侧
type TrimR<T extends string> = T extends `$infer S$' ' | '\\t' | '\\n'`
  ? TrimR<S>
  : T
type Trim<T extends string> = TrimL<TrimR<T>>

// 整合起来
type Trim<T extends string> = T extends `$' ' | '\\t' | '\\n'$infer L`
  ? Trim<L>
  : T extends `$infer R$' ' | '\\t' | '\\n'`
  ? Trim<R>
  : T

vue

实现类似 Vue 的类型支持的简化版本

const instance = SimpleVue(
  data() 
    return 
      firstname: 'Type',
      lastname: 'Challenges',
      amount: 10,
    
  ,
  computed: 
    fullname() 
      return this.firstname + ' ' + this.lastname
    ,
  ,
  methods: 
    hi() 
      alert(this.fullname.toLowerCase())
    ,
  ,
)

type ComputedReturn<T> = 
  [K in keyof T]: T[K] extends () => infer R ? R : never

declare function SimpleVue<D, C, M>(options: 
  data?(this: ): D
  computed?: C & ThisType<D & ComputedReturn<C> & M>
  methods?: M & ThisType<D & ComputedReturn<C> & M>
): D & ComputedReturn<C> & M