- Published on
Classes & Interfaces
- Authors
- Name
- Jack Fan
Classes & Interfaces
Create first Class
如何在 TypeScript 里创造类
class Department {
name: string;
constructor(n: string) {
this.name = n;
}
}
const accounting = new Department("Accounting");
console.log(accounting);
在这里我们指明了 name
的类型为 string
,但是实际编译到 es6 的 JavaScript 里,是不会有这一行限制的。
class Department {
constructor(n) {
this.name = n;
}
}
Constructor Functions & The this Keyword
来看一下 this
关键词
class Department {
name: string;
constructor(n: string) {
this.name = n;
}
describe() {
console.log("Department: " + this.name);
}
}
const accounting = new Department("Accounting");
const accountingCopy = { describe: accounting.describe };
accountingCopy.describe();
如果运行这段代码,得到的结果会是什么? Department: undefined
为什么是 undefined? 因为我们只是把 accounting
的这个方法的引用 copy 了过去,在实际运行的 accountingCopy
的 Object 里,并没有 name 这个属性。this 指向的,是运行这个函数的对象。
class Department {
name: string;
constructor(n: string) {
this.name = n;
}
describe(this: Department) {
console.log("Department: " + this.name);
}
}
const accounting = new Department("Accounting");
const accountingCopy = {
name: "DUMMY",
describe: accounting.describe,
};
accountingCopy.describe();
我们在这里给 describe
加上了一个参数,this
,还给它限定了类型,为 Department
。TypeScript 会分析这段代码,知道这个方法,应该什么样的 object 下才能被调用。 如果这里吧 accountingCopy
的 name
去掉,会出现错误,因为 TypeScript 知道它和 Department
类的应该有的属性不一样。
private and public Access Modifiers
TypeScript 提供了 public 和 private,这在 JavaScript 中没有。
class Department {
public name: string;
private employees: string[] = [];
constructor(n: string) {
this.name = n;
}
describe(this: Department) {
console.log("Department: " + this.name);
}
addEmployee(employee: string) {
this.employees.push(employee);
}
}
const accounting = new Department("Accounting");
// accounting.employees=[];
默认情况下,声明的变量都为 public,设置了 private 的变量,无法从外部直接访问 。
Shorthand Initialization
快速的初始化,从而摆脱重复的赋值
class Department {
private name: string;
private id: string;
constructor(id: string, name: string) {
this.name = name;
this.id = id;
}
}
如果我们初始化的值很多,这样不断地反复赋值会很幸苦,TypeScript 提供了更快捷的办法。
class Department {
// private name: string;
// private id: string;
constructor(private id: string, public name: string) {
// this.name = name;
// this.id = id;
}
}
直接在构造函数里一次性声明清楚 private 还是 public,会创建同名值并赋值。
Readonly
只读属性,当你确保一个属性不会再更改且不希望更改,使用 readonly
class Department {
constructor(private readonly id: string, public name: string) {}
}
Inheritance
class Department {
private employees: string[] = [];
constructor(private readonly id: string, public name: string) {}
describe(this: Department) {
console.log(`Department (${this.id}): ${this.name}`);
}
addEmployee(employee: string) {
this.employees.push(employee);
}
printEmployeeInformation() {
console.log(this.employees.length);
console.log(this.employees);
}
}
class ITDepartment extends Department {
admins: string[];
constructor(id: string, admins: string[]) {
super(id, "IT"); // Call the constructor function of the base Class at first
this.admins = admins;
}
}
TypeScript 的继承和 JavaScript 基本一样,使用 extends 关键字,同时调用 super 方法。 super()会在构建这个类之前先运行父类的 constructor。 同样也可以自己在新类中添加方法。
Overriding Properties & The protected Modifier
在继承类中可以重写父类的方法。 父类的属性设置为 protected 而不是 private,即可在子类做修改。
class Department {
protected employees: string[] = [];
constructor(private readonly id: string, public name: string) {}
addEmployee(employee: string) {
// validation etc
// this.id = 'd2';
this.employees.push(employee);
}
}
class ITDepartment extends Department {
constructor(id: string) {
super(id, "IT");
}
addEmployee(employee: string) {
this.employees.push(employee);
}
}
Getter & Setter
Getter 用于获取类中的特定属性,设定一个 getter 可以在获取时候内部做处理后再返回。 Setter 可以设置类中的属性。使用的时候就和直接设置属性值一样。也可以在内部处理。
class Department {
protected employees: string[] = [];
get reverseEmployees() {
return this.employees.reverse();
}
set setReverseEmployees(a: string[]) {
this.employees = a.reverse();
}
constructor(private readonly id: string, public name: string) {}
addEmployee(employee: string) {
// validation etc
// this.id = 'd2';
this.employees.push(employee);
}
}
const d = new Department("1", "ad");
console.log(d.reverseEmployees);
d.setReverseEmployees = ["1", "2"];
Static
类中有静态方法,他可以不用创造实例,直接调用,就像 Math
类的 PI
,可以直接获取,或者 pow
方法,直接调用。
class Department {
static fiscialYear = 2020;
protected employees: string[] = [];
constructor(private readonly id: string, public name: string) {
// console.log(this.fiscialYear); Not available in a instance
console.log(Department.fiscialYear);
}
addEmployee(employee: string) {
this.employees.push(employee);
}
static createEmployee(name: string) {
return { name };
}
}
const pi = Math.PI;
const p = Math.pow(1, 2);
const employee = Department.createEmployee("Max");
console.log(Department.fiscialYear);
注意,在构造函数可以看到,如果要输出 fiscialYear
变量,不可以使用 this
,因为 static 属性不属于任何一个实例。所以直接从 Department 调用就好。
Abstract Classes
当你想确保某种方法可用,而且对于每一个具体的,基于这个类继承的所有子类的这个方法的具体实现都不一样,也就是我们不能提供一个通用的方法的时候,但你想强制这个方法存在且要求子类实现,使用 abstract。
当你想强制所有基于其他类的类,分享一些常用的方法或属性,同时你不想提供具体的值或者实现,使用 abstract。
abstract class Department {
constructor(protected readonly id: string, public name: string) {}
abstract describe(this: Department): void;
}
在 class 关键字前添加 abstract,同时再要 abstract 的方法或者属性前也添加 abstract,不需要提供具体实现,只需要写清楚返回类型和参数类型即可。
注意:被 abstract 的类不可以再实例化,也就是无法创建一个新的基于 Department 的 Object。
class ITDepartment extends Department {
constructor(id: string, admins: string[]) {
super(id, "IT");
}
describe() {
console.log("IT Department - ID: " + this.id);
}
}
本例中,其扩展类必须补充完整 describe 方法,不然会报错。
Singletons & Private Constructor
当需要一个类只有一个具体的实例化对象时候,使用单例模式 Singletons
class Department {
static instance: Department;
private constructor(private readonly id: string, public name: string) {}
static getInstance() {
if (Department.instance) return this.instance;
this.instance = new Department("1", "n");
return this.instance;
}
}
const theOnlyInstance = Department.getInstance();
首先设置 constructor 为 private,使其无法从外直接调用。 随后建立一个 static 变量,instance。用于储存唯一的,实例化的对象。 最后添加静态方法,实例存在就返回它,不存在就新建一个再返回。
A First Interface
使用 Interface 去定义一个 Object 的结构,他应该拥有什么属性,每个属性又该有什么特点,同时也可以使用它来做类型检查。
interface Person {
name: string;
age: number;
greet(phrase: string): void;
}
let user1: Person;
user1 = {
name: "Jack",
age: 28,
greet(phrase: string) {
console.log(phrase);
},
};
Using Interface with Classes
我们已经有 type 了,为什么还需要 Interface?
type Person = {
name: string;
age: number;
greet(phrase: string): void;
};
有时候可以互换,但是 Interface 之可以用于描述对象的结构。当定义某些东西为接口的时候,Interface 会更加清晰的定义对象的结构。
interface Greetable {
name: string;
greet(phrase: string): void;
}
class Person implements Greetable {
name: string;
constructor(name: string) {
this.name = name;
}
greet(phrase: string) {
console.log(phrase);
}
}
let user: Greetable;
user = new Person("Jack");
我们定义了 Interface 后在 Class 使用,因为我们希望这个 Class 有这个结构,使用 implements
关键字。可以同时应用多个 Interface,逗号相连即可。
可以看到,user
的类型设置为 Greetable,但可以新机按一个 Person 实例,因为 Person 就是按照 Greetable 建的。
Interface 和 Abstract Class 有区别。Interface 内不能提供任何具体实现,Abstract Class 除了抽象部分方法外,内部可以写完整的函数功能。
Readonly Interface Properties
在 Interface 里设置一个属性为 readonly,在建 Class 时如果应用,那么这个属性会自动只读
interface Greetable {
readonly name: string;
}
class Person implements Greetable {
name: string;
constructor(name: string) {
this.name = name;
}
}
let user: Greetable;
user = new Person("Jack");
user.name = "Fan"; // !!ERROR!!
Extending Interface
interface Named {
readonly name: string;
}
interface Greetable extends Named {
greet(phrase: string): void;
}
如果我们确定一个新的 Interface 一定会拥有一部分和另一个 Interface 一样的内容,那可以做扩展。可以同时扩展多个,使用逗号隔开。
Interface as Function Type
也可以使用 Interface 作为函数类型。
// type AddFn = (a: number, b: number) => number;
interface AddFn {
(a: number, b: number): number;
}
let add: AddFn;
add = (a: number, b: number) => a + b;
注意和 type 的区别,最后用的是:
而不是=>
。
Optional Parameters & Properties
通过?
操作符来让一个属性变得可选,不一定要具备。其可以是函数,也可以是参数,也可以是属性变量。
interface Named {
readonly name?: string;
outputName?: string;
}
interface Greetable extends Named {
greet?(phrase: string): void;
}
class Person implements Greetable {
name?: string;
constructor(n?: string) {
if (n) this.name = n;
}
}
Compiling Interfaces to JavaScript
如果编译 TypeScript 文件,找到对应的 JavaScript 文件其实会发现 Interface 部分什么内容都没有被编译。JavaScript 并没有这个概念,这只是 TypeScript 给我们提供的工具而已。