前言
hello world欢迎来到前端的新世界
😜当前文章系列专栏:Typescript
🐱👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力
抽象类
抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。 不同于接口,抽象类可以包含成员的实现细节。abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。
abstract class Animal { abstract makeSound(): void;<font></font> move(): void { console.log('roaming the earch...');<font></font> }<font></font> }<font></font>
抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。 抽象方法的语法与接口方法相似。 两者都是定义方法签名但不包含方法体。 然而,抽象方法必须包含 abstract关键字并且可以包含访问修饰符。
abstract class Department {<font></font> <font></font> constructor(public name: string) {<font></font> }<font></font> <font></font> printName(): void { console.log('Department name: ' + this.name);<font></font> }<font></font> <font></font> abstract printMeeting(): void; // 必须在派生类中实现<font></font> }<font></font> <font></font> class AccountingDepartment extends Department {<font></font> <font></font> constructor() { super('Accounting and Auditing'); // constructors in derived classes must call super()<font></font> }<font></font> <font></font> printMeeting(): void { console.log('The Accounting Department meets each Monday at 10am.');<font></font> }<font></font> <font></font> generateReports(): void { console.log('Generating accounting reports...');<font></font> }<font></font> }<font></font> <font></font> 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<font></font> department.printName();<font></font> department.printMeeting();<font></font> department.generateReports(); // error: method doesn't exist on declared abstract type
高级技巧
构造函数
当你在TypeScript里声明了一个类的时候,实际上同时声明了很多东西。 首先就是类的 实例的类型。
class Greeter {<font></font> greeting: string; constructor(message: string) { this.greeting = message;<font></font> }<font></font> greet() {<font></font> return "Hello, " + this.greeting;<font></font> }<font></font> }<font></font> <font></font> let greeter: Greeter;<font></font> greeter = new Greeter("world"); console.log(greeter.greet());
这里,我们写了let greeter: Greeter,意思是Greeter类的实例的类型是Greeter。 这对于用过其它面向对象语言的程序员来讲已经是老习惯了。
我们也创建了一个叫做构造函数的值。这个函数会在我们使用 new创建类实例的时候被调用。下面我们来看看,上面的代码被编译成JavaScript后是什么样子的:
let Greeter = (function () { function Greeter(message) { this.greeting = message;<font></font> }<font></font> Greeter.prototype.greet = function () { return "Hello, " + this.greeting;<font></font> };<font></font> return Greeter;<font></font> })();<font></font> <font></font> let greeter;<font></font> greeter = new Greeter("world"); console.log(greeter.greet());
上面的代码里,let Greeter将被赋值为构造函数。我们当调用 new并执行了这个函数后,便会得到一个类的实例。这个构造函数也包含了类的所有静态属性。换个角度说,我们可以认为类具有 实例部分与静态部分这两个部分。
让我们稍微改写一下这个例子,看看它们之前的区别:
class Greeter { static standardGreeting = "Hello, there";<font></font> greeting: string;<font></font> greet() {<font></font> if (this.greeting) { return "Hello, " + this.greeting;<font></font> }<font></font> else { return Greeter.standardGreeting;<font></font> }<font></font> }<font></font> }<font></font> <font></font> let greeter1: Greeter;<font></font> greeter1 = new Greeter(); console.log(greeter1.greet());<font></font> <font></font> let greeterMaker: typeof Greeter = Greeter;<font></font> greeterMaker.standardGreeting = "Hey there!";<font></font> <font></font> let greeter2: Greeter = new greeterMaker(); console.log(greeter2.greet());
把类当做接口使用
如上一节里所讲的,类定义会创建两个东西:类的实例类型和一个构造函数。因为类可以创建出类型,所以你能够在允许使用接口的地方使用类。
class Point { x: number; y: number; } interface Point3d extends Point { z: number; } let point3d: Point3d = {x: 1, y: 2, z: 3};
后言
创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力