传统的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); // 调用父类的构造方法// 接着才能使用thisthis.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定义的originlet 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定义的originvar 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

TypeScript 类相关推荐

.NET手撸绘制TypeScript类图——下篇
.NET手撸绘制TypeScript类图--下篇在上篇的文章中,我们介绍了如何使用 .NET解析 TypeScript,这篇将介绍如何使用代码将类图渲染出来. 类型定义渲染不出意外,我们继续使用 ...
.NET手撸绘制TypeScript类图——上篇
.NET手撸绘制TypeScript类图--上篇近年来随着交互界面的精细化, TypeScript越来越流行,前端的设计也越来复杂,而类图正是用简单的箭头和方块,反映对象与对象之间关系/依赖的好方 ...
typescript get方法_.NET手撸绘制TypeScript类图——上篇
.NET手撸绘制TypeScript类图--上篇近年来随着交互界面的精细化,TypeScript越来越流行,前端的设计也越来复杂,而类图正是用简单的箭头和方块,反映对象与对象之间关系/依赖的好方式. ...
TypeScript 类(Class)
TypeScript 类(Class) 自 ES6 起,终于迎来了 class,对于开发者来说,终于可以使用基于类的面向对象式编程.TypeScript 在原 ES6 中类的基础上,还添加了一些新的功 ...
三分钟快速了解typeScript 类
typeScript 类类描述了所创建的对象共同的属性和方法. 类的定义继承类里面的修饰符静态属性静态方法抽象类继承多态类的定义 class person {name:string; ...
Typescript类，泛型，各种类型工具
一.TypeScript 类一个类可以包含以下几个模块: 1.属性 1.1 类属性 1.2 实例属性 2.构造函数(在python中叫初始化函数) 该函数在类实例化时会被立即调用 3.方法(也是函数 ...
05 TypeScript 类的使用
目录 1.1 类的基本使用 1.2 类的继承 1.3 static和instanceof 1.4类中的修饰符 1.5 getter与setter 1.6 抽象类 1.7 implements子句 1. ...
TypeScript类
目录 1-1.类的基本使用 1-2.类的继承 1-3.static与instanceof 1-4.类中的修饰符 1-5.getter与setter 1-6.抽象类 1-7.implements子句 1 ...
TypeScript = 类
TypeScript笔记 5. TypeScript => 类 // 1. ts如何定义类 /* class Person {name:string;constructor(name:strin ...
TypeScript 接口和TypeScript类
目录一.TypeScript 接口 1.TypeScript 接口的定义和简单使用 2.联合类型和接口 3.接口和数组 4.接口继承二.TypeScript 类 1.TypeScript 类的定义 ...

TypeScript 类

类

继承

超类