当前位置:首页 » 《休闲阅读》 » 正文

前端TypeScript学习day03-TS高级类型

21 人参与  2024年11月22日 08:01  分类 : 《休闲阅读》  评论

点击全文阅读


(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

          

目录

TypeScript 高级类型

class 类

class继承 

extends

implements 

类成员可见性 

public 

protected 

private 

 readonly

兼容性

类型兼容性

接口兼容性 

函数兼容性 


TypeScript 高级类型

class 类

TypeScript 全面支持 ES2015 中引入的 class 关键字,并为其添加了类型注解和其他语法(比如,可见性修饰符等)

解释:

1. 根据 TS 中的类型推论,可以知道 Person 类的实例对象 p 的类型是 Person。

2. TS 中的 class,不仅提供了 class 的语法功能,也作为一种类型存在。

实例属性初始化:

解释:

1. 声明成员 age,类型为 number(没有初始值)。

2. 声明成员 gender,并设置初始值,此时,可省略类型注解(TS 类型推论 为 string 类型)。

构造函数:

解释: 1. 成员初始化(比如,age: number)后,才可以通过 this.age 来访问实例成员。 2. 需要为构造函数指定类型注解,否则会被隐式推断为 any; 构造函数不需要返回值类型 。

class继承 

类继承的两种方式:1 extends (继承父类) 2 implements(实现接口)。 说明:JS 中只有 extends,而 implements 是 TS 提供的。

extends

解释: 1. 通过 extends 关键字实现 继承 。 2. 子类 Dog 继承父类 Animal,则 Dog 的实例对象 dog 就同时具有了父类 Animal 和 子类 Dog 的所有属性和方法。
class Animal {    move() {      console.log('走两步')    }  }    class Dog extends Animal {    name = '二哈'      bark() {      console.log('旺旺!')    }  }    const d = new Dog()  d.move()  d.bark()  console.log(d.name)  

implements 

解释: 1. 通过 implements 关键字让 class 实现接口。 2. Person 类实现接口 Singable 意味着,Person 类中必须提供 Singable 接口中指定的所有方法和属性。

interface Singale {  sing(): void  name: string}class Person implements Singale {  name = 'jack'  sing() {    console.log('你是我的小呀小苹果')  }}

类成员可见性 

类成员可见性:可以使用 TS 来 控制 class 的方法或属性对于 class 外的代码是否可见 。 可见性修饰符包括:1 public(公有的) 2 protected(受保护的) 3 private(私有的)

public 

表示公有的、公开的, 公有成员可以被任何地方访问 ,默认可见性。 解释: 1. 在类属性或方法前面添加 public 关键字,来修饰该属性或方法是共有的。 2. 因为 public 是默认可见性,所以, 可以直接省略 。

protected 

表示 受保护的 ,仅对其声明所在类和子类中(非实例对象)可见。 解释: 1. 在类属性或方法前面添加 protected 关键字,来修饰该属性或方法是受保护的。 2. 在子类的方法内部可以通过 this 来访问父类中受保护的成员,但是, 对实例不可见 !

private 

表示 私有的 , 只在当前类中可见 ,对实例对象以及子类也是不可见的。 解释: 1. 在类属性或方法前面添加 private 关键字,来修饰该属性或方法是私有的。 2. 私有的属性或方法只在当前类中可见,对子类和实例对象也都是不可见的!

 readonly

除了可见性修饰符之外,还有一个常见修饰符就是: readonly(只读修饰符) 。 readonly :表示 只读 , 用来防止在构造函数之外对属性进行赋值 。 解释: 1. 使用 readonly 关键字修饰该属性是只读的,注意 只能修饰属性不能修饰方法 。 2. 注意:属性 age 后面的类型注解(比如,此处的 number)如果不加,则 age 的类型为 18 (字面量类型)。 3. 接口或者 {} 表示的对象类型,也可以使用 readonly 。

兼容性

类型兼容性

两种类型系统:1 Structural Type System(结构化类型系统) 2 Nominal Type System(标明类型系统)。 TS 采用的是结构化类型系统 ,也叫做 duck typing(鸭子类型), 类型检查关注的是值所具有的形状 。 也就是说,在结构类型系统中,如果两个对象具有相同的形状,则认为它们属于同一类型。 解释: 1. Point 和 Point2D 是两个名称不同的类。 2. 变量 p 的类型被显示标注为 Point 类型,但是,它的值却是 Point2D 的实例,并且没有类型错误。 3. 因为 TS 是结构化类型系统,只检查 Point 和 Point2D 的结构是否相同(相同,都具有 x 和 y 两个属性,属性类型也相同)。 4. 但是,如果在 Nominal Type System 中(比如,C#、Java 等),它们是不同的类,类型无法兼容。 注意:在结构化类型系统中,如果两个对象具有相同的形状,则认为它们属于同一类型,这种说法并不准确。 更准确的说法:对于对象类型来说,y 的成员至少与 x 相同,则 x 兼容 y( 成员多的可以赋值给少的 ) 。 解释: 1. Point3D 的成员 至少 与 Point 相同,则 Point 兼容 Point3D。 2. 所以,成员多的 Point3D 可以赋值给成员少的 Point。

接口兼容性 

接口之间的兼容性,类似于 class 。并且,class 和 interface 之间也可以兼容。

函数兼容性 

 函数之间兼容性比较复杂,需要考虑:1 参数个数 2 参数类型 3 返回值类型。

1. 参数个数,参数多的兼容参数少的(或者说,参数少的可以赋值给多的)。 

解释: 1. 参数少的可以赋值给参数多的,所以,f1 可以赋值给 f2。 2. 数组 forEach 方法的第一个参数是回调函数,该示例中类型为:(value: string, index: number, array: string[]) => void。 3. 在 JS 中省略用不到的函数参数实际上是很常见的,这样的使用方式,促成了 TS 中函数类型之间的兼容性 。 4. 并且因为回调函数是有类型的,所以,TS 会自动推导出参数 item、index、array 的类型。

 2. 参数类型,相同位置的参数类型要相同(原始类型)或兼容(对象类型)。

解释:函数类型 F2 兼容函数类型 F1,因为 F1 和 F2 的第一个参数类型相同。 解释: 1. 注意,此处与前面讲到的接口兼容性冲突。 2. 技巧: 将对象拆开,把每个属性看做一个个参数 ,则,参数少的(f2)可以赋值给参数多的(f3)

返回值类型,只关注返回值类型本身即可:

解释: 1. 如果返回值类型是原始类型,此时两个类型要相同,比如,左侧类型 F5 和 F6。 2. 如果返回值类型是对象类型,此时成员多的可以赋值给成员少的,比如,右侧类型 F7 和 F8。

点击全文阅读


本文链接:http://zhangshiyu.com/post/190072.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1