【零基础入门TypeScript】类

创建类

句法

示例：声明一个类

创建实例对象

句法

示例：实例化一个类

访问属性和函数

示例：将它们放在一起

类继承

句法

示例：类继承

例子

输出

TypeScript ─ 类继承和方法重写

静态关键字

例子

实例操作符

例子

数据隐藏

例子

类和接口

TypeScript 是面向对象的 JavaScript。TypeScript 支持面向对象的编程功能，如类、接口等。OOP 中的类是创建对象的蓝图。类封装了对象的数据。Typescript 为这个称为类的概念提供了内置支持。JavaScript ES5 或更早版本不支持类。Typescript 从 ES6 中获得了这个功能。

创建类

使用 class 关键字在 TypeScript 中声明类。其语法如下 -

句法

class class_name { //class scope 
}

class 关键字后跟类名。命名类时必须考虑标识符的规则。

类定义可以包括以下内容 -

字段- 字段是类中声明的任何变量。字段表示与对象相关的数据
构造函数- 负责为类的对象分配内存
函数- 函数表示对象可以采取的操作。它们有时也被称为方法

这些组件组合在一起称为类的数据成员。

考虑打字稿中的 Person 类。

class Person { }

编译时，它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var Person = (function () { function Person() { } return Person; }());

示例：声明一个类

class Car { //field engine:string; //constructor constructor(engine:string) { this.engine = engine }  //function disp():void { console.log("Engine is  :   "+this.engine) } 
}

该示例声明了一个 Car 类。该类有一个名为engine 的字段。声明字段时不使用var关键字。上面的示例声明了该类的构造函数。

构造函数是类的一个特殊函数，负责初始化类的变量。TypeScript 使用 constructor 关键字定义构造函数。构造函数是一个函数，因此可以参数化。

this关键字引用该类的当前实例。这里，参数名称和类的字段名称是相同的。因此，为了避免歧义，类的字段以this关键字为前缀。

disp()是一个简单的函数定义。请注意，这里没有使用 function 关键字。

编译时，它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var Car = (function () {//constructorfunction Car(engine) {this.engine = engine;}//functionCar.prototype.disp = function () {console.log("Engine is  :   " + this.engine);};return Car;
}());

创建实例对象

要创建类的实例，请使用new关键字，后跟类名。其语法如下 -

句法

var object_name = new class_name([ arguments ])

new关键字负责实例化。
表达式的右侧调用构造函数。如果构造函数是参数化的，则应该向其传递值。

示例：实例化一个类

var obj = new Car("Engine 1")

访问属性和函数

类的属性和函数可以通过对象来访问。使用 ' 。' 点符号（称为句点）来访问类的数据成员。

//accessing an attribute 
obj.field_name //accessing a function 
obj.function_name()

示例：将它们放在一起

class Car { //field engine:string; //constructor constructor(engine:string) { this.engine = engine }  //function disp():void { console.log("Function displays Engine is  :   "+this.engine) } 
} //create an object 
var obj = new Car("XXSY1")//access the field 
console.log("Reading attribute value Engine as :  "+obj.engine)  //access the function
obj.disp()

编译时，它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var Car = (function () {//constructorfunction Car(engine) {this.engine = engine;}//functionCar.prototype.disp = function () {console.log("Function displays Engine is  :   " + this.engine);};return Car;
}());//create an object
var obj = new Car("XXSY1");//access the field
console.log("Reading attribute value Engine as :  " + obj.engine);//access the function
obj.disp();

上述代码的输出如下 -

Reading attribute value Engine as :  XXSY1 
Function displays Engine is  :   XXSY1

类继承

TypeScript 支持继承的概念。继承是程序从现有类创建新类的能力。扩展以创建更新的类的类称为父类/超类。新创建的类称为子类/子类。

一个类使用“extends”关键字从另一个类继承。子类从父类继承除私有成员和构造函数之外的所有属性和方法。

句法

class child_class_name extends parent_class_name

但是，TypeScript 不支持多重继承。

示例：类继承

class Shape { Area:number constructor(a:number) { this.Area = a } 
} class Circle extends Shape { disp():void { console.log("Area of the circle:  "+this.Area) } 
}var obj = new Circle(223); 
obj.disp()

编译时，它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];function __() { this.constructor = d; }d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Shape = (function () {function Shape(a) {this.Area = a;}return Shape;
}());var Circle = (function (_super) {__extends(Circle, _super);function Circle() {_super.apply(this, arguments);}Circle.prototype.disp = function () { console.log("Area of the circle:  " + this.Area); };return Circle;
}(Shape));var obj = new Circle(223);
obj.disp();

上述代码的输出如下 -

Area of the Circle: 223

上面的示例声明了一个 Shape 类。该类由 Circle 类扩展。由于类之间存在继承关系，子类（即类Car）可以隐式访问其父类属性（即区域）。

继承可分为 -

Single - 每个类最多可以从一个父类扩展
多个- 一个类可以从多个类继承。TypeScript 不支持多重继承。
多级- 以下示例显示了多级继承的工作原理。

例子

class Root { str:string; 
} class Child extends Root {} 
class Leaf extends Child {} //indirectly inherits from Root by virtue of inheritance  var obj = new Leaf(); 
obj.str ="hello" 
console.log(obj.str)

Leaf 类通过多级继承从 Root 类和 Child 类派生属性。

编译时，它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];function __() { this.constructor = d; }d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};var Root = (function () {function Root() {}return Root;
}());var Child = (function (_super) {__extends(Child, _super);function Child() {_super.apply(this, arguments);}return Child;
}(Root));var Leaf = (function (_super) {__extends(Leaf, _super);function Leaf() {_super.apply(this, arguments);}return Leaf;
}(Child));var obj = new Leaf();
obj.str = "hello";
console.log(obj.str);

其输出如下 -

输出

hello

TypeScript ─ 类继承和方法重写

方法重写是子类重新定义超类方法的一种机制。下面的例子说明了同样的情况 -

class PrinterClass { doPrint():void {console.log("doPrint() from Parent called…") } 
} class StringPrinter extends PrinterClass { doPrint():void { super.doPrint() console.log("doPrint() is printing a string…")} 
} var obj = new StringPrinter() 
obj.doPrint()

super 关键字用于引用类的直接父类。该关键字可用于引用变量、属性或方法的超类版本。第 13 行调用 doWork() 函数的超类版本。

编译时，它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];function __() { this.constructor = d; }d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};var PrinterClass = (function () {function PrinterClass() {}PrinterClass.prototype.doPrint = function () { console.log("doPrint() from Parent called…"); };return PrinterClass;
}());var StringPrinter = (function (_super) {__extends(StringPrinter, _super);function StringPrinter() {_super.apply(this, arguments);}StringPrinter.prototype.doPrint = function () {_super.prototype.doPrint.call(this);console.log("doPrint() is printing a string…");};return StringPrinter;
}(PrinterClass));var obj = new StringPrinter();
obj.doPrint();

上述代码的输出如下 -

doPrint() from Parent called… 
doPrint() is printing a string…

静态关键字

static 关键字可以应用于类的数据成员。静态变量会保留其值，直到程序完成执行。静态成员通过类名引用。

例子

class StaticMem {  static num:number; static disp():void { console.log("The value of num is"+ StaticMem.num) } 
} StaticMem.num = 12     // initialize the static variable 
StaticMem.disp()      // invoke the static method

编译时，它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var StaticMem = (function () {function StaticMem() {}StaticMem.disp = function () {console.log("The value of num is" + StaticMem.num);};return StaticMem;
}());StaticMem.num = 12;     // initialize the static variable
StaticMem.disp();      // invoke the static method

上述代码的输出如下 -

The value of num is 12

实例操作符

如果对象属于指定类型，instanceof 运算符将返回true 。

例子

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log(" obj is an instance of Person " + isPerson);

编译时，它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var Person = (function () {function Person() {}return Person;
}());var obj = new Person();
var isPerson = obj instanceof Person;
console.log(" obj is an instance of Person " + isPerson);

上述代码的输出如下 -

obj is an instance of Person True

数据隐藏

类可以控制其数据成员对其他类的成员的可见性。此功能称为数据隐藏或封装。

面向对象使用访问修饰符或访问说明符的概念来实现封装的概念。访问说明符/修饰符定义类的数据成员在其定义类之外的可见性。

TypeScript 支持的访问修饰符是 -

编号	访问说明符和描述
1.	民众公共数据成员具有通用的可访问性。类中的数据成员默认是公共的。
2.	私人的私有数据成员只能在定义这些成员的类中访问。如果外部类成员尝试访问私有成员，编译器会抛出错误。
3.	受保护的受保护的数据成员可由与前者相同的类中的成员以及子类的成员访问。

编号

访问说明符和描述

民众

公共数据成员具有通用的可访问性。类中的数据成员默认是公共的。

私人的

私有数据成员只能在定义这些成员的类中访问。如果外部类成员尝试访问私有成员，编译器会抛出错误。

受保护的

受保护的数据成员可由与前者相同的类中的成员以及子类的成员访问。

例子

现在让我们举个例子来看看数据隐藏是如何工作的 -

class Encapsulate { str:string = "hello" private str2:string = "world" 
}var obj = new Encapsulate() 
console.log(obj.str)     //accessible 
console.log(obj.str2)   //compilation Error as str2 is private

该类有两个字符串属性 str1 和 str2，分别是公共成员和私有成员。该类被实例化。该示例返回编译时错误，因为私有属性 str2 在声明它的类之外被访问。

类和接口

类也可以实现接口。

interface ILoan { interest:number 
} class AgriLoan implements ILoan { interest:number rebate:number constructor(interest:number,rebate:number) { this.interest = interest this.rebate = rebate } 
} var obj = new AgriLoan(10,1) 
console.log("Interest is : "+obj.interest+" Rebate is : "+obj.rebate )

AgriLoan 类实现 Loan 接口。因此，现在该类别对将财产权益纳入其成员具有约束力。

编译时，它将生成以下 JavaScript 代码。

//Generated by typescript 1.8.10
var AgriLoan = (function () {function AgriLoan(interest, rebate) {this.interest = interest;this.rebate = rebate;}return AgriLoan;
}());var obj = new AgriLoan(10, 1);
console.log("Interest is : " + obj.interest + " Rebate is : " + obj.rebate);

上述代码的输出如下 -