5.TypeScript入门之TS高级类型(class类)
上一章节:4.TypeScript入门之TS常用类型(3)
Ⅳ.TypeScript高级类型
概述
TS中的高级类型有很多,重点学习以下高级类型:
- class类
- 类型兼容性
- 交叉类型
- 泛型和 keyof
- 索引签名类型 和 索引查询类型
- 映射类型
4.1 class类
TypeScript 全面支持 ES2015 中引入的class关键字,并为其添加了类型注解和其他语法(比如,成员可见性修饰符等)。
class基本使用,如下:
class Person{} // 创建一个Person类const p = new Person() // new一个Person实例,就是创建一个Person{}类的实例对象
// 变量p就是Person{}类的一个实例对象
解释:
- 根据TS中的类型推论,可以知道 Person 类的实例对象 p 的类型是 Person类。
- TS中的 class ,不仅提供了 class 的语法功能,也作为一种类型存在。
1.实例属性初始化:
class Person {age: numbergender = '男'// gender:string = '男'
}
解释:
- 声明成员age,类型为number(没有初始值)。
- 声明成员gender,并设置初始值,此时,可省略类型注解(TS类型推论为string类型)。
2.构造函数(constructor)
class Person {age: numbergender: string// 构造函数的作用就是为类的一个实例属性设置初始值constructor(age: number, gender: string) {this.age = agethis.gender = gender}
}
解释:
- 成员初始化(比如,age: number)后,才可以通过this.age来访问实例成员。
- 需要为构造函数指定类型注解,否则会被隐式推断为any;构造函数不需要返回值类型。
- 构造函数是一种特殊的方法。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值。
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()
解释:
- 通过extends 关键字实现继承。
- 子类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'
}
解释:
- 通过 implements 关键字让class实现接口。
- Person类实现接口Singable意味着,Person 类中必须提供 Singable 接口中指定的所有方法和属性。
5.class类成员的可见性
类成员的可见性:可以使用TS来控制class的方法或属性对于class外的代码是否可见。
可见性修饰符包括:1 public(公有的) 2 protected(受保护的) 3 private(私有的)。
α、public:表示公有的、公开的,公有成员可以被任何地方访问,默认可见性。
class Animal {public move() {console.log('Moving along!')}
}
解释:
- 在类属性或方法前面添加 public 关键字,来修饰该属性或方法是公有的。
- 因为 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()报错,受保护的方法对子类的实例不可见!
解释:
- 在类属性或方法前面添加 protected 关键字,来修饰该属性或方法是受保护的。
- 在子类的方法内部可以通过 this 来访问父类中受保护的成员,但是,对实例不可见!
Ω、private:表示私有的,只在当前类中可见,对实例对象及其子类也是不可见的。
class Animal {private move() {console.log('Moving along!')}walk() {this.move()}
}
解释:
- 在类属性或方法前面添加 private 关键字,来修饰该属性或方法是私有的。
- 私有的属性或方法只在当前类中可见,对子类和实例对象都是不可见的!
6.readonly(只读修饰符)
除了可见性修饰符之外,还有一个常见修饰符就是:readonly(只读修饰符)。
readonly:表示只读,用来防止在构造函数之外对属性进行赋值。
class Person {// 注意:只要是readonly来修饰的属性,必须手动提供明确的类型readonly age: number = 18constructor(age: number) {this.age = age}
}
解释:
- 使用readonly 关键字修饰该属性是只读的,注意只能修饰属性不能修饰方法。
- 注意:属性 age 后面的类型注解(比如,此处的 number)如果不加,则 age 的类型为18(字面量类型)。
- 接口或者 {} 表示的对象类型,也可以使用 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.TypeScript入门之TS初体验(运行TS代码)
Ⅰ.TypeScript介绍 1.1 TypeScript是什么 TypeScript(简称TS)是JavaScript的超集(JS有的TS都有). TypeScript = Type + JavaS ...
- TypeScript真香系列-高级类型
前言 TypeScript真香系列的内容将参考中文文档,但是文中的例子基本不会和文档中的例子重复,对于一些地方也会深入研究.另外,文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的 ...
- TS高级类型 Record、Pick、Partial、Required、Readonly、Exclude、Extract、Omit、NonNullable 使用
keyof 获取 接口 内所有的 key,即所有属性名 , 获取的是一个 联合类型 interface IPeople {name:string,age?: number,sex: string,}t ...
- TS高级类型内置工具类型
Partial<T> 将泛型 T 中的所有属性转化为可选属性 /*** Make all properties in T optional*/ type Partial<T> ...
- PART16 TypeScript高级类型
文章目录 TypeScript高级类型 class类 构造函数 实例方法 类的继承 类成员的可见性 类型兼容性 接口之间的兼容性 函数之间的兼容性 参数个数 参数类型 返回值类型 交叉类型 泛型 泛型 ...
- TypeScript基础入门之高级类型的可辨识联合(Discriminated Unions)
2019独角兽企业重金招聘Python工程师标准>>> 转发 TypeScript基础入门之高级类型的可辨识联合(Discriminated Unions) 高级类型 可辨识联合(D ...
- TypeScript,从0到入门带你进入类型的世界
从0到入门进入TS的世界 一.什么是TypeScript? 1.编程语言的类型 2.TypeScript究竟是什么? 二.为什么要学习TypeScript? 1.程序更容易理解 2.效率更高 3.更少 ...
- th:text为null报错_为vue3.0的学习TS解读高级类型
知识点摘要 本节课主要关键词为: 自动类型推断 / 类型断言 / 类型别名(type) / 映射类型(Pick/Record等...) / 条件类型(extends) / 类型推断(infer) 自动 ...
- boolean类型_10、typescript的高级类型
所谓高级类型,是typescript为了保证语言的灵活性,所使用的一下语言特性.这些特性有助于我们应对复杂多变的开发场景. 交叉类型 将多个类型合并成一个类型,新的类型将具有所有类型的特性,所以交叉类 ...
最新文章
- 视频分辨率无损放大软件 Topaz Video Enhance AI 2.3.0
- Exchange2010各角色对软件环境的前提条件
- SourceTree 3.0.17如何跳过注册进行安装? — git图形化工具(一)
- kerberos的故事2
- 加载jsp页面报#{} is not allowed in template text
- Matlab实现CNN(二)
- Codeforces Round #493 (Div. 2):C. Convert to Ones
- 加傲腾内存的电脑PE无法识别本地磁盘解决办法(M.2接口??)
- Mac动态桌面壁纸Dynamic Wallpaper惊艳你的桌面
- 计算机的ps快捷键,电脑快捷键和PS快捷键
- 十大经典排序算法(动图演示)
- python针对Excel表格的操作
- Ubuntu18.04+TITAN XP+anaconda+cuda10+cudnn+pytorch
- 北京移动推低价位流量卡 10元包70M
- 家乐福中国独立上市,是苏宁的一颗“定心丸”吗?
- python爬虫爬取网易云热歌榜top200
- Hive 基础知识(二)
- net start npf启用失败问题解决 net start npf 发生系统错误5、net start npf 服务名无效
- Autojs脚本开发实战第一课 基础入门
- 求向量a在向量b上的投影