欢迎光临散文网 会员登陆 & 注册

TypeScript 高级语法——类型生成

2023-08-01 09:15 作者:没用软件开发日记  | 我要投稿

    TS的类型系统提供了“keyof”操作符,用于从某种复杂类型提取该类型的键值。官方文档中有这样一个非常经典的例子:

    此例中使用keyof操作符解析泛型占位标志Type的类型,这种解析发生在开发阶段的代码编写过程中,因为keyof操作符是TS提供的语法无法编译成JS代码,在运行时并不存在。对象x被声明为对象,键分别为"a","b","c","d"、值分别为1,2,3,4,当我们在代码中使用getProperty函数时TS会分析编写的参数让确定泛型占位的真实类型,keyof解析了x的类型提取出了x类型的“键”,所以类型占位“KEY”在此次函数使用中被解析为 "a" | "b" | "c" | "d" ,所以在第二次使用gentProperty函数传入字符“m”才会报错。

    利用type关键字我们可以很轻松的为keyof解析出的创建类型别名:

    这段官方示例巧妙的关联了type和keyof的关系,使用type定义类型后使用keyof关键字提取类型键值并定义类型别名,这种操作方式极大的方便了对象取值校验。

    在Mapish的例子中TS类型系统完整的表达出了JS索引取值的特性:number型的索引值会被隐式的转换为string再通过索引访问对象,所以这里的M类型应该为string | number,但是如果我们将k的类型声明改为number,那么M的可能性就只剩下number了(因为在TS检查中不接受string类型的索引访问只能使用number类型,所以M的类型一定为number)。

    TS在编译前(也就就是说仅在编写代码时生效)阶段拓展了原本在JS中就存在的typeof操作符能力,typeof获得了解析对象类型的能力,在此例中typeof解析了f对象,获得了函数f的TS函数类型签名( )=> { x: number; y: number; }。此官方示例中展示了TS的内建类型ReturnType<T>的使用,ReturnType<T>可以用来解析类型对象的返回值,此例中配合typeof的返回值取得了类型P的值{ x: number; y: number; }。

    TS为了避免开发人员编写认为正在执行但实际上没有执行的代码所以对typeof的使用做出了限制,在TS中typeof操作符只能像上例一样使用在变量名上(函数名称,临时对象,class名称)。

    在这个官方示例中TS向我们展示了其类型系统的强大,通过对泛型占位符Type的keyof操作在编码阶段解析其真实类型包含的对象键名,“Property in”语法代指Property表示keyof的结果。OptionsFlags泛型最终表达的是类型Type内的所有字段的布尔值表达。

    我们还可以增加“-”标记用于删除原有类型定义的修饰符,上例中CreateMutable就使用“-readonly”删除了LockedAccount定义时使用的readonly、Concrete删除了类型定义的可空修饰符。

    这只是TS类型系统的浅尝辄止,但是已经突破大多数人的日常使用了,本章一部分代码示例借鉴于TS官方,更多的类型体操请移步官方文档Type Manipulation章节。

TypeScript 高级语法——类型生成的评论 (共 条)

分享到微博请遵守国家法律