来玩TS吗，机都给你开好了

女爷i 2022-09-11 09:14 175阅读 0赞

> ❝
> 
> 本题目旨在让你更好的了解 TS 的类型系统（类型编程），编写你自己的类型工具，或者只是单纯的享受挑战的乐趣！
> 
> ❞

![8d2d989d4e1ae80eb33ef9504a97346b.png][]

## 实现 Pick ##

实现 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,
    }

答案：

![961b6f254ef594b1aedc05133e3387ce.png][]

## 实现 Readonly ##

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

该 Readonly 会接收一个 泛型参数，并返回一个完全一样的类型，只是所有属性都会被 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

答案：![b2280ac3fd2abe372741d207ca02036a.png][]

## 元组转换为对象 ##

传入一个元组类型，将这个元组类型转换为对象类型，这个对象类型的键/值都是从元组中遍历出来。

例如：

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const
    
    const result: TupleToObject<typeof tuple> // expected { tesla: 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}

答案：

![fef3995dc4e692605ec0379e6132a96e.png][]

## 第一个元素 ##

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

例如：

type arr1 = ['a', 'b', 'c']
    type arr2 = [3, 2, 1]
    
    type head1 = First<arr1> // expected to be 'a'
    type head2 = First<arr2> // expected to be 3

答案：

![27b4d7676f17a565b639b89a5a1cfccd.png][]

## 获取元组长度 ##

创建一个通用的Length，接受一个readonly的数组，返回这个数组的长度。

例如：

type tesla = ['tesla', 'model 3', 'model X', 'model Y']
    type spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT']
    
    type teslaLength = Length<tesla> // expected 4
    type spaceXLength = Length<spaceX> // expected 5

答案：

![d0689287696b16b74b042a7abce19ca2.png][]

## 实现Exclude ##

实现内置的Exclude <T，U>

从T中排除可分配给U的那些类型

答案：

![8c7aba932d5c44871558bdf585bbe463.png][]

## Awaited ##

假如我们有一个 Promise 对象，这个 Promise 对象会返回一个类型。在 TS 中，我们用 Promise 中的 T 来描述这个 Promise 返回的类型。请你实现一个类型，可以获取这个类型。

比如：Promise，请你返回 ExampleType 类型。

答案：

![5793f6bbf5fb72d6ba106d3e70a3de31.png][]

## If ##

实现一个If util，它接受一个C泛型参数，如果为true就返回类型T，如果为false,则返回类型F

例如：

type A = If<true, 'a', 'b'>  // expected to be 'a'
      type B = If<false, 'a', 'b'> // expected to be 'b'

![7eddbf48138e7c368defb437dd95ac22.png][]

## Concat ##

实现数组的Concat类型版本

例如：

type Result = Concat<[1], [2]> // expected to be [1, 2]

答案：

![70699ecbc496f05a8cd430e0dc49ac0e.png][]

## Includes ##

> ❝
> 
> 在类型系统中实现JavaScript Array.includes函数。一个类型需要两个参数。输出应该是一个布尔值的true或false。
> 
> ❞

例如：

type isPillarMen = Includes<['Kars', 'Esidisi', 'Wamuu', 'Santana'], 'Dio'> // expected to be `false`

这题有难度，反正我是copy的！！！

![a167da38b994699f4cb3593ea921f659.png][]

## Push ##

实现Array.push类型版本

例如：

type Result = Push<[1, 2], '3'> // [1, 2, '3']

答案：

![321073efce9cfe0e6c33005e72101983.png][]

## Unshift ##

实现Array.unshift的类型版本

例如：

type Result = Unshift<[1, 2], 0> // [0, 1, 2,]

答案：

![cc6713151f5053eaee443162b2352b7a.png][]

## 最后 ##

以上这些题我都做过，欢迎评论区留言讨论

## 参考文献 ##

*  https://github.com/type-challenges/type-challenges
 *  https://www.typescriptlang.org/docs/handbook/utility-types.html
 *      往期干货：
         26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载（免费） 干货~~~2021最新前端学习视频~~速度领取
         前端书籍-前端290本高清pdf电子书打包下载
    
    ![4872dddd5e7b346cb123ca25bb398b31.png][]点赞和在看就是最大的支持❤️

[8d2d989d4e1ae80eb33ef9504a97346b.png]: /images/20220828/5494503c23fe4cf6963077a7cde3cfe1.png
[961b6f254ef594b1aedc05133e3387ce.png]: /images/20220828/73a52836ba5c460397c9a8f95de1bc5e.png
[b2280ac3fd2abe372741d207ca02036a.png]: /images/20220828/15a046e698454daea23929d33a06f317.png
[fef3995dc4e692605ec0379e6132a96e.png]: /images/20220828/0ed138872a9e4f5382b67f216bd94b78.png
[27b4d7676f17a565b639b89a5a1cfccd.png]: /images/20220828/720dee09fdeb42f3abfeba9cd914ab1a.png
[d0689287696b16b74b042a7abce19ca2.png]: /images/20220828/7d385a8e1f4b47119ba5e20d018a8ef9.png
[8c7aba932d5c44871558bdf585bbe463.png]: /images/20220828/896e398ff7fb4592a50ff02aa0f6f670.png
[5793f6bbf5fb72d6ba106d3e70a3de31.png]: /images/20220828/fdbf354eac2a4d7981a1fa23e8ffd006.png
[7eddbf48138e7c368defb437dd95ac22.png]: /images/20220828/e5efa425110349289afab05d0ac0cf92.png
[70699ecbc496f05a8cd430e0dc49ac0e.png]: /images/20220828/cc5ca7d1a9e3450b84d50f50578f634c.png
[a167da38b994699f4cb3593ea921f659.png]: /images/20220828/f695663d1c4e4e09a9b98730cd50619d.png
[321073efce9cfe0e6c33005e72101983.png]: /images/20220828/c06808e039df44d4b70048884231abfc.png
[cc6713151f5053eaee443162b2352b7a.png]: /images/20220828/a607a555d1774c1894649a1f702b9b6e.png
[4872dddd5e7b346cb123ca25bb398b31.png]: /images/20220828/f94f6673720740609c4c1b6cfd1a5e8a.png