TypeScript中的类不仅具有ES6中类的全部功能,还提供了修饰符、抽象类等其他新功能。
用法
类使用class
关键字定义:
class Animal {
name: string;
constructor(name: string) {
this.name = name
}
eat(): void {
console.log( `${this.name}在吃东西` )
}
}
const dog = new Animal('nike)
Animal类具有实例属性name、constructor构造函数和实例方法eat。最后通过new关键字创建了一个dog实例。
编译成js:
var Animal = /** @class */ (function() {
function Animal(name) {
this.name = name;
}
Animal.prototype.eat = function() {
console.log(this.name + "\u5728\u5403\u4E1C\u897F");
};
return Animal;
}());
var dog = new Animal('nike));
继承
使用 extends
关键字实现继承,子类中使用 super
关键字来调用父类的构造函数和方法。
class Dog extends Animal {
age: number
constructor(name: string, age: number) {
super(name)
this.age = age
}
}
const dog = new Animal('nike', 3)
调用super()相当于通过上下文的方式调用父类的constructor。
注意:super一定要在构造函数中访问this之前调用。这是TypeScript强制执行的一条重要规则,ES6也是同样的。
私有属性&私有方法
ES6
ES6并没有提供私有属性和方法的定义方式,只是通过变通的方法去模拟。比如:
- 在命名上区别:
在属性和方法名前加 _
。
class Dog {
_name: 'mike',
_bar(val) {
this._name = val
}
foo(val) {
this._bar(val)
}
}
但这种方式仅仅是通过命名区别,在外部仍然可以访问到。
- 将属性和方法移出模块:
let _name = ''
const _bar = val => name = val
class Dog {
setName(val) {
_bar(val)
}
getName() {
return _name
}
}
- 利用
Symbol
值的唯一性,将私有方法的名字命名为一个Symbol值:
const bar = Symbol('bar')
const age = Symbol('age')
class Dog {
// 公有方法
foo(baz) {
this[bar](baz)
}
// 私有方法
[bar](baz) {
this[age] = baz
}
}
以上方式bar和age都是Symbol值,一般情况下无法获取到它们,因此达到了私有方法和私有属性的效果。但是也不是绝对可行,Reflect.ownKeys()依然可以拿到它们。
const dog = new Dog()
Reflect.ownKeys(Dog.prototype)
// [ 'constructor', 'foo', Symbol(bar) ]
TypeScript访问控制修饰符
TypeScript 可以使用三种修饰符,分别是 public、private 和 protected。
public
public 修饰的属性或方法是公有的,可以在父类、子类以及类外部访问到,默认所有的属性和方法都是 public 的。
class Animal {
public name: string;
constructor(name: string) {
this.name = name
}
public skill(): void {
// 父类可以访问name属性
console.log( `${this.name} 看门`)
}
}
class Dog extends Animal {
constructor(name: string) {
super(name)
}
public eat(): void {
// 子类可以访问name属性
console.log( `${this.name} 吃肉`)
}
}
const dog = new Dog('bei')
dog.skill()
dog.eat()
dog.name // 类外部(类实例)可以访问name属性
private
有时我们希望有些属性无法被直接存取,这时就可以用 private 了。
private 修饰的属性或方法是私有的,不能在声明它的类的外部访问。
class Animal {
private name: string
constructor(name: string) {
this.name = name
}
eat(): void {
console.log( `${this.name} 喜欢吃肉` )
}
}
const dog = new Animal('nike')
dog.eat() // 'bei 喜欢吃肉'
dog.name // 报错:Property 'name' is private and only accessible within class 'Animal'.
由此可见私有属性name不可在类外部访问。而且在子类中也是不允许访问的,如下:
class Dog extends Animal {
constructor(name: string) {
super(name)
}
skill(): void {
// console.log(this.name)
// Property 'name' is private and only accessible within class 'Animal'.
}
}
const dog = new Dog('bei')
dog.eat() // 'bei 喜欢吃肉'
当构造函数修饰为 private 时,该类不允许被继承或者实例化:
class Animal {
public name: string;
private constructor (name) {
this.name = name
}
}
// 报错:Constructor of class 'Animal' is private and only accessible within the class declaration.
let cat = new Animal('mike')
class Cat extends Animal {
constructor (name: string) {
super(name)
}
}
// 报错:Cannot extend a class 'Animal'. Class constructor is marked as private.
protected
protected 修饰的属性或方法是受保护的,它和 private 类似,区别是它在子类中也是允许被访问的。
class Animal {
protected name: string
constructor(name: string) {
this.name = name
}
eat(): void {
console.log( `${this.name}吃肉` )
}
}
class Dog extends Animal {
constructor(name: string) {
super(name)
}
skill(): void {
console.log( `${this.name}睡觉` )
}
}
const dog = new Dog('bei')
dog.skill()
dog.eat()
dog.name // 报错: Property 'name' is protected and only accessible within class 'Animal' and its subclasses.
当构造函数修饰为 protected 时,该类只允许被继承,不能在包含它的类外被实例化:
class Animal {
public name: string;
protected constructor (name: string) {
this.name = name
}
}
class Cat extends Animal {
constructor (name: string) {
super(name)
}
}
let cat = new Animal('mike')
// 报错:Constructor of class 'Animal' is protected and only accessible within the class declaration.
类型兼容性
TypeScript使用的是结构性类型系统。 当比较两种不同的类型时,并不在乎它们从哪来,如果所有成员的类型都是兼容的,就认为它们的类型是兼容的。
此处的比较并不是通过 == 或 === 进行比较,而是对期望值(结构)的比较。
以下案例不会有问题:
class Animal1 {
name: string
constructor(name: string) {
this.name = name
}
}
class Animal2 {
name: string
constructor(name: string) {
this.name = name
}
}
// 这种写法不会出错
let a: Animal1=new Animal2('cat')
但是,当我们比较带有 private 或 protected 成员的类型的时候,情况就不同了。 如果其中一个类型里包含一个 private 成员,那么只有当另外一个类型中也存在这样一个 private成员, 并且它们都是来自同一处声明时,我们才认为这两个类型是兼容的。 对于 protected成员也使用这个规则。
具体看下例:
class Animal {
private name: string
constructor(name: string) {
this.name = name
}
}
class Dog extends Animal {
constructor(name: string) {
super(name)
}
}
class Cat {
private name: string
constructor(name: string) {
this.name = name
}
}
let animal = new Animal('animal')
let dog = new Dog('dog')
let cat = new Cat('cat')
// animal 和 dog可以相互赋值
animal = dog
// 但是 dog、animal 不能和cat相互赋值,因为Cat 和 Dog、Animal不兼容,所以以下两个赋值报错
cat = animal
dog = animal
// Type 'Cat' is not assignable to type 'Animal'. Types have separate declarations of a private property 'name'.
上例中因为 Animal 和 Dog 共享了来自 Animal里的私有属性name,因此它们是兼容的。
而 Cat 类,其类型结构看上去与 Animal是相同的。但当把 Cat 的实例赋值给 Animal或Dog的实例时候却得到一个错误,说它们的类型不兼容。虽然 Cat里也有一个私有成员 name,但它明显不是 Animal里面定义的那个。
readonly
readonly是class另一个修饰符,和public、protected、private用于修饰成员的访问权限不同,readonly用来修饰的是成员的修改权限。使用 readonly
关键字(修饰符)将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化
class Animal {
readonly name: string
// 声明时初始化
readonly age: number = 12
constructor(name: string) {
// 构造函数中初始化
this.name = name
}
}
const dog = new Animal('dog')
const cat = new Animal('cat')
cat.name = 'jack' // 报错:Cannot assign to 'name' because it is a read-only property.
注意:如果 readonly 和其他访问修饰符同时存在的话,需要写在其后面。
class Animal {
private readonly name: string
constructor(name: string) {
this.name = name
}
}
参数属性
上面例子中的属性都是在类中声明,在构造函数中初始化。参数属性可以方便地让我们在一个地方定义并初始化一个成员。
class Animal {
readonly age: number = 12
constructor(readonly name: string) {
this.name = name
}
}
参数属性同样适用于private protected public。
存取器
TypeScript的存取器类似于ES6。通过 getter 和 setter 来改变属性的读写行为,有效的控制对对象成员的访问。
class Dog {
private _name: string = 'jack'
get name() {
console.log('取值')
return this._name
}
set name(val) {
console.log('赋值')
this._name = val
}
}
const dog = new Dog()
dog.name // 取值 jack
dog.name = 'mike' // 赋值
存取器注意点:只带有 get 不带有 set 的存取器自动被推断为 readonly
静态属性
静态属性是指class本身的属性。和ES6一样,使用 static
修饰符修饰。
class Dog {
static fullName: string = 'jack Mr'
static getFullName(): void {
console.log(this.fullName)
}
name: string
constructor(name: string) {
this.name = name
}
}
const dog = new Dog('dog')
console.log(Dog.fullName) // 'jack Mr'
Dog.getFullName() // 'dog'
抽象类&抽象方法
abstract
关键用于定义抽象类和抽象方法。
抽象类
抽象类只能用作父类使用,不可直接被实例化。和接口不同,抽象类可以包含class的实现细节。
abstract class Animal {
name: string
constructor(name: string) {
this.name = name
}
}
const dog = new Animal('dog') // 报错:Cannot create an instance of an abstract class.
上述定义了抽象类Animal,直接实例化抽象类Animal时报错了。
抽象方法
抽象方法语法和函数接口相似。两者都是定义方法签名,不包含具体函数体。但是,抽象方法必须包含 abstract 关键字并且可以包含访问修饰符。
抽象方法必须在子类中实现:
abstract class Animal {
name: string
constructor(name: string) {
this.name = name
}
protected abstract eat(): void
}
class Dog extends Animal {
private age: number
constructor(name: string, age: number) {
super(name)
this.age = age
}
protected eat(): void {
console.log( `${this.name} 吃东西` )
}
skill(): void {
this.eat()
}
}
const dog = new Dog('bei', 12)
dog.skill()
类的类型
abstract class Animal {
constructor(public name: string) {
this.name = name
}
abstract eat(): void
}
class Dog extends Animal {
age: number = 12
constructor(name: string) {
super(name)
}
eat(): void {
console.log('吃东西')
},
skill() {
console.log('子类skill')
}
}
// 创建一个对抽象类型的引用
let dog: Animal
// 实例化一个抽象子类
dog = new Dog('bei')
// dog实例方法
dog.eat()
dog.skill() // '子类skill'
以上dog在调用实例方法skill时,虽然输出了结果(子类skill),但ts在编译时会报出错误:Property 'skill' does not exist on type 'Animal'。
假设抽象类Animal也有skill方法,dog调用skill,仍然调用的是子类上的skill方法,但ts编译不会报错。
ES6的new.target属性
ES6为new命令引入target属性,该属性一般用在构造函数之中,返回new命令作用于的那个构造函数。如果构造函数不是通过new命令或Reflect.construct()调用的,new.target会返回undefined,因此这个属性可以用来确定构造函数是怎么调用的。
利用这个特点,可以创建类似TypeScript抽象类。但是无法创建类似的抽象方法。
class Animal {
constructor(name, age) {
if (new.target === Animal) {
throw new Error('本类不能实例化')
} else {
this.name = name
this.age = age
}
}
}
class Dog extends Animal {
constructor(name, age) {
super(name, age)
}
}
const animal = new Animal(); // 报错
const dog = new Dog('nike', 4) // 正确
完结。
有关构造函数、类与接口下文单独总结。