2024年10月typescript（第三节：TypeScript对象类型）
⑴typescript（第三节:TypeScript对象类型
⑵TypeScript简单入门（三:TypeScript原始数据类型表达原始数据类型包括：布尔值、数值、字符串、null、undefined以及ES中的新类型Symbol和ES中的新类型BigInt,而TypeScript的核心原则之一是对值所具有的的结构进行类型检查,之前的数据类型中已经了解,如何限定变量的类型例如:如果变量的值不是基本数据类型的值,而是一个对象,可以使用object类型这种写法只能限定变量是object类型,但是没法明确表明或限定对象内部属性以及值类型,也就是说示例中name可是是任意数据类型;属性也不限定于name和age如果要限定对象属性值的类型,就需要使用字面量的方式进行类型注释这样的写法虽然达到了限定对象内部结构,但同时也带来了另外的问题,如属性过多,或多次复用相同类型注释.因此可以定义接口或类型别名来定义统一的对象属性限制通过接口命名对象类型或者使用类型别名来命名对象类型但是也需要注意到,在给使用了接口和类型别名时,变量值接受对象中的属性必须和接口或类型别名中定义的属性一致.,多了少了编译时都会报错为了让对象类型更具灵活性,对象类型中每个属性都可以指定几件事:很多时候,在处理对象类型的时候,某些属性可能并不一定存在.这个时候就需要用到可选属性.可选属性通过在属性名称末尾添加?来将这些属性标记为可选例如:可选属性在进行检测时,可选属性在实现上可有可无,这样就提升了对象类型使用的灵活性.例如:在TypeScript中对象属性也可以标记为readonly只读属性只读属性虽然不会在运行时更改任何行为.但在类型检查期间无法写入只读标记的属性通过在属性名前添加readonly来标记只读属性例如:此时name属性标记为只读属性,当你尝试修改只读属性值时,TypeScript报错,提示你不可修改使用readonly修饰符并不一定意味着一个值完全不可修改,也就是说属性属性值是一个引用类型的值,比如对象readonly只是表示当前属性本身不能被重写,但属性值是引用类型,引用类型内部的值是完全可变的例如:示例中只读属性friend内部的属性name被修改了,没有任何报错.因为TypeScript在检查这些类型是否兼容时不会考虑两种类型内部的属性是否有readonly标记存在,所以readonly属性也可以通过别名来更改,也就是说将有只读属性的类型重新分配给没有只读属性的类型有的时候你并不提前知道类型属性的所有属性名,但你确实知道属性值的类型在这样的情况下,你可以使用索引签名来描述可能值的类型,例如:示例中所以签名的意思,表示使用number类型的索引获取值时,返回string类型TypeScript索引签名可以同时支持两种类型的索引器.虽然字符串索引签名是描述’字典’模式的强大方式,但TypeScript还是强制所有的属性与其返回的类型匹配例如:示例中,age属性的类型是number类型,将会出现错误,因为与索引签名冲突,其实也很好理解,因为在使用age属性时,无论通过,obj.age,还是obj,其都符合索引签名的模式,返回的值类型应该是string类型,可是你有明确的声明了age属性的返回值是明确的number类型此时TypeScript不知道使用索引签名的规则来检查值类型,还是具体罗列age属性的类型来检查值类型这种问题,可以通过给索引签名使用联合类型解决最后你还可以在索引签名上使用只读属性readonly,表示不可以给索引分配值例如:只读索引签名在实际使用时,一个类型有可能是其他类型的具体版本的类型很常见,简单说就是,一个类型只有另外一个类型中的部分信息例如:有一下两个类型:人员基本信息,包含姓名,年纪信息具体学生信息:包含除了姓名,年纪外还有学号,班级等信息示例中,StudentPerson包含Person所有的属性信息,也可以说是Person类型更详细的类型,试想一下,如果每个定义包含name,age属性以及其他不同属性类型时,我们都像示例中把name,age属性重新定义一遍.这样的使用方式会导致name,age属性大量重复解决这样重复声明一个类型中所有的属性,我们就可以使用extends关键字扩展原有类型,并添加新的属性关键字extends允许我们有效的从其他命名类型复制成员,并添加我们想要的新成员同样interface接口也允许从多个接口中扩展新的类型这样我们就可以使用WorkPerson接口来注释一个具有姓名,年纪,工作信息,工号属性对象的类型interface允许我们通过extends扩展其他类型来构建新的类型TypeScript中还为类型别名提供了另外一种称之为交叉类型的类型扩展方式.主要用于组合现有类型使用&运算符定义交叉类型示例中,通过交叉类型组合Colorful并Circle生成一个新的类型别名,类型别名同时具有前两个类型的所有属性也可以在类型注释的时候使用交叉类型理解两者的主要区别,方便我们在使用时做出取舍通用对象类型:就是需要定义一个可以通用类型,例如:定义一个Box类型,具有contents属性,但是属性的值可能是string,number,等各种类型首先会想到的是属性值类型使用联合类型但联合类型也仅仅是罗列我们已知的类型,在使用场景下可能并不通用,例如值也有可能是其他对象类型呢此时也许会考虑any任何类型any类型可以工作,但是可能会导致意外事故发生也可以尝试定义unknown类型使用unknown类型就意味着我们需要进行类型检查,或者使用类型断言不过unknow也不是特别安全,比较安全的做法是为每一种类型添加一个接口但这意味着如果是给函数参数使用,我们需要创建不同函数或函数重载,才能对这些进行操作这样的处理方式不仅繁琐,而且之后需要需要新的类型还需要引入新的类型和重载,因为我们contents类型和重载实际上都是相同的,最好的处理方式,就是我们创建一个声明类型参数的泛型,其实就是将类型定义为像函数参数或变量一样,类型参数就可以在多个地方使用,通过传递具体类型,让使用类型参数的地方全部指代当前具体类型此时当我们在使用Box类型注释时,必须给出一个类型参数来代替Type此时会将Box视为类型模板,其中Type为占位符将被其他类型替换,Box类型可以重复使用,Type可以用任何类型代替,这意味着当我们需要一个新类型Box是,我们根本不要在声明一个新的Box类型,我们只需要传递不同的类型替换Type即可这也意味着,如果将类型用在函数参数上,我们可以通过使用泛型函数来避免重载示例中,我们并没有限定obj的类型,但是在传递参数后,TypeScript根据入参推断出Type是一个string类型,因此函数的第二个参数也必须是一个字符串类,否则TypeScript将发出错误警告例如:如下调用函数类型的别名也是可以通用的例如Box接口也可以使用类型别名来替换由于类型别名与接口不同,类型别名不仅仅可以描述对象,还可以使用类型别名来编写其他类型的通用帮助类型typescript是什么意思我们有时会看到TypeScript这个词,TypeScript声明变量时需要指定数据类型具体表达式以构造函数方式：编译后其中b和o是ES中的二进制和八进制表示法,本文目录第三节:TypeScript对象类型typescript是什么意思TypeScript简单入门（三:TypeScript原始数据类型表达第三节:TypeScript对象类型在JavaScript中,可以赋值给number类型的变量：而void类型的变量不能赋值给number类型的变量：Symbols是ES新增的原始数据类型,参考原始数据类型TypeScriptBigIntTypeScriptSymbol,ts中使用时需要先配置、配置tsconfig.json"lib":,需要dom时还要将"dom"添加进lib,如:console.log语句、特性()不能和其他值计算,如加键、字符串拼接等()可以调用.toString()返回字符串()本身作为true类型存在()类似forin遍历时,不会遍历symbol属性可通过Object.getOwnPropertySymbols(对象)/Reflect.ownKeys(obj)获取symbol属性、语法bigint数据类型是用来表示那些已经超出了number类型最大值的整数值,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。
⑶第三节:TypeScript对象类型
⑷在JavaScript中，我们分组和传递数据的基本方式是通过对象。在TypeScript中，我们通过对象类型来表示它们。
⑸而TypeScript的核心原则之一是对值所具有的的结构进行类型检查,
⑹之前的数据类型中已经了解,如何限定变量的类型
⑺如果变量的值不是基本数据类型的值,而是一个对象,可以使用object类型
⑻这种写法只能限定变量是object类型,但是没法明确表明或限定对象内部属性以及值类型,
⑼也就是说示例中name可是是任意数据类型;属性也不限定于name和age
⑽如果要限定对象属性值的类型,就需要使用字面量的方式进行类型注释
⑾这样的写法虽然达到了限定对象内部结构,但同时也带来了另外的问题,如属性过多,或多次复用相同类型注释.
⑿因此可以定义接口或类型别名来定义统一的对象属性限制
⒀通过接口命名对象类型
⒁或者使用类型别名来命名对象类型
⒂但是也需要注意到,在给使用了接口和类型别名时,变量值接受对象中的属性必须和接口或类型别名中定义的属性一致.,多了少了编译时都会报错
⒃为了让对象类型更具灵活性,对象类型中每个属性都可以指定几件事:
⒄很多时候,在处理对象类型的时候,某些属性可能并不一定存在.这个时候就需要用到可选属性.
⒅可选属性通过在属性名称末尾添加?来将这些属性标记为可选
⒆可选属性在进行检测时,可选属性在实现上可有可无,这样就提升了对象类型使用的灵活性.
⒇在TypeScript中对象属性也可以标记为readonly只读属性
⒈只读属性虽然不会在运行时更改任何行为.但在类型检查期间无法写入只读标记的属性
⒉通过在属性名前添加readonly来标记只读属性
⒊此时name属性标记为只读属性,当你尝试修改只读属性值时,TypeScript报错,提示你不可修改
⒋使用readonly修饰符并不一定意味着一个值完全不可修改,也就是说属性属性值是一个引用类型的值,比如对象
⒌readonly只是表示当前属性本身不能被重写,但属性值是引用类型,引用类型内部的值是完全可变的
⒍示例中只读属性friend内部的属性name被修改了,没有任何报错.
⒎因为TypeScript在检查这些类型是否兼容时不会考虑两种类型内部的属性是否有readonly标记存在,所以readonly属性也可以通过别名来更改,也就是说将有只读属性的类型重新分配给没有只读属性的类型
⒏有的时候你并不提前知道类型属性的所有属性名,但你确实知道属性值的类型
⒐在这样的情况下,你可以使用索引签名来描述可能值的类型,
⒑示例中所以签名的意思,表示使用number类型的索引获取值时,返回string类型
⒒TypeScript索引签名可以同时支持两种类型的索引器.
⒓虽然字符串索引签名是描述’字典’模式的强大方式,但TypeScript还是强制所有的属性与其返回的类型匹配
⒔示例中,age属性的类型是number类型,将会出现错误,因为与索引签名冲突,
⒕其实也很好理解,因为在使用age属性时,无论通过,obj.age,还是obj,其都符合索引签名的模式,返回的值类型应该是string类型,可是你有明确的声明了age属性的返回值是明确的number类型
⒖此时TypeScript不知道使用索引签名的规则来检查值类型,还是具体罗列age属性的类型来检查值类型
⒗这种问题,可以通过给索引签名使用联合类型解决
⒘最后你还可以在索引签名上使用只读属性readonly,表示不可以给索引分配值
⒙在实际使用时,一个类型有可能是其他类型的具体版本的类型很常见,
⒚简单说就是,一个类型只有另外一个类型中的部分信息
⒛人员基本信息,包含姓名,年纪信息
具体学生信息:包含除了姓名,年纪外还有学号,班级等信息
示例中,StudentPerson包含Person所有的属性信息,也可以说是Person类型更详细的类型,
试想一下,如果每个定义包含name,age属性以及其他不同属性类型时,我们都像示例中把name,age属性重新定义一遍.
这样的使用方式会导致name,age属性大量重复
解决这样重复声明一个类型中所有的属性,我们就可以使用extends关键字扩展原有类型,并添加新的属性
关键字extends允许我们有效的从其他命名类型复制成员,并添加我们想要的新成员
同样interface接口也允许从多个接口中扩展新的类型
这样我们就可以使用WorkPerson接口来注释一个具有姓名,年纪,工作信息,工号属性对象的类型
interface允许我们通过extends扩展其他类型来构建新的类型
TypeScript中还为类型别名提供了另外一种称之为交叉类型的类型扩展方式.主要用于组合现有类型
使用&运算符定义交叉类型
示例中,通过交叉类型组合Colorful并Circle生成一个新的类型别名,类型别名同时具有前两个类型的所有属性
也可以在类型注释的时候使用交叉类型
理解两者的主要区别,方便我们在使用时做出取舍
通用对象类型:就是需要定义一个可以通用类型,
例如:定义一个Box类型,具有contents属性,但是属性的值可能是string,number,等各种类型
首先会想到的是属性值类型使用联合类型
但联合类型也仅仅是罗列我们已知的类型,在使用场景下可能并不通用,例如值也有可能是其他对象类型呢
此时也许会考虑any任何类型
any类型可以工作,但是可能会导致意外事故发生
也可以尝试定义unknown类型
使用unknown类型就意味着我们需要进行类型检查,或者使用类型断言
不过unknow也不是特别安全,比较安全的做法是为每一种类型添加一个接口
但这意味着如果是给函数参数使用,我们需要创建不同函数或函数重载,才能对这些进行操作
这样的处理方式不仅繁琐,而且之后需要需要新的类型还需要引入新的类型和重载,因为我们contents类型和重载实际上都是相同的,
最好的处理方式,就是我们创建一个声明类型参数的泛型,
其实就是将类型定义为像函数参数或变量一样,类型参数就可以在多个地方使用,通过传递具体类型,让使用类型参数的地方全部指代当前具体类型
此时当我们在使用Box类型注释时,必须给出一个类型参数来代替Type
此时会将Box视为类型模板,其中Type为占位符将被其他类型替换,
Box类型可以重复使用,Type可以用任何类型代替,这意味着当我们需要一个新类型Box是,我们根本不要在声明一个新的Box类型,我们只需要传递不同的类型替换Type即可
这也意味着,如果将类型用在函数参数上,我们可以通过使用泛型函数来避免重载
示例中,我们并没有限定obj的类型,但是在传递参数后,TypeScript根据入参推断出Type是一个string类型,因此函数的第二个参数也必须是一个字符串类,否则TypeScript将发出错误警告
类型的别名也是可以通用的
Box接口也可以使用类型别名来替换
由于类型别名与接口不同,类型别名不仅仅可以描述对象,还可以使用类型别名来编写其他类型的通用帮助类型
typescript是什么意思
我们有时会看到TypeScript这个词，但是又不理解它的意思，那么这个词到底是什么呢？
TypeScript的简介
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和面向对象编程。TypeScript起源于开发应用程序规模的JavaScript应用程序的需求。
TypeScript的发展历程
年十月份，微软发布了首个公开版本的TypeScript，年月日，在经历了一个预览版之后微软正式发布了正式版TypeScript.，向未来的TypeScript.版迈进了很大一步。TypeScript的概况TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生JavaScript以确保兼容性。TypeScript支持为已存在的JavaScript库添加类型信息的头文件，扩展了它对于流行的库如jQuery，MongoDB，Node.js和D.js的好处。
总的来说，TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，添加了可选的静态类型和面向对象编程。TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。
TypeScript简单入门（三:TypeScript原始数据类型表达
原始数据类型包括：布尔值、数值、字符串、null、undefined以及ES中的新类型Symbol和ES中的新类型BigInt。TypeScript声明变量时需要指定数据类型具体表达式
其中b和o是ES中的二进制和八进制表示法，它们会被编译为十进制数字。
其中`用来定义ES中的模板字符串，${expr}用来在模板字符串中嵌入表达式。
JavaScript没有空值（Void的概念，在TypeScript中，可以用void表示没有任何返回值的函数：
声明一个void类型的变量没有什么用，因为你只能将它赋值为undefined和null
在TypeScript中，可以使用null和undefined来定义这两个原始数据类型：
与void的区别是，undefined和null是所有类型的子类型。也就是说undefined类型的变量，可以赋值给number类型的变量：
而void类型的变量不能赋值给number类型的变量：
Symbols是ES新增的原始数据类型，ts中使用时需要先配置、配置tsconfig.json"lib":,需要dom时还要将"dom"添加进lib,如:console.log语句
特性()不能和其他值计算,如加键、字符串拼接等()可以调用.toString()返回字符串()本身作为true类型存在()类似forin遍历时,不会遍历symbol属性可通过Object.getOwnPropertySymbols(对象)/Reflect.ownKeys(obj)获取symbol属性
bigint数据类型是用来表示那些已经超出了number类型最大值的整数值，对于总是被诟病的整数溢出问题，使用了bigint后将完美解决。
bigint是一种基本数据类型（primitivedatatype。JavaScript中可以用Number表示的最大整数为^-，可以写为Number.MAX_SAFE_INTEGER。如果超过了这个界限，可以用BigInt来表示，它可以表示任意大的整数。
在一个整数字面量后加n的方式定义一个BigInt，如：n或者调用函数BigInt()：
BigInt与Number的不同点：
BigInt不能用于Math对象中的方法。BigInt不能和任何Number实例混合运算，两者必须转换成同一种类型。BigInt变量在转换为Number变量时可能会丢失精度。
参考原始数据类型TypeScriptBigIntTypeScriptSymbol