当前位置:K88软件开发文章中心编程全书编程全书03 → 文章内容

TypeScript 类

减小字体 增大字体 作者:佚名  来源:网上搜集  发布时间:2019-1-14 5:03:12

TypeScript 类TypeScript 是面向对象的 JavaScript。类描述了所创建的对象共同的属性和方法。TypeScript 支持面向对象的所有特性,比如 类、接口等。TypeScript 类定义方式如下:class class_name { // 类作用域}定义类的关键字为 class,后面紧跟类名,类可以包含以下几个模块(类的数据成员):字段 ? 字段是类里面声明的变量。字段表示对象的有关数据。构造函数 ? 类实例化时调用,可以为类的对象分配内存。方法 ? 方法为对象要执行的操作。实例创建一个 Person 类:TypeScriptclass Person {}编译以上代码,得到以下 JavaScript 代码:JavaScriptvar Person = /** @class */ (function () {function Person() {}return Person;}());创建类的数据成员以下实例我们声明了类 Car,包含字段为 engine,构造函数在类实例化后初始化字段 engine。this 关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同,this.engine 表示类的字段。此外我们也在类中定义了一个方法 disp()。TypeScriptclass Car {// 字段 engine:string;// 构造函数 constructor(engine:string) {this.engine = engine}// 方法 disp():void {console.log("发动机为 : "+this.engine)}}编译以上代码,得到以下 JavaScript 代码:JavaScriptvar Car = /** @class */ (function () {// 构造函数 function Car(engine) {this.engine = engine;}// 方法 Car.prototype.disp = function () {console.log("发动机为 : " + this.engine);};return Car;}());创建实例化对象我们使用 new 关键字来实例化类的对象,语法格式如下:var object_name = new class_name([ arguments ])类实例化时会调用构造函数,例如:var obj = new Car("Engine 1")类中的字段属性和方法可以使用 . 号来访问:// 访问属性obj.field_name // 访问方法obj.function_name()完整实例类的继承:实例中创建了 Shape 类,Circle 类继承了 Shape 类,Circle 类可以直接使用 Area 属性:TypeScriptclass Car {// 字段engine:string;// 构造函数constructor(engine:string) {this.engine = engine}// 方法disp():void {console.log("函数中显示发动机型号 : "+this.engine)}}// 创建一个对象var obj = new Car("XXSY1")// 访问字段console.log("读取发动机型号 : "+obj.engine)// 访问方法obj.disp()编译以上代码,得到以下 JavaScript 代码:JavaScriptvar Car = /** @class */ (function () {// 构造函数function Car(engine) {this.engine = engine;}// 方法Car.prototype.disp = function () {console.log("函数中显示发动机型号 : " + this.engine);};return Car;}());// 创建一个对象var obj = new Car("XXSY1");// 访问字段console.log("读取发动机型号 : " + obj.engine);// 访问方法obj.disp();输出结果为:读取发动机型号 : XXSY1函数中显示发动机型号 : XXSY1类的继承TypeScript 支持继承类,即我们可以在创建类的时候继承一个已存在的类,这个已存在的类称为父类,继承它的类称为子类。类继承使用关键字 extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承。TypeScript 不支持继承多个类,只支持继承多个类。语法格式如下:class child_class_name extends parent_class_name实例类的继承:实例中创建了 Shape 类,Circle 类继承了 Shape 类,Circle 类可以直接使用 Area 属性:TypeScriptclass Shape {Area:numberconstructor(a:number) {this.Area = a}}class Circle extends Shape {disp():void {console.log("圆的面积: "+this.Area)}}var obj = new Circle(223);obj.disp()编译以上代码,得到以下 JavaScript 代码:JavaScriptvar __extends = (this && this.__extends) || (function () {var extendStatics = function (d, b) {extendStatics = Object.setPrototypeOf ||({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };return extendStatics(d, b);};return function (d, b) {extendStatics(d, b);function __() { this.constructor = d; }d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());};})();var Shape = /** @class */ (function () {function Shape(a) {this.Area = a;}return Shape;}());var Circle = /** @class */ (function (_super) {__extends(Circle, _super);function Circle() {return _super !== null && _super.apply(this, arguments) || this;}Circle.prototype.disp = function () {console.log("圆的面积: " + this.Area);};return Circle;}(Shape));var obj = new Circle(223);obj.disp();输出结果为:圆的面积: 223需要注意的是子类只能继承一个分类,TypeScript 不支持继承多个类,但支持多重继承,如下实例:TypeScriptclass Root {str:string;}class Child extends Root {}class Leaf extends Child {} // 多重继承,继承了 Child 和 Root 类var obj = new Leaf();obj.str ="hello"console.log(obj.str)编译以上代码,得到以下 JavaScript 代码:JavaScriptvar __extends = (this && this.__extends) || (function () {var extendStatics = function (d, b) {extendStatics = Object.setPrototypeOf ||({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };return extendStatics(d, b);};return function (d, b) {extendStatics(d, b);function __() { this.constructor = d; }d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());};})();var Root = /** @class */ (function () {function Root() {}return Root;}());var Child = /** @class */ (function (_super) {__extends(Child, _super);function Child() {return _super !== null && _super.apply(this, arguments) || this;}return Child;}(Root));var Leaf = /** @class */ (function (_super) {__extend

[1] [2]  下一页


TypeScript 类