首页 > 其他分享 >TypeScript 复习与进阶三部曲 (3) – TypeScript 类型体操

TypeScript 复习与进阶三部曲 (3) – TypeScript 类型体操

时间:2022-11-19 13:13:46浏览次数:68  
标签:TypeScript 进阶 type Equal challenges extends true 复习

前言

在 第一部 – 把 TypeScript 当强类型语言使用 和 第二部 – 把 TypeScript 当编程语言使用 后, 我们几乎已经把 TypeScript 的招数学完了.

第三部就要开始做练习题了, 这样才能融会贯通.

记得, 做练习题只是单纯为了更理解 TypeScript 这门语言. 在简单的项目中是没有必要的. 我们可以使用各种 Ultility 库 (e.g. type-festts-toolbelt) 来帮助我们完成业务代码.

 

type-challenges

社区已经提供了各种题目. 项目 : Github – type-challenges

一共分 4 个等级, 全部撸一遍就可以了

选择题目后会看见

然后开始做题, 会进入到 TypeScript Playground

 

上半段是题目讲解, 中间是我们回答的地方, 下面是测试代码, 答案错误它会显示红线, 正确则红线消失

做题

 

 

常用小技巧

这里记入一些常用到的技巧

1. Tuple to Union

type Tuple1 = [string, number];
type Union1 = Tuple1[number]; // string | number

 

 

高级技巧

1. Equal

在 type-challenges 的测试代码中, 用到了一个叫 Equal 的 Ultility.

我们之前有讲过, TypeScript 只有 extends 没有 equal. 比如下面这题

type Yes = { age: 11 } extends {} ? true : false; // true

因为 { age: 11 } 是 "一种" {} 所以结果是 true

那如果我们想要 "Equal" 呢?

可以这么写

type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? true : false

我是没看懂的. 有兴趣的朋友可以看这里 Github – [Feature request]type level equal operator #27024

大致意思是, 当 conditional 遇上 泛型 T 产生了化学反应, 所以就有了 equal 的功能. 

 

高难度题目解析

 

标签:TypeScript,进阶,type,Equal,challenges,extends,true,复习
From: https://www.cnblogs.com/keatkeat/p/16905910.html

相关文章