介绍
传统的JavaScript使用函数和基于原型的继承来构建可复用的组件，ES6引进了基于类的OO编程方法，TypeScript也是使用了最新的ES6语法进行构建的，它能将这些高级特性编译成能在现代浏览器上运行的JavaScript版本。
Classes特性
和
C#或Java类似，包括属性、方法、constructor（构造函数）成员访问符
this,我们在类中用this语法访问类中instance属性
// eg
class Greeter {
greeting: string;
constructor(message: string) {
// this 成员访问符
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
- 通过
new方法创建类的instance,这将调用我们在类中定义的constructor（构造函数），它将完成两件事: 创建一个和Greeter类一样Shape的新对象，然后通过constructor里面的语句Initialize实例属性
let greeter = new Greeter("world");
//
继承
- 通过
extends关键字来继承父类
class Animal {
name: string;
constructor(theName: string) { this.name = theName; }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
// 继承
class Horse extends Animal {}
- 通过
super关键字调用父类（base class）的constructor
class Horse extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 45) {
console.log("Galloping...");
super.move(distanceInMeters);
}
}
- 通过
sub class和base class同名的方法，会重载（override）父类的方法
class Horse extends Animal {
constructor(name: string) { super(name); }
// move 重载 父类的move方法
move(distanceInMeters = 45) {
console.log("Galloping...");
super.move(distanceInMeters);
}
}
访问修饰符
-
public修饰符
默认设置为public，不需要显式的写出（C#等语言需要显式写出），这样无论在子类中还是类外都可以无限制访问base class中的属性或方法
class Animal {
//此时 public也可以不写
public name: string;
public constructor(theName: string) { this.name = theName; }
public move(distanceInMeters: number) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
-
private修饰符
如果在属性或方法前面设置了private，就不能在任何sub class或类外访问到这个属性或方法
class Animal {
private name: string;
constructor(theName: string) { this.name = theName; }
}
new Animal("Cat").name; // Error: 'name' is private;
如果将base class的constructor加上private修饰符，那么派生类也不不能调用super()方法访问，类外也不能实例化:
class Person {
protected name: string;
private constructor(theName: string) { this.name = theName; }
}
let john = new Person('John'); //Error, The constructor is private
TypeScript是一个基于结构（shape）比较的类型检查系统（原文：是一种结构类型系统，我为了更好的理解自作主张扩充），也就是说：
如果类中没有private 或protected等修饰符，那么这个类的成员和要检查的类型相同，那么它们两类型就是相同的。
class BigCar {
name: string;
constructor(theName: string) { this.name = theName; }
}
class SmallCar {
name: string;
constructor(theName: string) { this.name = theName; }
}
// 上面两个类是相同类型的
反之，如果存在private 或protected那么除了检查形状（shape），还要检查private 或protected后属性或方法的申明源originated是否相同。
简而言之就是，它们的private 或protected后属性或方法必须来源同一个申明。
class Animal {
private name: string;
constructor(theName: string) { this.name = theName; }
}
class Rhino extends Animal {
constructor() { super("Rhino"); }
}
class Employee {
private name: string;
constructor(theName: string) { this.name = theName; }
}
let animal = new Animal("Goat");
let rhino = new Rhino();
let employee = new Employee("Bob");
animal = rhino;
animal = employee; // Error: 'Animal' and 'Employee' are not compatible
-
protected修饰符
除了能够在（deriving classes）派生类，也就是子类中访问到base class成员，其他的特性和private基本一致
class Person {
protected name: string;
constructor(name: string) { this.name = name; }
}
class Employee extends Person {
private department: string;
constructor(name: string, department: string) {
super(name);
this.department = department;
}
public getElevatorPitch() {
return `Hello, my name is ${this.name} and I work in ${this.department}.`;
}
}
let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // error
如果给constructor加上protected修饰符，那么base class只能在派生类中被super()调用，在类外不能实例化。
class Person {
protected name: string;
protected constructor(theName: string) { this.name = theName; }
}
// Employee can extend Person
class Employee extends Person {
private department: string;
constructor(name: string, department: string) {
super(name);
this.department = department;
}
public getElevatorPitch() {
return `Hello, my name is ${this.name} and I work in ${this.department}.`;
}
}
let howard = new Employee("Howard", "Sales");
let john = new Person("John"); // Error: The 'Person' constructor is protected
只读修饰符
-
readonly只能在定义时初始化，或者在constructor中初始化
class Octopus {
readonly name: string;
readonly numberOfLegs: number = 8;
constructor (theName: string) {
this.name = theName;
}
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // error! name is readonly.
- 参数属性:
Parameter properties。由于定义readonly属性和在constructor中初始化是一个很常用的属性，所以TypeScript做了一个简化，让你在constructor中的parameter list前面加上readonly修饰符，那么在调用constructor创建一个新类并初始化的时候就能同时创建一个readonly成员属性，并初始化，而不用写在两个地方。
class Octopus {
readonly numberOfLegs: number = 8;
constructor(readonly name: string) {
}
}
//实际上readonly、public、private、protected都能获得以上的create and initialize的效果
访问器Accessors
- TypeScript提供
getters / setters方法，使得你能精细的控制怎么对成员进行操作。 - 通过拦截读或写操作，来避免不必要的bug
let passcode = "secret passcode";
class Employee {
private _fullName: string;
get fullName(): string {
return this._fullName;
}
set fullName(newName: string) {
if (passcode && passcode == "secret passcode") {
this._fullName = newName;
}
else {
console.log("Error: Unauthorized update of employee!");
}
}
}
let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
console.log(employee.fullName);
}
- 只设置了
get而没有set那么这个属性就是只读的readonly - 只用ES5及以上的版本支持get / set
静态属性Static Properties
- 类其实包括两个方面：
instance side和static side，其中在属性或方法前面加上了static以及constructor为static side, 其余为instance side -
static属性通过类名直接获取，constructor通过new关键字创建实例
class Grid {
static origin = {x: 0, y: 0};
calculateDistanceFromOrigin(point: {x: number; y: number;}) {
let xDist = (point.x - Grid.origin.x);
let yDist = (point.y - Grid.origin.y);
return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
}
constructor (public scale: number) { }
}
let grid1 = new Grid(1.0); // 1x scale
let grid2 = new Grid(5.0); // 5x scale
console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));
抽象类Abstract classes
- 抽象类只能是基类，不是继承自其它类或抽象类。只能被继承。
- 抽象类不能直接实例化。
- 相比
Interface，抽象类的成员可以包含具体的细节，例如函数体的具体内容。 - 抽象类中加了
abstract关键字的省略了细节，而且派生类必须实现这些属性。 - 抽象类中可以没有抽象属性
- 有抽象属性的类一定是抽象类，必须带上
abstract关键字
abstract class Department {
constructor(public name: string) {
}
printName(): void {
console.log("Department name: " + this.name);
}
abstract printMeeting(): void; // must be implemented in derived classes
}
class AccountingDepartment extends Department {
constructor() {
super("Accounting and Auditing"); // constructors in derived classes must call super()
}
printMeeting(): void {
console.log("The Accounting Department meets each Monday at 10am.");
}
generateReports(): void {
console.log("Generating accounting reports...");
}
}
let department: Department; // ok to create a reference to an abstract type
department = new Department(); // error: cannot create an instance of an abstract class
department = new AccountingDepartment(); // ok to create and assign a non-abstract subclass
department.printName();
department.printMeeting();
department.generateReports(); // error: method doesn't exist on declared abstract type
高级技巧
- 构造函数
Constructor functions
当在TypeScript定义了一个类的时候，实际上创建了两份申明。 - 这个类的实例类型
- 这个类的构造函数
也就是说，创建一个类，用类名赋予类型检查的时候是相当于一个包含了这个类所有实例成员的一个Interface
而类名赋予变量，则相当于把这个类的构造函数赋值给一个变量，所以用类型检查要用typeof 类名
class Greeter {
static standardGreeting = "Hello, there";
greeting: string;
greet() {
if (this.greeting) {
return "Hello, " + this.greeting;
}
else {
return Greeter.standardGreeting;
}
}
}
//用Greeter作为类的实例的类型来做类型检查
let greeter1: Greeter;
greeter1 = new Greeter();
console.log(greeter1.greet());
//typeof Greeter实际上类的静态属性或方法的类型来做类型检查
let greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = "Hey there!";
let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet());
- 把类当做
interface来用
因为类名用作类型检查的作用和Interface类似
综上。接口可以继承结构，结构可以继承类。类可以继承类，类可以实现接口。再加上一系列修饰符的限制，使得我们可以使用TypeScript完成很多丰富的操作。