【HarmonyOS NEXT鸿蒙系统应用开发TypeScript(TS)开发基础教程】-第8课时-T ...

传统的JavaScript的步伐利用函数和基于原型的继承来创建可重用的组件，但对于熟悉利用面向对象方式的步伐员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来从ECMAScript 2015，也就是ECMAScript 6开始，JavaScript步伐员将能够利用基于类的面向对象的方式。利用TypeScript，我们答应开发者现在就利用这些特性，并且编译后的JavaScript可以在全部主流浏览器和平台上运行，而不需要等到下个JavaScript的版本。
   类

   下面看一个利用类的例子：
  

1. class Greeter {
2.     greeting: string;
3.     constructor(message: string) {
4.         this.greeting = message;
5.     }
6.     greet() {
7.         return "Hello, " + this.greeting;
8.     }
9. }
11. let greeter = new Greeter("world");

复制代码

  如果你利用过C＃或Java，你会对这种语法非常熟悉。我们声明一个  Greeter类。这个类有3个成员：一个叫做greeting的属性，一个构造函数和一个greet方法。
   你会注意到，我们在引用任何一个类成员的时间都用了this。它表示我们访问的是类的成员。
   末了一行，我们利用new构造了Greeter类的一个实例。它会调用之前界说的构造函数，创建一个  Greeter范例的新对象，并执行构造函数初始化它。
   继承

   在TypeScript里，我们可以利用常用的面向对象模式。固然，基于类的步伐计划中最基本的模式是答应利用继承来扩展现有的类。
   看下面的例子：
  

1. class Animal {
2.     name:string;
3.     constructor(theName: string) { this.name = theName; }
4.     move(distanceInMeters: number = 0) {
5.         console.log(`${this.name} moved ${distanceInMeters}m.`);
6.     }
7. }
9. class Snake extends Animal {
10.     constructor(name: string) { super(name); }
11.     move(distanceInMeters = 5) {
12.         console.log("Slithering...");
13.         super.move(distanceInMeters);
14.     }
15. }
17. class Horse extends Animal {
18.     constructor(name: string) { super(name); }
19.     move(distanceInMeters = 45) {
20.         console.log("Galloping...");
21.         super.move(distanceInMeters);
22.     }
23. }
25. let sam = new Snake("Sammy the Python");
26. let tom: Animal = new Horse("Tommy the Palomino");
28. sam.move();
29. tom.move(34);

复制代码

  
   这个例子展示了TypeScript中继承的一些特征，它们与其它语言类似。 我们利用 extends关键字来创建子类。你可以看到Horse和Snake类是基类Animal的子类，并且可以访问其属性和方法。
   包含构造函数的派生类必须调用super()，它会执行基类的构造方法。
   这个例子演示了如何在子类里可以重写父类的方法。 Snake类和Horse类都创建了move方法，它们重写了从Animal继承来的move方法，使得move方法根据不同的类而具有不同的功能。 注意，即使 tom被声明为Animal范例，但因为它的值是Horse，tom.move(34)会调用Horse里的重写方法：
  

1. Slithering...
2. Sammy the Python moved 5m.
3. Galloping...
4. Tommy the Palomino moved 34m.

复制代码

  
   公共，私有与受掩护的修饰符

   默认为public

   在上面的例子里，我们可以自由的访问步伐里界说的成员。 如果你对其它语言中的类比较相识，就会注意到我们在之前的代码里并没有利用 public来做修饰；例如，C#要求必须明确地利用public指定成员是可见的。 在TypeScript里，成员都默认为 public。
   你也可以明确的将一个成员标记成public。 我们可以用下面的方式来重写上面的 Animal类：
  

1. class Animal {
2.     public name: string;
3.     public constructor(theName: string) { this.name = theName; }
4.     public move(distanceInMeters: number) {
5.         console.log(`${this.name} moved ${distanceInMeters}m.`);
6.     }
7. }

复制代码

  
   明白private

   当成员被标记成private时，它就不能在声明它的类的外部访问。好比：
  

1. class Animal {
2.     private name: string;
3.     constructor(theName: string) { this.name = theName; }
4. }
6. new Animal("Cat").name; // Error: 'name' is private;

复制代码

  
   TypeScript利用的是结构性范例系统。 当我们比较两种不同的范例时，并不在乎它们从何处而来，如果全部成员的范例都是兼容的，我们就认为它们的范例是兼容的。
   然而，当我们比较带有private或protected成员的范例的时间，环境就不同了。 如果此中一个范例里包含一个 private成员，那么只有当别的一个范例中也存在这样一个private成员， 并且它们都是来自同一处声明时，我们才认为这两个范例是兼容的。 对于 protected成员也利用这个规则。
   下面来看一个例子，更好地阐明白这一点：
  

1. class Animal {
2.     private name: string;
3.     constructor(theName: string) { this.name = theName; }
4. }
6. class Rhino extends Animal {
7.     constructor() { super("Rhino"); }
8. }
10. class Employee {
11.     private name: string;
12.     constructor(theName: string) { this.name = theName; }
13. }
15. let animal = new Animal("Goat");
16. let rhino = new Rhino();
17. let employee = new Employee("Bob");
19. animal = rhino;
20. animal = employee; // Error: Animal and Employee are not compatible

复制代码

  
   这个例子中有Animal和Rhino两个类，Rhino是Animal类的子类。 还有一个 Employee类，其范例看上去与Animal是相同的。 我们创建了几个这些类的实例，并相互赋值来看看会发生什么。 因为 Animal和Rhino共享了来自Animal里的私有成员界说private name: string，因此它们是兼容的。 然而 Employee却不是这样。当把Employee赋值给Animal的时间，得到一个错误，说它们的范例不兼容。 只管 Employee里也有一个私有成员name，但它明显不是Animal内里界说的那个。
   明白protected

   protected修饰符与private修饰符的行为很相似，但有一点不同，protected成员在派生类中仍然可以访问。例如：
  

1. class Person {
2.     protected name: string;
3.     constructor(name: string) { this.name = name; }
4. }
6. class Employee extends Person {
7.     private department: string;
9.     constructor(name: string, department: string) {
10.         super(name)
11.         this.department = department;
12.     }
14.     public getElevatorPitch() {
15.         return `Hello, my name is ${this.name} and I work in ${this.department}.`;
16.     }
17. }
19. let howard = new Employee("Howard", "Sales");
20. console.log(howard.getElevatorPitch());
21. console.log(howard.name); // error

复制代码

  
   注意，我们不能在Person类外利用name，但是我们仍然可以通过Employee类的实例方法访问，因为Employee是由Person派生而来的。
   构造函数也可以被标记成protected。 这意味着这个类不能在包含它的类外被实例化，但是能被继承。好比，
  

1. class Person {
2.     protected name: string;
3.     protected constructor(theName: string) { this.name = theName; }
4. }
6. // Employee can extend Person
7. class Employee extends Person {
8.     private department: string;
10.     constructor(name: string, department: string) {
11.         super(name);
12.         this.department = department;
13.     }
15.     public getElevatorPitch() {
16.         return `Hello, my name is ${this.name} and I work in ${this.department}.`;
17.     }
18. }
20. let howard = new Employee("Howard", "Sales");
21. let john = new Person("John"); // Error: The 'Person' constructor is protected

复制代码

  
   readonly修饰符

   你可以利用readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。
  

1. class Octopus {
2.     readonly name: string;
3.     readonly numberOfLegs: number = 8;
4.     constructor (theName: string) {
5.         this.name = theName;
6.     }
7. }
8. let dad = new Octopus("Man with the 8 strong legs");
9. dad.name = "Man with the 3-piece suit"; // error! name is readonly.

复制代码

  
   参数属性

   在上面的例子中，我们不得不界说一个受掩护的成员name和一个构造函数参数theName在Person类里，并且立刻给name和theName赋值。 这种环境经常会遇到。 参数属性可以方便地让我们在一个地方界说并初始化一个成员。 下面的例子是对之前 Animal类的修改版，利用了参数属性：
  

1. class Animal {
2.     constructor(private name: string) { }
3.     move(distanceInMeters: number) {
4.         console.log(`${this.name} moved ${distanceInMeters}m.`);
5.     }
6. }

复制代码

  
   注意看我们是如何舍弃了theName，仅在构造函数里利用private name: string参数来创建和初始化name成员。 我们把声明和赋值归并至一处。
   参数属性通过给构造函数参数添加一个访问限定符来声明。 利用 private限定一个参数属性会声明并初始化一个私有成员；对于public和protected来说也是一样。
   存取器

   TypeScript支持通过getters/setters来截取对对象成员的访问。 它能帮助你有效的控制对对象成员的访问。
   下面来看如何把一个简单的类改写成利用get和set。 起首，我们从一个没有利用存取器的例子开始。
  

1. class Employee {
2.     fullName: string;
3. }
5. let employee = new Employee();
6. employee.fullName = "Bob Smith";
7. if (employee.fullName) {
8.     console.log(employee.fullName);
9. }

复制代码

  
   我们可以随意的设置fullName，这是非常方便的，但是这也大概会带来麻烦。
   下面这个版本里，我们先检查用户密码是否正确，然后再答应其修改员工信息。 我们把对 fullName的直接访问改成了可以检查密码的set方法。 我们也加了一个 get方法，让上面的例子仍然可以工作。
  

1. let passcode = "secret passcode";
3. class Employee {
4.     private _fullName: string;
6.     get fullName(): string {
7.         return this._fullName;
8.     }
10.     set fullName(newName: string) {
11.         if (passcode && passcode == "secret passcode") {
12.             this._fullName = newName;
13.         }
14.         else {
15.             console.log("Error: Unauthorized update of employee!");
16.         }
17.     }
18. }
20. let employee = new Employee();
21. employee.fullName = "Bob Smith";
22. if (employee.fullName) {
23.     alert(employee.fullName);
24. }

复制代码

  
   
   我们可以修改一下密码，来验证一下存取器是否是工作的。当密码不对时，会提示我们没有权限去修改员工。
   对于存取器有下面几点需要注意的：
   起首，存取器要求你将编译器设置为输出ECMAScript 5或更高。 不支持降级到ECMAScript 3。 其次，只带有 get不带有set的存取器主动被推断为readonly。 这在从代码天生 .d.ts文件时是有帮助的，因为利用这个属性的用户会看到不答应够改变它的值。
   静态属性

   到现在为止，我们只讨论了类的实例成员，那些仅当类被实例化的时间才会被初始化的属性。 我们也可以创建类的静态成员，这些属性存在于类自己上面而不是类的实例上。 在这个例子里，我们利用 static界说origin，因为它是全部网格都会用到的属性。 每个实例想要访问这个属性的时间，都要在 origin前面加上类名。 犹如在实例属性上利用 this.前缀来访问属性一样，这里我们利用Grid.来访问静态属性。
  

1. class Grid {
2.     static origin = {x: 0, y: 0};
3.     calculateDistanceFromOrigin(point: {x: number; y: number;}) {
4.         let xDist = (point.x - Grid.origin.x);
5.         let yDist = (point.y - Grid.origin.y);
6.         return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
7.     }
8.     constructor (public scale: number) { }
9. }
11. let grid1 = new Grid(1.0);  // 1x scale
12. let grid2 = new Grid(5.0);  // 5x scale
14. console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
15. console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

复制代码

  
   抽象类

   抽象类做为其它派生类的基类利用。 它们一样寻常不会直接被实例化。 不同于接口，抽象类可以包含成员的实现细节。abstract关键字是用于界说抽象类和在抽象类内部界说抽象方法。
  

1. abstract class Animal {
2.     abstract makeSound(): void;
3.     move(): void {
4.         console.log('roaming the earch...');
5.     }
6. }

复制代码

  
   抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。 抽象方法的语法与接口方法相似。 两者都是界说方法签名但不包含方法体。 然而，抽象方法必须包含 abstract关键字并且可以包含访问修饰符。
  

1. abstract class Department {
3.     constructor(public name: string) {
4.     }
6.     printName(): void {
7.         console.log('Department name: ' + this.name);
8.     }
10.     abstract printMeeting(): void; // 必须在派生类中实现
11. }
13. class AccountingDepartment extends Department {
15.     constructor() {
16.         super('Accounting and Auditing'); // constructors in derived classes must call super()
17.     }
19.     printMeeting(): void {
20.         console.log('The Accounting Department meets each Monday at 10am.');
21.     }
23.     generateReports(): void {
24.         console.log('Generating accounting reports...');
25.     }
26. }
28. let department: Department; // ok to create a reference to an abstract type
29. department = new Department(); // error: cannot create an instance of an abstract class
30. department = new AccountingDepartment(); // ok to create and assign a non-abstract subclass
31. department.printName();
32. department.printMeeting();
33. department.generateReports(); // error: method doesn't exist on declared abstract type

复制代码

  
   高级技巧

   构造函数

   当你在TypeScript里声明白一个类的时间，现实上同时声明白许多东西。 起首就是类的 实例的范例。
  

1. class Greeter {
2.     greeting: string;
3.     constructor(message: string) {
4.         this.greeting = message;
5.     }
6.     greet() {
7.         return "Hello, " + this.greeting;
8.     }
9. }
11. let greeter: Greeter;
12. greeter = new Greeter("world");
13. console.log(greeter.greet());

复制代码

  
   这里，我们写了let greeter: Greeter，意思是Greeter类的实例的范例是Greeter。 这对于用过其它面向对象语言的步伐员来讲已经是老风俗了。
   我们也创建了一个叫做构造函数的值。这个函数会在我们利用  new创建类实例的时间被调用。下面我们来看看，上面的代码被编译成JavaScript后是什么样子的：
  

1. let Greeter = (function () {
2.     function Greeter(message) {
3.         this.greeting = message;
4.     }
5.     Greeter.prototype.greet = function () {
6.         return "Hello, " + this.greeting;
7.     };
8.     return Greeter;
9. })();
11. let greeter;
12. greeter = new Greeter("world");
13. console.log(greeter.greet());

复制代码

  
   上面的代码里，let Greeter将被赋值为构造函数。我们当调用  new并执行了这个函数后，便会得到一个类的实例。这个构造函数也包含了类的全部静态属性。换个角度说，我们可以认为类具有  实例部门与静态部门这两个部门。
   让我们稍微改写一下这个例子，看看它们之前的区别：
  

1. class Greeter {
2.     static standardGreeting = "Hello, there";
3.     greeting: string;
4.     greet() {
5.         if (this.greeting) {
6.             return "Hello, " + this.greeting;
7.         }
8.         else {
9.             return Greeter.standardGreeting;
10.         }
11.     }
12. }
14. let greeter1: Greeter;
15. greeter1 = new Greeter();
16. console.log(greeter1.greet());
18. let greeterMaker: typeof Greeter = Greeter;
19. greeterMaker.standardGreeting = "Hey there!";
21. let greeter2: Greeter = new greeterMaker();
22. console.log(greeter2.greet());

复制代码

  
   这个例子里，greeter1与之前看到的一样。我们实例化  Greeter类，并利用这个对象。与我们之前看到的一样。
   再之后，我们直接利用类。我们创建³³了一个叫做  greeterMaker的变量。这个变量保存了这个类或者说保存了类构造函数。然后我们利用  typeof Greeter，意思是取Greeter类的范例，而不是实例的范例。或者更确切的说， “我告诉  Greeter标识符的范例”，也就是构造函数的范例。这个范例包含了类的全部静态成员和构造函数。之后，就和前面一样，在我们  greeterMaker上利用new，创建³³ Greeter的实例。
   把类当做接口利用

   如上一节里所讲的，类界说会创建两个东西：类的实例范例和一个构造函数。因为类可以创建出范例，所以你能够在答应利用接口的地方利用类。
  

1. class Point {
2.     x: number;
3.     y: number;
4. }
6. interface Point3d extends Point {
7.     z: number;
8. }
10. let point3d: Point3d = {x: 1, y: 2, z: 3};

复制代码

  
   

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。