ts类型体操-简单篇

国王不在家

于 2024-10-02 21:49:37 发布

阅读量100

点赞数 2

分类专栏： Typescript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/badbaby52906/article/details/142685064

版权

Typescript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

介绍下type challenge中几道简单的类型体操。涉及的知识点主要是：映射类型、条件类型、联合类型的分布式、infer R等。

1、实现pick

不使用 Pick<T, K> ，实现 TS 内置的 Pick<T, K> 的功能。

从类型 T 中选出符合 K 的属性，构造一个新的类型。

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

type MyPick<T, K extends keyof T> = {
  [key in K]: T[key]
}

2、实现Readonly对象属性只读

不要使用内置的Readonly<T>，自己实现一个。

泛型 Readonly<T> 会接收一个 泛型参数，并返回一个完全一样的类型，只是所有属性都会是只读 (readonly) 的。

也就是不可以再对该对象的属性赋值。

interface Todo {
  title: string
  description: string
}

const todo: MyReadonly<Todo> = {
  title: "Hey",
  description: "foobar"
}

todo.title = "Hello" // Error: cannot reassign a readonly property
todo.description = "barFoo" // Error: cannot reassign a readonly property

type MyReadonly<T> = {
  readonly [key in keyof T]: T[key]
}

3、实现Exclude

实现内置的 Exclude<T, U> 类型，但不能直接使用它本身。

从联合类型 T 中排除 U 中的类型，来构造一个新的类型。

type Result = MyExclude<'a' | 'b' | 'c', 'a'> // 'b' | 'c'
type MyExclude<T, M> = T extends M ? never : T

4、元组转为对象

将一个元组类型转换为对象类型，这个对象类型的键/值和元组中的元素对应。

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const

type result = TupleToObject<typeof tuple> // expected { tesla: 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}

type TupleToObject<T extends readonly PropertyKey[]> = {
  [key in T[number]]: key
}

5、实现Parameters

实现内置的 Parameters 类型，而不是直接使用它，可参考TypeScript官方文档。

const foo = (arg1: string, arg2: number): void => {}

type FunctionParamsType = MyParameters<typeof foo> // [arg1: string, arg2: number]

//获取函数的参数
type MyParameters<T extends (...args: any[]) => any> = T extends (...args: infer R) => any ? R : never