TS 学习类型体操( type-challenges ) 的第一天 Pick

类型体操的网站

• github.com/type-challe…

涉及的知识点

1. mapped

• www.typescriptlang.org/docs/handbo…

2. Indexed Access Types

• www.typescriptlang.org/docs/handbo…

3. keyof lookup

• www.typescriptlang.org/docs/handbo…

4. extends 条件约束

• www.typescriptlang.org/docs/handbo…

题目 pick

type MyPick<T, K> = any

type cases = [
  Expect<Equal<Expected1, MyPick<Todo, 'title'>>>,
  Expect<Equal<Expected2, MyPick<Todo, 'title' | 'completed'>>>,
  //  @ts-expect-error
  MyPick<Todo, 'title' | 'completed' | 'invalid'>,
]

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

interface Expected1 {
  title: string
}

interface Expected2 {
  title: string
  completed: boolean
}

1 pick

选择key的利器, 传入2个参数, 第一个为 对象 ,第二个为需要选择的 key , 如果当前key不存在, 则报错

有点类似联合类型

// NODE  知识点 

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

// type TodoPreview = Pick<Todo, "completed">;
type TodoPreview = Pick<Todo, "title" | "completed">;

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

2 extends 类型约束

这里的意思就是 只能传入 'title' | 'completed' | 'invalid' 中的一种啦

type aaa = 'title' | 'completed' | 'invalid'
function foo<T extends aaa>(arg: T) {
  console.log( arg);
}
foo()

in 找到 T 中的 每一个 key

总共循环三次

1 title

2 completed

3 invalid

in keyof === forEach 遍历 key

type aaa = 'title' | 'completed' | 'invalid'
type c<T extends aaa> = {
  [P in T]: P
}
type d = c<aaa>

// 3 keyof 遍历元素中的key  类似 Object.keys() 遍历出来以 联合(union)类型展示 
type arr = {
  age: 18
  height: 1.88
}

function bar<T>(arg: keyof T ){}

bar<arr>()

有意思的是, keyof 遍历基本类型是这样的

最后附上答案

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

最后这是我github地址, 因为我的水平比较菜,所以更新也是自己学到什么更新什么

希望有大佬可以指点指点

github.com/DanHall1/le…