所有网上购物的网站,创意设计海报,做网站找图片,淮安市建设银行网站(创作不易#xff0c;感谢有你#xff0c;你的支持#xff0c;就是我前行的最大动力#xff0c;如果看完对你有帮助#xff0c;请留下您的足迹#xff09; 目录
TypeScript 高级类型
class 类
class继承
extends
implements
类成员可见性
public
protected …(创作不易感谢有你你的支持就是我前行的最大动力如果看完对你有帮助请留下您的足迹 目录
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(): voidname: string
}class Person implements Singale {name jacksing() {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。
