众所周知,ts目前是不能直接编译成机器码运行的
需要转换成js代码后运行
由于js的动态特性,所以我也很好奇编译后的代码是怎么样的呢
废话不多说,直接切入正题
注:(ts版本为:3.1,编译的js版本为:ES5)
封装
public/private/protected
首先写一个基类
class Person {
public name: string;
private _age: number;
protected sex: string;
constructor(name: string, age: number, sex: string) {
this.name = name;
this.sex = sex;
this._age = age;
}
public say():void {
console.log(`my name is ${this.name}`)
}
}
编译后:
var Person = /** @class */ (function () {
function Person(name, age, sex) {
this.name = name;
this.sex = sex;
this._age = age;
}
Person.prototype.say = function () {
console.log("my name is " + this.name);
};
return Person;
}());
可以看到编译后的代码还少了很多
我本以为编译后的代码应该更复杂些,
比如用闭包实现private等等
后来一想,真没必要,ts是js的超集
只要保证在ts内,代码的安全性能得到保证就行
毕竟,我们不会在编译后的js内再进行编码
let p: Person = new Person('小明', 20, '男');
// error:属性“_age”为私有属性,只能在类“Person”中访问。ts(2341)
p._age = 21;
注意,构造函数也可以进行描述,private后将不能实例化对象,protected后只能由继承的类调用其构造函数
存取器与只读
我们再来看看其他修饰器编译之后的代码
class Person {
public readonly age: number;
private _height: number;
get height(): number {
return this._height;
}
constructor( age: number, height: number) {
this.age = age;
this._height = height;
}
}
编译后:
var Person = /** @class */ (function () {
function Person(age, height) {
this.age = age;
this._height = height;
}
Object.defineProperty(Person.prototype, "height", {
get: function () {
return this._height;
},
enumerable: true,
configurable: true
});
return Person;
}());
这里只有get ts能推断出属性是只读
我们代码主动设置属性readonly也是只读
但要注意他们编译出来的代码不同
let p: Person = new Person(20, 170);
// error:Cannot assign to 'age' because it is a read-only property.ts(2540)
p.age = 22;
// error:Cannot assign to 'height' because it is a read-only property.ts(2540)
p.height = 180;
继承
下面我们来写一个子类
class Person {
public name: string;
private _age: number;
protected sex: string;
constructor(name: string, age: number, sex: string) {
this.name = name;
this.sex = sex;
this._age = age;
}
public say() {
console.log(`my name is ${this.name}`)
}
}
class Boy extends Person {
constructor(name: string, age: number) {
super(name, age, '男');
}
play() {
}
}
编译后:
"use strict";
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 __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var Person = /** @class */ (function () {
function Person(name, age, sex) {
this.name = name;
this.sex = sex;
this._age = age;
}
Person.prototype.say = function () {
console.log("my name is " + this.name);
};
return Person;
}());
var Boy = /** @class */ (function (_super) {
__extends(Boy, _super);
function Boy(name, age) {
return _super.call(this, name, age, '男') || this;
}
Boy.prototype.play = function () {
};
return Boy;
}(Person));
可以看到编译成ES5的js代码class的实现还是特别规范的
使用的组合寄生继承方实现式,
没有变量提升,静态属性也继承了
extend与implements
要注意ts和别的强类型语言不同点
类既能被继承,也能被当做接口去实现
而接口,只能去实现
如:
class Person {
public name: string;
constructor(name: string) {
this.name = name;
}
public say() {
console.log(`my name is ${this.name}`)
}
}
interface IStudy {
read(): void;
write(): void;
}
class Boy extends Person implements IStudy {
constructor(name: string) {
super(name);
}
read(): void {
console.log('boy read');
}
write(): void {
}
}
class Girl implements Person, IStudy {
public name: string;
constructor(name: string) {
this.name = name;
}
read(): void {
console.log('girl read');
}
write(): void {
}
say(): void {
}
}
Boy是继承自Person
而Girl是实现了Person
编译代码为:
var Person = /** @class */ (function () {
function Person(name) {
this.name = name;
}
Person.prototype.say = function () {
console.log("my name is " + this.name);
};
return Person;
}());
exports.Person = Person;
var Boy = /** @class */ (function (_super) {
__extends(Boy, _super);
function Boy(name) {
return _super.call(this, name) || this;
}
Boy.prototype.read = function () {
console.log('boy read');
};
Boy.prototype.write = function () {
};
return Boy;
}(Person));
var Girl = /** @class */ (function () {
function Girl(name) {
this.name = name;
}
Girl.prototype.read = function () {
console.log('girl read');
};
Girl.prototype.write = function () {
};
Girl.prototype.say = function () {
};
return Girl;
}());
这里编译后的js代码也直观的显示了继承和实现的区别
Boy继承自Person,所以原型链上能找到父类的方法属性
Girl实现了Person,所以只是自身拥有和Person一样结构的属性和方法
let s1: Boy = new Boy('小明');
let s2: Girl = new Girl('小红');
console.log(s1 instanceof Person); // true
console.log(s2 instanceof Person); // false
类型兼容
相较其他强类型语言,更有意思的是
ts中的类型兼容,更像是填鸭大法
只要两个类型拥有相同的结构,就可以兼容
比如接着上面的代码:
let boy: Boy = new Boy('小明');
let girl: Girl = new Girl('小红');
boy = girl;// ok
let tmp: Girl = new Boy('小黑'); // ok
联合类型
甚至还可以:
function factory(): IStudy & Person {
// return new Boy('小绿'); // ok
return new Girl('小紫'); // ok
}
由于js中弱类型的特性,广泛的使用了匿名对象,动态属性等等
所以ts中对类型的兼容的判定都是基于"结构",而不是它的名义类型
多态
多态是弱类型语言与生俱来的,或者说不应该有这个概念
而ts中也是与生俱来
let s1: IStudy = new Boy('小明');
let s2: IStudy = new Girl('小红');
s1.read();// boy read
s2.read();// girl read
因为多态的定义本来就是:
同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果。
所以重写,实现,或是重载都能表现
总结
js本来就有面向对象的实现,ts只是更好的表现出来
ts对类型的兼容是基于“结构”的兼容
所以ts中的"类",既能被继承(extends),也能被实现(implements)
ts是js的超集,很多特征在编译后的js代码内并不能体现,但是能保证编译后js运行的安全性