目录四、TypeScript 高级类型概述4.1 class 类4.2 类型兼容性4.3 交叉类型4.4 泛型4.5 索引签名类型四、TypeScript 高级类型概述TS中的高级类型有很多重点学习以下高级类型class 类类型兼容性交叉类型泛型和 keyof索引签名类型和索引查询类型映射类型4.1 class 类TypeScript全面支持ES2015中引入的class关键字并为其添加了类型注解和其他语法比如可见性修饰符等。解释根据TS中的类型推论可以知道 Person 类的实例对象 p 的类型是 Person。TS中的class不仅提供了class的语法功能也作为一种类型存在。实例属性初始化解释声明成员age类型为number没有初始值。声明成员gender并设置初始值此时可省略类型注解TS类型推论为string类型。构造函数解释成员初始化比如age: number后才可以通过this.age来访问实例成员。需要为构造函数指定类型注解否则会被隐式推断为any构造函数不需要返回值类型。实例方法解释方法的类型注解参数和返回值与函数用法相同。类继承的两种方式1. extends继承父类2. implements实现接口。(1) extends继承父类说明JS中只有extends而 implements是TS提供的。解释通过extends关键字实现继承。子类Dog继承父类Animal则Dog的实例对象dog就同时具有了父类Animal和子类Dog的所有属性和方法。(2) implements实现接口解释通过 implements 关键字让class实现接口。Person类实现接口Singable意味着Person类中必须提供Singable接口中指定的所有方法和属性。类成员可见性可以使用TS来控制class的方法或属性对于class外的代码是否可见。可见性修饰符包括1. public公有的2. protected受保护的3. private私有的。1. public表示公有的、公开的公有成员可以被任何地方访问默认可见性。解释在类属性或方法前面添加public关键字来修饰该属性或方法是共有的。因为public是默认可见性所以可以直接省略。2. protected表示受保护的仅对其声明所在类和子类中非实例对象可见。解释在类属性或方法前面添加protected关键字来修饰该属性或方法是受保护的。在子类的方法内部可以通过this来访问父类中受保护的成员但是对实例不可见3. private表示私有的只在当前类中可见对实例对象以及子类也是不可见的。解释在类属性或方法前面添加private关键字来修饰该属性或方法是私有的。私有的属性或方法只在当前类中可见对子类和实例对象也都是不可见的除了可见性修饰符之外还有一个常见修饰符就是readonly只读修饰符。readonly表示只读用来防止在构造函数之外对属性进行赋值。解释使用readonly关键字修饰该属性是只读的注意只能修饰属性不能修饰方法。注意属性age后面的类型注解比如此处的number如果不加则age的类型为18字面量类型。接口或者{}表示的对象类型也可以使用readonly。4.2 类型兼容性两种类型系统1. Structural Type System结构化类型系统2. Nominal TypeSystem标明类型系统。TS采用的是结构化类型系统也叫做duck typing鸭子类型类型检查关注的是值所具有的形状。也就是说在结构类型系统中如果两个对象具有相同的形状则认为它们属于同一类型。解释Point 和 Point2D是两个名称不同的类。变量p的类型被显示标注为Point类型但是它的值却是Point2D的实例并且没有类型错误。因为TS是结构化类型系统只检查 Point 和 Point2D 的结构是否相同相同都具有x和y两个属性属性类型也相同。但是如果在Nominal TypeSystem中比如C#、Java等它们是不同的类类型无法兼容。注意在结构化类型系统中如果两个对象具有相同的形状则认为它们属于同一类型这种说法并不准确。更准确的说法对于对象类型来说y的成员至少与x相同则x兼容y成员多的可以赋值给少的。解释Point3D 的成员至少与Point 相同则 Point 兼容 Point3D。所以成员多的Point3D可以赋值给成员少的Point。除了class之外TS中的其他类型也存在相互兼容的情况包括1. 接口兼容性 2.函数兼容性等。接口之间的兼容性类似于class。并且class和interface之间也可以兼容。函数之间兼容性比较复杂需要考虑1. 参数个数 2. 参数类型 3. 返回值类型。1. 参数个数参数多的兼容参数少的或者说参数少的可以赋值给多的。解释参数少的可以赋值给参数多的所以f1可以赋值给f2。数组 forEach 方法的第一个参数是回调函数该示例中类型为(value: string,index: number, array:string[])void。在JS中省略用不到的函数参数实际上是很常见的这样的使用方式促成了TS中函数类型之间的兼容性。并且因为回调函数是有类型的所以TS会自动推导出参数 item、index、array的类型。2. 参数类型相同位置的参数类型要相同原始类型或兼容对象类型。解释函数类型F2兼容函数类型F1因为F1和F2的第一个参数类型相同。2. 参数类型相同位置的参数类型要相同或兼容。解释注意此处与前面讲到的接口兼容性冲突。技巧将对象拆开把每个属性看做一个个参数则参数少的f2可以赋值给参数多的f3。3. 返回值类型只关注返回值类型本身即可解释如果返回值类型是原始类型此时两个类型要相同比如左侧类型F5和F6。如果返回值类型是对象类型此时成员多的可以赋值给成员少的比如右侧类型F7和F8。4.3 交叉类型交叉类型功能类似于接口继承extends用于组合多个类型为一个类型常用于对象类型。比如解释使用交叉类型后新的类型 PersonDetail 就同时具备了 Person 和 Contact 的所有属性类型。相当于交叉类型和接口继承extends的对比相同点都可以实现对象类型的组合。不同点两种方式实现类型组合时对于同名属性之间处理类型冲突的方式不同。说明以上代码接口继承会报错类型不兼容交叉类型没有错误可以简单的理解为4.4 泛型泛型是可以在保证类型安全前提下让函数等与多种类型一起工作从而实现复用常用于函数、接口、class中。需求创建一个id函数传入什么数据就返回该数据本身也就是说参数和返回值类型相同。比如id(10)调用以上函数就会直接返回10本身。但是该函数只接收数值类型无法用于其他类型。为了能让函数能够接受任意类型可以将参数类型修改为any。但是这样就失去了TS的类型保护类型不安全。泛型在保证类型安全不丢失类型信息的同时可以让函数等与多种不同的类型一起工作灵活可复用。实际上在C#和Java等编程语言中泛型都是用来实现可复用组件功能的主要工具之一。创建泛型函数解释语法在函数名称的后面添加尖括号尖括号中添加类型变量比如此处的Type。类型变量Type是一种特殊类型的变量它处理类型而不是值。该类型变量相当于一个类型容器能够捕获用户提供的类型具体是什么类型由用户调用该函数时指定。因为Type是类型因此可以将其作为函数参数和返回值的类型表示参数和返回值具有相同的类型。类型变量Type可以是任意合法的变量名称。调用泛型函数解释语法在函数名称的后面添加 尖括号尖括号中指定具体的类型比如此处的number。当传入类型number后这个类型就会被函数声明时指定的类型变量Type捕获到。此时Type的类型就是number所以函数id参数和返回值的类型也都是number。同样如果传入类型string函数id参数和返回值的类型就都是string。这样通过泛型就做到了让id函数与多种不同的类型一起工作实现了复用的同时保证了类型安全。简化调用泛型函数解释在调用泛型函数时可以省略类型来简化泛型函数的调用。此时TS内部会采用一种叫做类型参数推断的机制来根据传入的实参自动推断出类型变量Type的类型。比如传入实参10TS会自动推断出变量num的类型number并作为Type的类型。推荐使用这种简化的方式调用泛型函数使代码更短更易于阅读。说明当编译器无法推断类型或者推断的类型不准确时就需要显式地传入类型参数。泛型约束默认情况下泛型函数的类型变量Type可以代表多个类型这导致无法访问任何属性。比如id(a)调用函数时获取参数的长度解释Type可以代表任意类型无法保证一定存在 length 属性比如 number类型就没有 length。此时就需要为泛型添加约束来收缩类型缩窄类型取值范围。添加泛型约束收缩类型主要有以下两种方式1. 指定更加具体的类型 2.添加约束。1. 指定更加具体的类型比如将类型修改为Type[]Type类型的数组因为只要是数组就一定存在length属性因此就可以访问了。2. 添加约束解释创建描述约束的接口Length该接口要求提供length属性。通过extends关键字使用该接口为泛型类型变量添加约束。该约束表示传入的类型必须具有length属性。注意传入的实参比如数组只要有length属性即可这也符合前面讲到的接口的类型兼容性。泛型的类型变量可以有多个并且类型变量之间还可以约束比如第二个类型变量受第一个类型变量约束。比如创建一个函数来获取对象中属性的值解释添加了第二个类型变量Key两个类型变量之间使用逗号分隔。keyof 关键字接收一个对象类型生成其键名称可能是字符串或数字的联合类型。本示例中keyof Type实际上获取的是person对象所有键的联合类型也就是name|age。类型变量Key受Type约束可以理解为Key只能是Type所有键中的任意一个或者说只能访问对象中存在的属性。泛型接口接口也可以配合泛型来使用以增加其灵活性增强其复用性。解释在接口名称的后面添加类型变量那么这个接口就变成了泛型接口。接口的类型变量对接口中所有其他成员可见也就是接口中所有成员都可以使用类型变量。使用泛型接口时需要显式指定具体的类型比如此处的IdFuncnunber。此时id方法的参数和返回值类型都是numberids方法的返回值类型是number[]。实际上JS中的数组在TS中就是一个泛型接口。解释当我们在使用数组时TS会根据数组的不同类型来自动将类型变量设置为相应的类型。技巧可以通过Ctrl鼠标左键Macoption鼠标左键来查看具体的类型信息。泛型类class也可以配合泛型来使用。比如React的class组件的基类Component 就是泛型类不同的组件有不同的props和state。解释React.Component泛型类两个类型变量分别指定props和state类型。创建泛型类解释类似于泛型接口在class名称后面添加类型变量这个类就变成了泛型类。此处的add方法采用的是箭头函数形式的类型书写方式。类似于泛型接口在创建class实例时在类名后面通过类型来指定明确的类型。泛型工具类型TS内置了一些常用的工具类型来简化TS中的一些常见操作。说明它们都是基于泛型实现的泛型适用于多种类型更加通用并且是内置的可以直接在代码中使用。这些工具类型有很多主要学习以下几个PartialTypeReadonlyTypePickType, KeysRecordKeys, Type泛型工具类型-PartialType用来构造创建一个类型将Type的所有属性设置为可选。解释构造出来的新类型PartialProps结构和Props相同但所有属性都变为可选的。泛型工具类型-ReadonlyType用来构造一个类型将Type的所有属性都设置为readonly只读。解释构造出来的新类型ReadonlyProps结构和Props相同但所有属性都变为只读的。当我们想重新给id属性赋值时就会报错无法分配到id因为它是只读属性。泛型工具类型-PickTypeKeys从Type中选择一组属性来构造新类型。解释Pick工具类型有两个类型变量1表示选择谁的属性 2表示选择哪几个属性。其中第二个类型变量如果只选择一个则只传入该属性名即可。第二个类型变量传入的属性只能是第一个类型变量中存在的属性。构造出来的新类型PickProps只有id和title两个属性类型。泛型工具类型-RecordKeys,Type构造一个对象类型属性键为Keys属性类型为Type。解释Record工具类型有两个类型变量1表示对象有哪些属性 2表示对象属性的类型。构建的新对象类型RecordObj表示这个对象有三个属性分别为a/b/c属性值的类型都是string[]。4.5 索引签名类型绝大多数情况下我们都可以在使用对象前就确定对象的结构并为对象添加准确的类型。使用场景当无法确定对象中有哪些属性或者说对象中可以出现任意多个属性此时就用到索引签名类型了。解释使用[key:string]来约束该接口中允许出现的属性名称。表示只要是string类型的属性名称都可以出现在对象中。这样对象obj中就可以出现任意多个属性比如a、b等。key只是一个占位符可以换成任意合法的变量名称。隐藏的前置知识JS中对象{}的键是string类型的。在JS中数组是一类特殊的对象特殊在数组的键索引是数值类型。并且数组也可以出现任意多个元素。所以在数组对应的泛型接口中也用到了索引签名类型。解释MyArray接口模拟原生的数组接口并使用[n:number]来作为索引签名类型。该索引签名类型表示只要是number类型的键索引都可以出现在数组中或者说数组中可以有任意多个元素。同时也符合数组索引是number类型这一前提。映射类型基于旧类型创建新类型对象类型减少重复、提升开发效率。比如类型PropKeys有x/y/z另一个类型Type1中也有x/y/z并且Type1中x/y/z的类型相同这样书写没错但x/y/z重复书写了两次。像这种情况就可以使用映射类型来进行简化。解释映射类型是基于索引签名类型的所以该语法类似于索引签名类型也使用了[]。Key in PropKeys表示Key可以是PropKeys联合类型中的任意一个类似于 forin(let k in obj)。使用映射类型创建的新对象类型Type2和类型Typel结构完全相同。注意映射类型只能在类型别名中使用不能在接口中使用。映射类型除了根据联合类型创建新类型外还可以根据对象类型来创建解释首先先执行 keyof Props 获取到对象类型Props中所有键的联合类型即a|b|c。然后Key in...就表示Key可以是Props中所有的键名称中的任意一个。实际上前面讲到的泛型工具类型比如PartialType都是基于映射类型实现的。比如PartialType的实现解释keyof T即 keyof Props表示获取 Props 的所有键也就是a|b|c。在[]后面添加(问号)表示将这些属性变为可选的以此来实现Partial的功能。冒号后面的T[P]表示获取T中每个键对应的类型。比如如果是a则类型是number如果是b则类型是string。最终新类型PartialProps和旧类型Props结构完全相同只是让所有类型都变为可选了。刚刚用到的T[P]语法在TS中叫做索引查询访问类型。作用用来查询属性的类型。解释Props[a]表示查询类型Props中属性a对应的类型number。所以TypeA的类型为number。注意[]中的属性必须存在于被查询类型中否则就会报错。索引查询类型的其他使用方式同时查询多个索引的类型。解释使用字符串字面量的联合类型获取属性a和b对应的类型结果为string|number。解释使用keyof操作符获取Props中所有键对应的类型结果为string|number|boolean。