typescript学习重难点总结--可索引类型,interface, type, 泛型, keyof,工具泛型等

最新推荐文章于 2024-09-24 20:19:28 发布

haoyanyu_

最新推荐文章于 2024-09-24 20:19:28 发布

阅读量3.7k

点赞数 2

分类专栏： typescript 日常总结

本文链接：https://blog.csdn.net/haoyanyu_/article/details/105700521

版权

这篇博客总结了TypeScript的学习重点，包括代码编译原理、数据类型、可索引类型的概念及规则，详细探讨了interface与type的区别和用法，还介绍了implements、&和|操作符、extends的功能。此外，文章深入讲解了keyof、泛型以及工具泛型如Partial、Required、Readonly、Pick、Record等的应用。

摘要由CSDN通过智能技术生成

ts代码编译原理

核心原则之一：对值所具有的结构进行类型检查（鸭式辩型）
ts源码

ts数据类型

ts的数据类型基础的有string, number, boolean, any, null, undefined, never, 数组类型等等等。

ts里还有一些内置类型
例如在html中DOM元素的一些类型，实现复制功能时用到过HTMLTextAreaElement， Selection，Range等

@types库里也有定义好的一些数据类型，可以引入使用。

数据类型有很多，多看多用多记，多多易善

可索引类型

interface IStringArray {
   
	[index: number]: string
}

IStringArray具有索引签名，表示当用number去索引时，会返回string的值。

ts支持字符串和数字两种数据类型做索引签名。

问题： 数字索引的返回值必须是字符串索引返回值类型的子类型 ？？

因为：数字类型的索引会先转成字符串，然后再去索引得到返回值。

当接口指定了可索引类型后，在定义其他属性时，也必须满足可索引类型，如下：

interface IDictionary {
   
	[index: string]: number;
	length: number;
	name: string; //这里会报错，因为不满足索引类型指定的返回值类型
}

接口属性也可以通过readonly指定为只读属性，只有首次给变量赋值时可以，不允许再次复制

interface和type

我理解的是interface用来定义接口数据结构，type是取个别名
例如

type FC<P = {
   }> = FunctionComponent<P>;

interface FunctionComponent<P = {
   }> {
   
   (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
   propTypes?: WeakValidationMap<P>