上一章节:4.TypeScript入门之TS常用类型(3)

Ⅳ.TypeScript高级类型

概述

TS中的高级类型有很多,重点学习以下高级类型:

  1. class类
  2. 类型兼容性
  3. 交叉类型
  4. 泛型和 keyof
  5. 索引签名类型 和 索引查询类型
  6. 映射类型

4.1 class类

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

class基本使用,如下:

class Person{}   // 创建一个Person类const p = new Person()   // new一个Person实例,就是创建一个Person{}类的实例对象
// 变量p就是Person{}类的一个实例对象

解释:

  1. 根据TS中的类型推论,可以知道 Person 类的实例对象 p 的类型是 Person类。
  2. TS中的 class不仅提供了 class 的语法功能,也作为一种类型存在。

1.实例属性初始化:
class Person {age: numbergender = '男'// gender:string = '男'
}

解释:

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

2.构造函数(constructor)
class Person {age: numbergender: string// 构造函数的作用就是为类的一个实例属性设置初始值constructor(age: number, gender: string) {this.age = agethis.gender = gender}
}

解释:

  1. 成员初始化(比如,age: number)后,才可以通过this.age来访问实例成员。
  2. 需要为构造函数指定类型注解,否则会被隐式推断为any;构造函数不需要返回值类型。
  3. 构造函数是一种特殊的方法。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值。

eg:

class Person {age: numbergender: stringconstructor(age: number, gender: string) {this.age = age   // this.age拿到类的属性age,"=age"将构造函数的参数age赋值给类的属性agethis.gender = gender}   // 通过构造函数初始化类的属性(age和gender)
}   // 创建Person类const p = new Person(18, '男')   // Person类的初始化p.age   // 调用实例化对象中的属性age

3.class类的实例方法

实例方法和实例属性一样,都是通过实例对象来访问的

class Point {   // 声明Point类x = 10y = 10scale(n: number): void {   // 类的方法scale()this.x *= nthis.y *= n}
}
const p = new Point()   // 实例化对象p.scale(10)   // 通过访问实例化对象p来访问Point类的方法scale()
console.log(p.x, p.y)   // ts-node

解释:方法的类型注解(参数和返回值)与函数用法相同。


4.class类的继承(extends和implements)

类继承的两种方式:

α、extends(继承父类)

class Animal {move() { console.log('Moving along!') }
}
class Dog extends Animal {bark() { console.log('汪!') }
}
const dog = new Dog()

解释:

  1. 通过extends 关键字实现继承
  2. 子类Dog继承父类Animal ,则 Dog 的实例对象 dog 就同时具有了父类 Animal 和 子类 Dog 的所有属性和方法。

β、implements(实现接口)

说明:JS中只有extends,而implements是 TS 提供的。

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

解释:

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

5.class类成员的可见性

类成员的可见性:可以使用TS来控制class的方法或属性对于class外的代码是否可见

可见性修饰符包括:1 public(公有的) 2 protected(受保护的) 3 private(私有的)。

α、public:表示公有的、公开的,公有成员可以被任何地方访问,默认可见性。

class Animal {public move() {console.log('Moving along!')}
}

解释:

  1. 在类属性或方法前面添加 public 关键字,来修饰该属性或方法是公有的。
  2. 因为 public 是默认可见性,所以,可以直接省略

β、protected:表示受保护的,仅对其声明所在类和子类中(非实例对象)可见。

class Animal {   // 父类protected move() {console.log('Moving along!')}   // 这个方法是受保护的
}const animal = new Animal()
// animal.move()报错,受保护的方法对实例不可见!class Dog extends Animal {   // 子类bark() {console.log('汪!')this.move()}
}const dog = new Dog()
// dog.move()报错,受保护的方法对子类的实例不可见!

解释:

  1. 在类属性或方法前面添加 protected 关键字,来修饰该属性或方法是受保护的。
  2. 在子类的方法内部可以通过 this 来访问父类中受保护的成员,但是,对实例不可见!

Ω、private:表示私有的,只在当前类中可见,对实例对象及其子类也是不可见的。

class Animal {private move() {console.log('Moving along!')}walk() {this.move()}
}

解释:

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

6.readonly(只读修饰符)

除了可见性修饰符之外,还有一个常见修饰符就是:readonly(只读修饰符)。

readonly:表示只读,用来防止在构造函数之外对属性进行赋值

class Person {// 注意:只要是readonly来修饰的属性,必须手动提供明确的类型readonly age: number = 18constructor(age: number) {this.age = age}
}

解释:

  1. 使用readonly 关键字修饰该属性是只读的,注意只能修饰属性不能修饰方法
  2. 注意:属性 age 后面的类型注解(比如,此处的 number)如果不加,则 age 的类型为18(字面量类型)。
  3. 接口或者 {} 表示的对象类型,也可以使用 readonly
// 在接口中使用readonly
interface IPerson {readonly name: string
}let obj: IPerson {name: 'jack'
}
obj.name = 'rose'   // 报错,因为name是只读属性
// 在 {} 对象类型中使用readonly
let obj: { readonly name: string } = {name = 'jack'
}
obj.name = 'rose'   // 报错,因为name是只读属性

~~
~~
下一章节:6.TypeScript入门之TS高级类型(类型兼容性、交叉类型和泛型)

5.TypeScript入门之TS高级类型(class类)相关推荐

  1. 1.TypeScript入门之TS初体验(运行TS代码)

    Ⅰ.TypeScript介绍 1.1 TypeScript是什么 TypeScript(简称TS)是JavaScript的超集(JS有的TS都有). TypeScript = Type + JavaS ...

  2. TypeScript真香系列-高级类型

    前言 TypeScript真香系列的内容将参考中文文档,但是文中的例子基本不会和文档中的例子重复,对于一些地方也会深入研究.另外,文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的 ...

  3. TS高级类型 Record、Pick、Partial、Required、Readonly、Exclude、Extract、Omit、NonNullable 使用

    keyof 获取 接口 内所有的 key,即所有属性名 , 获取的是一个 联合类型 interface IPeople {name:string,age?: number,sex: string,}t ...

  4. TS高级类型内置工具类型

    Partial<T> 将泛型 T 中的所有属性转化为可选属性 /*** Make all properties in T optional*/ type Partial<T> ...

  5. PART16 TypeScript高级类型

    文章目录 TypeScript高级类型 class类 构造函数 实例方法 类的继承 类成员的可见性 类型兼容性 接口之间的兼容性 函数之间的兼容性 参数个数 参数类型 返回值类型 交叉类型 泛型 泛型 ...

  6. TypeScript基础入门之高级类型的可辨识联合(Discriminated Unions)

    2019独角兽企业重金招聘Python工程师标准>>> 转发 TypeScript基础入门之高级类型的可辨识联合(Discriminated Unions) 高级类型 可辨识联合(D ...

  7. TypeScript,从0到入门带你进入类型的世界

    从0到入门进入TS的世界 一.什么是TypeScript? 1.编程语言的类型 2.TypeScript究竟是什么? 二.为什么要学习TypeScript? 1.程序更容易理解 2.效率更高 3.更少 ...

  8. th:text为null报错_为vue3.0的学习TS解读高级类型

    知识点摘要 本节课主要关键词为: 自动类型推断 / 类型断言 / 类型别名(type) / 映射类型(Pick/Record等...) / 条件类型(extends) / 类型推断(infer) 自动 ...

  9. boolean类型_10、typescript的高级类型

    所谓高级类型,是typescript为了保证语言的灵活性,所使用的一下语言特性.这些特性有助于我们应对复杂多变的开发场景. 交叉类型 将多个类型合并成一个类型,新的类型将具有所有类型的特性,所以交叉类 ...

最新文章

  1. 视频分辨率无损放大软件 Topaz Video Enhance AI 2.3.0
  2. Exchange2010各角色对软件环境的前提条件
  3. SourceTree 3.0.17如何跳过注册进行安装? — git图形化工具(一)
  4. kerberos的故事2
  5. 加载jsp页面报#{} is not allowed in template text
  6. Matlab实现CNN(二)
  7. Codeforces Round #493 (Div. 2):C. Convert to Ones
  8. 加傲腾内存的电脑PE无法识别本地磁盘解决办法(M.2接口??)
  9. Mac动态桌面壁纸Dynamic Wallpaper惊艳你的桌面
  10. 计算机的ps快捷键,电脑快捷键和PS快捷键
  11. 十大经典排序算法(动图演示)
  12. python针对Excel表格的操作
  13. Ubuntu18.04+TITAN XP+anaconda+cuda10+cudnn+pytorch
  14. 北京移动推低价位流量卡 10元包70M
  15. 家乐福中国独立上市,是苏宁的一颗“定心丸”吗?
  16. python爬虫爬取网易云热歌榜top200
  17. Hive 基础知识(二)
  18. net start npf启用失败问题解决 net start npf 发生系统错误5、net start npf 服务名无效
  19. Autojs脚本开发实战第一课 基础入门
  20. 求向量a在向量b上的投影

热门文章

  1. 2021Java高级面试题总结:java实现银行存取款
  2. 技巧:永久屏蔽谷歌浏览器上的网站通知功能
  3. 大学计算机实验五北理工,北京理工大学计算机实验五报告表
  4. Android自定义时间轴
  5. vim插件——cscope
  6. OSGI框架:模块层、生命周期层、服务层
  7. 虚拟化精华问答 | 为什么云计算需要虚拟化?
  8. 使用UE4模拟冲击力
  9. 如何调试上位机软件与串口进行通信
  10. 认识C++(引别人的)