TypeScript 类
传统的js是使用函数和原型链的方式用来模拟类
es6中加入了类,class关键字
类
// 定义类 class Greeter { greeting: string; constructor(message: string){ this.greeting = message; // 使用this表示访问的是类成员 } greet() { return "Hello," + this.greeting; } } // 创建对象 let greeter = new Greeter("World");
编译后的js文件如下
es5
// 定义类 var Greeter = /** @class */ (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello," + this.greeting; }; return Greeter; }()); // 创建对象 var greeter = new Greeter("World"); //# sourceMappingURL=out.js.map
es6
// 定义类 class Greeter { constructor(message) { this.greeting = message; } greet() { return "Hello," + this.greeting; } } // 创建对象 let greeter = new Greeter("World"); //# sourceMappingURL=out.js.map
继承
在ts中可以使用类似于Java中的类的继承。
// 定义类 class Animal { move(distanceInMeters: number = 0) { // 定义一个方法 console.log("class - Animal move 方法" + distanceInMeters); } } // 定义继承类 class Dog extends Animal { bark() { console.log("Dog!"); } } const dog = new Dog(); // 创建给予Dog类的对象 dog.bark(); // 调用继承类的方法bark() dog.move(10); // 调用父类的move方法 dog.bark();
var __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 Animal = /** @class */ (function () { function Animal() { } Animal.prototype.move = function (distanceInMeters) { if (distanceInMeters === void 0) { distanceInMeters = 0; } console.log("class - Animal move 方法" + distanceInMeters); }; return Animal; }()); // 定义继承类 var Dog = /** @class */ (function (_super) { __extends(Dog, _super); function Dog() { return _super !== null && _super.apply(this, arguments) || this; } Dog.prototype.bark = function () { console.log("Dog!"); }; return Dog; }(Animal)); var dog = new Dog(); // 创建给予Dog类的对象 dog.bark(); // 调用继承类的方法bark() dog.move(10); // 调用父类的move方法 dog.bark(); //# sourceMappingURL=out.js.map
超类
class Animal { name: string; constructor(theName: string){ this.name = theName; } move(distanceInMeters: number = 0){ console.log("distanceInMeters " + distanceInMeters); } } class Snake extends Animal { constructor(name: string){ super(name); // 调用父类的构造方法,在构造函数访问this之前,必须调用一次 super() }; move(distanceInMeters = 45){ // 重写父类的move方法 console.log("Galloping..."); super.move(distanceInMeters); // 调用父类的move方法 } }; class Horse extends Animal { constructor(name: string){ super(name); // 调用父类的构造方法 } move(distanceInMeters = 45){ // 重写move方法 console.log("Galloping..."); super.move(distanceInMeters); // 调用父类的move } } // 调用基类的派生类即Snake类,使用的是基类的构造方法,重写了基类的move方法,并在子类的move方法中调用了父类的move方法 let sam = new Snake("Sammy the Python"); let tom: Animal; // 声明tom对象,其为Animal类 tom = new Horse("Tommy the Palomino"); // 此处赋值为Horse类,重写了Animal中的move方法 sam.move(); tom.move();
var __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 Animal = /** @class */ (function () { function Animal(theName) { this.name = theName; } Animal.prototype.move = function (distanceInMeters) { if (distanceInMeters === void 0) { distanceInMeters = 0; } console.log("distanceInMeters " + distanceInMeters); }; return Animal; }()); var Snake = /** @class */ (function (_super) { __extends(Snake, _super); function Snake(name) { return _super.call(this, name) || this; } ; Snake.prototype.move = function (distanceInMeters) { if (distanceInMeters === void 0) { distanceInMeters = 45; } console.log("Galloping..."); _super.prototype.move.call(this, distanceInMeters); // 调用父类的move方法 }; return Snake; }(Animal)); ; var Horse = /** @class */ (function (_super) { __extends(Horse, _super); function Horse(name) { return _super.call(this, name) || this; } Horse.prototype.move = function (distanceInMeters) { if (distanceInMeters === void 0) { distanceInMeters = 45; } console.log("Galloping..."); _super.prototype.move.call(this, distanceInMeters); // 调用父类的move }; return Horse; }(Animal)); // 调用基类的派生类即Snake类,使用的是基类的构造方法,重写了基类的move方法,并在子类的move方法中调用了父类的move方法 var sam = new Snake("Sammy the Python"); var tom; // 声明tom对象,其为Animal类 tom = new Horse("Tommy the Palomino"); // 此处赋值为Horse类,重写了Animal中的move方法 sam.move(); tom.move(); //# sourceMappingURL=out.js.map
公有私有,保护修饰符
public 默认
public为默认
class Animal { public name: string; public constructor(theName: string){ this.name = theName; } public move(distanceInMeters: number){ console.log("move 方法"); } }
var Animal = /** @class */ (function () { function Animal(theName) { this.name = theName; } Animal.prototype.move = function (distanceInMeters) { console.log("move 方法"); }; return Animal; }()); //# sourceMappingURL=out.js.map
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 this.department = department; } public getElevatorPitch(){ return "hello !" + name; // 通过实例访问父类的name } } let howard = new Employee("Howard", "sales"); console.log(howard.getElevatorPitch()); //console.log(howard.name); //访问父类的,失败,不能直接被访问,但是能被派生方法所访问
PS C:\Users\mingm\Desktop\ts> tsc Active code page: 65001 PS C:\Users\mingm\Desktop\ts>
var __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 Person = /** @class */ (function () { function Person(name) { this.name = name; } return Person; }()); var Employee = /** @class */ (function (_super) { __extends(Employee, _super); function Employee(name, department) { var _this = _super.call(this, name) || this; // 接着才能使用this _this.department = department; return _this; } Employee.prototype.getElevatorPitch = function () { return "hello !" + name; // 通过实例访问父类的name }; return Employee; }(Person)); var howard = new Employee("Howard", "sales"); console.log(howard.getElevatorPitch()); //console.log(howard.name); //访问父类的,失败,不能直接被访问,但是能被派生方法所访问 //# sourceMappingURL=out.js.map
// 构造函数使用保护 class Person { protected name: string; protected constructor(theName:string){ // 构造方法,进行保护 this.name = theName; } } class Employee extends Person { private department: string; constructor(name: string, department:string){ super(name); this.department = department; } public getElevatorPitch() { return "hello" + this.department + this.name; } } let howard = new Employee("Howard", "Sales"); //let john = new Peron("John"); //错误,构造函数被保护,不能在外部访问
var __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 Person = /** @class */ (function () { function Person(theName) { this.name = theName; } return Person; }()); var Employee = /** @class */ (function (_super) { __extends(Employee, _super); function Employee(name, department) { var _this = _super.call(this, name) || this; _this.department = department; return _this; } Employee.prototype.getElevatorPitch = function () { return "hello" + this.department + this.name; }; return Employee; }(Person)); var howard = new Employee("Howard", "Sales"); //let john = new Peron("John"); //错误,构造函数被保护,不能在外部访问 //# sourceMappingURL=out.js.map
readonly修饰符
将属性设置为只读
class Octopus { readonly name: string; // 只读 readonly numberOfLegs: number = 8; // 只读 constructor(theName:string){ this.name = theName; } } let dad = new Octopus("Hello world"); //dad.name = "Hello world"; //设置值。出错,由于为只读
var Octopus = /** @class */ (function () { function Octopus(theName) { this.numberOfLegs = 8; // 只读 this.name = theName; } return Octopus; }()); var dad = new Octopus("Hello world"); //dad.name = "Hello world"; //设置值。出错,由于为只读 //# sourceMappingURL=out.js.map
参数属性
class Octopus { readonly numberOfLegs: number = 9; constructor(readonly name:string){ // 直接定义参数属性 } }
var Octopus = /** @class */ (function () { function Octopus(name) { this.name = name; this.numberOfLegs = 9; } return Octopus; }()); //# sourceMappingURL=out.js.map
通过get set获取属性
let passcode = "secret passcode"; class Employee { private _fullName: string; // 保护成员一般下划线 get fullName():string { // get方法 return this._fullName; } set fullName(newName:string){ if (passcode && passcode == "code") { // 进行赋值操作 this._fullName = newName; }else { console.log("出现重复") } } } let employee = new Employee(); // 创建对象 employee.fullName = "Bob"; //调用get方法 // 下面调用set方法 if(employee.fullName){ console.log(employee.fullName); }
PS C:\Users\mingm\Desktop\ts> tsc Active code page: 65001 PS C:\Users\mingm\Desktop\ts>
var passcode = "secret passcode"; var Employee = /** @class */ (function () { function Employee() { } Object.defineProperty(Employee.prototype, "fullName", { get: function () { return this._fullName; }, set: function (newName) { if (passcode && passcode == "code") { // 进行赋值操作 this._fullName = newName; } else { console.log("出现重复"); } }, enumerable: true, configurable: true }); return Employee; }()); var employee = new Employee(); // 创建对象 employee.fullName = "Bob"; //调用get方法 // 下面调用set方法 if (employee.fullName) { console.log(employee.fullName); } //# sourceMappingURL=out.js.map
只能输出es5或更高的版本,不支持输出es3
静态属性
当类未被实例化的时候,可以直接访问的为静态属性
class Grid { static origin = { x: 0, y: 0 }; // 这里类似使用static calculate(point:{x:number, y:number}){ // 在此处定义了point, let x = point.x - Grid.origin.x // 前面访问的是poinyt定义的,后面访问的是static定义的origin let y = point.y - Grid.origin.y; // 同理如上 return point.x + point.y; } constructor(public scale: number) { }; } let grid1 = new Grid(1.0);// 对static进行赋值 let grid2 = new Grid(2.0); // 访问 grid1.calculate({x:10, y:10}); grid2.calculate({x:10, y:10});
var Grid = /** @class */ (function () { function Grid(scale) { this.scale = scale; } Grid.prototype.calculate = function (point) { var x = point.x - Grid.origin.x; // 前面访问的是poinyt定义的,后面访问的是static定义的origin var y = point.y - Grid.origin.y; // 同理如上 return point.x + point.y; }; ; Grid.origin = { x: 0, y: 0 }; // 这里类似使用static return Grid; }()); var grid1 = new Grid(1.0); // 对static进行赋值 var grid2 = new Grid(2.0); // 访问 grid1.calculate({ x: 10, y: 10 }); grid2.calculate({ x: 10, y: 10 }); //# sourceMappingURL=out.js.map
抽象类
抽象类为其他派生类的基类。
抽象类不会被实例化
抽象类用于作为基类,派生出其他类使用。
// 定义抽象类 abstract class Department { constructor(public name:string){ } // 定义实现的细节 printName():void{ console.log("实现细节"); } // 定义抽象方法,该抽象方法必须在派生类中实现其具体的内容 abstract printMeeting(): void; } class AccountingDepartemnt extends Department { constructor(){ super("hello world"); // 调用基类的构造方法 } // 对抽象方法进行完善 printMeeting():void{ console.log("完善!"); } // 定义其余的方法 generateReports():void{ console.log("添加的其他方法") } } // 创建一个抽象类型的引用 let department: Department; // 抽象类的引用,类似于定义,可以被抽象类的子类进行实例化,即分配内存空间,不能被抽象类进行实例化,因为抽象类不能分配内存空间,所以不能对抽象类进行new操作 department = new AccountingDepartemnt(); // 可以进行分配内存空间 department.printMeeting();
var __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 Department = /** @class */ (function () { function Department(name) { this.name = name; } // 定义实现的细节 Department.prototype.printName = function () { console.log("实现细节"); }; return Department; }()); var AccountingDepartemnt = /** @class */ (function (_super) { __extends(AccountingDepartemnt, _super); function AccountingDepartemnt() { return _super.call(this, "hello world") || this; } // 对抽象方法进行完善 AccountingDepartemnt.prototype.printMeeting = function () { console.log("完善!"); }; // 定义其余的方法 AccountingDepartemnt.prototype.generateReports = function () { console.log("添加的其他方法"); }; return AccountingDepartemnt; }(Department)); // 创建一个抽象类型的引用 var department; // 抽象类的引用,类似于定义,可以被抽象类的子类进行实例化,即分配内存空间,不能被抽象类进行实例化,因为抽象类不能分配内存空间,所以不能对抽象类进行new操作 department = new AccountingDepartemnt(); // 可以进行分配内存空间 department.printMeeting(); //# sourceMappingURL=out.js.map
构造函数
可以使用类似于java中的语法,进行声明构造函数
class Greeter{ greeting: string; constructor(message:string){ this.greeting = message; } // 类似于java中声明构造方法 greet(){ return "hello " + this.greeting; } } // 首先进行创建引用,类似于原生的var,仅仅声明,并未创建引用。但是必须进行声明,声明其为Greeter let greeter: Greeter; // 进行分配空间 greeter = new Greeter("world"); console.log(greeter.greet());
和使用抽象接口一样,当使用抽象接口的时候,必须要进行先创建引用,然后在分配空间
原生的如下
var i; // 在栈上开辟一块空间,进行储存 i = new Greeter(); // 完成由栈到堆的指向,对象储存在堆中,当然啦,C++允许对象储存在栈中
必须进行两步。
关于C++堆和栈的类
静态建立
使用
Box Box
如上的方式,将会静态的建立一个对象
静态建立对象,将会由编译器在栈中分配内存空间。通过移动栈顶指针,挪出适当的位置,在内存空间上调用构造函数,形成一个栈对象,此方法为在栈中储存对象。
动态建立
使用
Box* Box = new Box();
如上的方式,将会动态的建立一个对象。
使用new操作运算符的时候,将会在堆中分配一块内存空间,完成由栈到对的指向。
类当做接口使用
接口,一种传入对象的规范,比喻,水管的水龙头。
类可以创建出任何类型
class Point{ x: number; y: number; } interface Point3d extends Point{ z: number; } let point3d:Point3d = { x:1, y:2, z:4 }
使用extends,进行创建接口
var Point = /** @class */ (function () { function Point() { } return Point; }()); var point3d = { x: 1, y: 2, z: 4 }; //# sourceMappingURL=out.js.map
相关推荐
changcongying 2020-11-02
changcongying 2020-10-30
苗疆三刀的随手记 2020-10-29
zouph000 2020-10-25
Jruing 2020-10-23
ctg 2020-10-14
PMJ0 2020-10-13
ChaITSimpleLove 2020-10-06
小飞侠V 2020-09-25
QiaoranC 2020-09-25
changcongying 2020-09-17
taizuduojie 2020-09-15
淼寒儿 2020-09-13
lyjava 2020-09-11
彤庆的技术 2020-09-02
锅哥 2020-08-27
ruanhongbiao 2020-08-16
zouph000 2020-08-03
Java编程语言学习 2020-07-29