TypeScript内置类型一览在上一篇文章中,基本的TS开发项目可以说是大势所趋。用过TS开发项目的同学基本都说回不去了。今天,让我们来了解下TypeScript官方内置类型,让你Partial(部分)/***让T中的所有属性都可选*/typePartial={[PinkeyofT]?:T[P];};传入类型中的所有属性变为可选用法示例exportinterfaceStudent{name:string;age:number;}conststudent1:Student={}conststudent2:Partial={}变量student1的类型是Student。默认情况下Student的所有属性都不能为空,都会报错。Student2将不是Required(必需)/***使T中的所有属性成为必需*/typeRequired={[PinkeyofT]-?:T[P];};与Partial相反,它使传入类型中的所有属性都是强制性的。ExampleexportinterfaceStudent{name?:string;年龄?:number;}conststudent1:Student={}conststudent2:Required={}变量student1的类型为Student,Student的所有属性默认为nullable,都不会报错,student2会报错errorReadonly(只读)/***使T中的所有属性只读*/typeReadonly={readonly[PinkeyofT]:T[P];};作用是使传入类型中的所有属性变为Allareread-only(属性不可修改)useexampleexportinterfaceStudent{name:string;银e:number;}conststudent1:Student={name:'张三',age:20}student1.age=21conststudent2:Readonly={name:'李四',age:20}student2.age=21重新赋值student1的属性age不会报错,重新赋值student2的属性age会报错,因为student2的所有属性都是只读的Pick(selection)/***FromT,pickasetof键在联合K中的属性*/typePick={[PinK]:T[P];};作用是选择传入类型中的一些属性,组成一个新的类型。示例导出接口Student{name:string;age:number;}conststudent1:Student={name:'张三',age:20}conststudent2:Pick={name:'李四'}conststudent3:Pick={name:'WangWu',age:20}变量student1可以有name和age的所有属性,变量student2只能有属性name,变量student3加上属性age会报错Record(record)/***构造一个具有类型T的一组属性K的类型*/typeRecord={[PinK]:T;};作用是构造一个类型,这个类型用来描述一个对象,其属性都具有相同的类型Exampleexportconststudent1:Record={name:'张三',age:20}Record应该是日期它是一种经常使用的内置类型。它主要用于描述对象。一般建议不要用Object来描述对象,而是用Record代替。Record几乎可以说是万能的。Exclude(exclude)/***从T中排除那些可赋值给U的类型*/typeExclude=TextendsU?从不:T;对于关节类型(接口没用),用人话来说,去同留差使用示例exporttypePersonAttr='name'|'年龄'导出类型StudentAttr='姓名'|'年龄'|'类'|'school'conststudent1:Excludestudent1只能赋值class'或'school'Extract(取出)/***从T中提取那些可以赋值给U的类型*/typeExtract=T扩展U?T:从不;与Exclude相反,对于关节类型,Exclude不同的,取出相同的用法示例exporttypePersonAttr='name'|'年龄'导出类型StudentAttr='姓名'|'年龄'|'类'|'school'conststudent1:Extractstudent1只能赋值为'name'或'age'Omit(省略)/***构造一个类型,除了类型K中的属性外,都具有T的属性。*/typeOmit=Pick>;传入一个类型,这个类型的几个属性,省略传入属性组成一个新的类型ExampleexportinterfaceStudent{name:string;年龄:数字;类:字符串;学校:字符串;}导出类型PersonAttr='name'|'年龄'导出类型StudentAttr='姓名'|'年龄'|'类'|'school'conststudent1:Omit={}student1报错,说明没有属性'name','age'NonNullable(cannotbenull)/***ExcludenullandundefinedfromT*/typeNonNullable=Textendsnull|不明确的?从不:T;字面意思,不能为空ExampleexportinterfaceStudent{name:string;年龄:数字;}conststudent1:NonNullable=null如果student1被赋值为null,会报错(tsconfig.json配置文件中开启类型检查,"skipLibCheck":false)Parameters(参数)/***获取a的参数元组中的函数类型*/typeParametersany>=Textends(...args:inferP)=>any?P:从不;类型使用示例exportinterfaceStudent{name:string;age:number;}exportinterfaceStudentFunc{(name:string,age:number):Student}conststudent1:Parametersstudent1的类型是[name:string,age:number]ConstructorParameters(构造参数)/***获取元组中一个构造函数类型的参数*/typeConstructorParametersany>=Textendsabstractnew(...args:inferP)=>any?P:从不;获取传入构造函数的参数类型ExampleexportinterfaceStudent{name:string;age:number;}exportinterfaceStudentConstructor{new(name:string,age:number):Student}conststudent1:ConstructorParametersstudent1的类型为[name:string,age:number]ReturnType(returntype)/***获取函数类型的返回类型*/typeReturnTypeany>=Textends(...args:any)=>inferR?R:any;获取传入函数的返回类型ExampleexportinterfaceStudent{name:string;age:number;}exportinterfaceStudentFunc{(name:string,age:number):Student}conststudent1:ReturnType={}student1of类型为StudentInstanceType(构造返回类型,实例类型)/***获取一个构造函数类型的返回类型*/typeInstanceTypeany>=Textendsabstractnew(...args:any)=>推断R?R:任何;获取传递的构造函数使用示例的返回类型constStudent=class{name:string;年龄:数字;constructor(name:string,age:number){this.name=namethis.age=age}showInfo(){console.log('name:',this.name,'age:',this.age);}}conststudent1:InstanceType=newStudent('张三',20)我个人认为这是一个非常有用的内置类型。目前,类在前端项目中使用的越来越多。在TS中,class其实可以作为类型声明的空间,用来描述对象类型,不过一般来说,好像很少这么用。一般多用接口或类型。导出类学生{名称:字符串;age:number;}所以一般直接用class作为变量声明空间,但是对于classnew的实例,如何描述它的类型,上面说了,直接conststudent1:Student肯定会报错,因为Student是用作变量声明空间,而不是类型声明空间(听起来很容易绕过),此时,可以使用InstanceType完美解决问题Uppercase(大写)/***将字符串字面量类型转为大写*/typeUppercase=intrinsic;大写示例使用导出类型StudentSexType='male'|'female'conststudentSex:Uppercase='MALE'Lowercase(小写)/***将字符串文字类型转换为小写*/typeLowercase=intrinsic;小写使用示例导出类型StudentSexType='MALE'|'FEMALE'conststudentSex:Lowercase=''Capitalize(首字母大写)/***将字符串文字类型的第一个字符转换为大写*/typeCapitalize=intrinsic;第一个字母变为大写使用示例exporttypeStudentSexType='male'|将字符串文字类型转换为小写*/typeUncapitalize=intrinsic;第一个字母变成小写用法示例exporttypeStudentSexType='MALE'|'FEMALE'conststudentSex:Uncapitalize=''