怎麼使用JS與TypeScript
- php中世界最好的语言原創
- 2018-06-02 11:50:091558瀏覽
這次帶給大家怎麼使用JS與TypeScript，使用JS與TypeScript的注意事項有哪些，下面就是實戰案例，一起來看一下。
前言
對於一個前端開發者來說，很少用到class ，因為在JavaScript# 中更多的是函數式編程，抬手就是一個function，幾乎不見class 或new 的蹤影。所以 設計模式 也是大多數前端開發者的一個短板。
最近在學習 Angular 的過程中發現其大量的運用了 class，不得不佩服，Angular 確實是一個優秀的、值得深入研究的 框架。
本文將簡單的介紹 JavaScript 和 TypeScript 中的 class。
#在介紹 class 之前，要先介紹一些基本的概念。
1、靜態成員
類本身的成員，可以繼承，但實例無法訪問，一般多見於工具類，比如在jQuery時代最常見的$.ajax ，ajax 便是$的靜態方法，使用方便，不需要再透過new 或函數呼叫的得到一個新實例。
2、私有成員
類別內部的成員，一般是不能繼承的，只能在內部使用，實例無法訪問，有一點點像閉包內部的變量，但是還是一定的差別，目前JavaScript 無法直接定義私有成員，只能透過其它方式輔助實作。
3、getter/setter
存取器屬性，當我們存取或修改一個實例的屬性的時候，我們可透過存取器屬性攔截這兩個操作，從而做一些其它的事情，vue正是透過這個api來實現對資料變化的追蹤。
4、實例成員
指 new 出來的實例所具有的成員，可以被繼承，也是透過這個特性實現了程式碼的複用。
5、抽象類，抽象方法
抽象類別指不可以被實例化的類，透過 new 關鍵字呼叫會報錯，一般都被設計成父類。
抽象方法，只提供方法的名稱，參數和返回值，不負責實現，具體的實現由子類去完成，如果一個子類繼承於抽象類，那麼這個子類必須實現父類所有的抽象方法，否則會報錯。
這兩個概念在 JavaScript 都無法直接實現，但在 TypeScript 或 其它物件導向語言中可以輕鬆實現，另外這個特性也是用來實現 多型 的重要手段。
案例介紹
為了更好的介紹class，本文將採用三個類別來做例子，分別是Person、Chinese、American 。從字面上可以很快的知道： Person 是 父類別(基底類別) ，Chinese 和 American 是 子類別(衍生類別) 。
Person 有 name、age、gender 三個屬性，sayHello 方法和 fullName 存取器屬性。同時 Person 還有一些 靜態成員 和 私有成員 ，由於實在太難想例子了，所以就用 foo、bar、x、y、z 這些來代替吧。
作為子類別的 Chinese 和 American 繼承了 Person 的實例成員和靜態成員。同時它們本身也有一些自己的方法和屬性:
Chinese 有 kungfu 屬性，會習武 martial。
American 有 twitter，還可以 sendTwitter。
接下來我們就分別使用 JavaScript 和 TypeScript 來實作這個案例。
JavaScript 中的class
JavaScript 中的class 要分開說，在ES6 中提供了兩個關鍵字class 和extends ，雖然它們只是語法糖，底層還是再利用prototype 實現繼承的，但是不能否認，這中寫法確實讓程式碼更清晰，更易讀。
ES6 中的class
class Person {
// #x = '私有属性x';
// static x = '静态属性x';
// name;
// age;
// gender;
// 上面的写法还在提案中，并没有成为正式标准，不过变化的可能性已经不大了。
// 顺便吐槽一下，用 # 表示私有成员，真的是很无语.
/**
* Person的静态方法，可以被子类继承
* 可以通过 this 访问静态成员
*/
static foo() {
console.log(`类 ${this.name} 有一个 ${this.x}`);
}
constructor(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
/**
* 数据存储器，可以访问实例成员，子类的实例可以继承
* 以通过 this 访问实例成员
*/
get fullName() {
const suffix = this.gender === '男' ? '先生' : '女士';
return this.name + suffix;
}
set fullName(value) {
console.log(`你已改名为 ${value} `);
}
/**
* Person的实例方法，可以被子类的实例继承
* 可以通过 this 访问实例成员
*/
sayHello() {
console.log(`你好我是 ${this.fullName} ,我 ${this.age} 岁了`);
}
}
Person.x = '静态属性x';
class Chinese extends Person {
static bar() {
console.log(`类 ${this.name} 的父类是 ${super.name}`);
super.foo();
}
constructor(name, age, gender, kungfu) {
super(name, age, gender);
this.kungfu = kungfu;
}
martial() {
console.log(`${this.name} 正在修炼 ${this.kungfu} `);
}
}
class American extends Person {
// static y = '静态属性y';
static bar() {
console.log(`类 ${this.name} 有自己的 ${this.y} ，还继承了父类 ${super.name} 的 ${super.x}`);
}
constructor(name, age, gender, twitter) {
super(name, age, gender);
this.twitter = twitter;
}
sendTwitter(msg) {
console.log(`${this.name} : `);
console.log(` ${msg}`);
}
}
American.y = '静态属性y';
Person.x; // 静态属性x
Person.foo(); // 类 Person 有一个 静态属性x
Chinese.x; // 静态属性x
Chinese.foo(); // 类 Chinese 有一个 静态属性x
Chinese.bar(); // 类 Chinese 的父类是 Person
American.x; // 静态属性x
American.y; // '静态属性y
American.foo(); // 类 American 有一个 静态属性x
American.bar(); // 类 American 有自己的 静态属性y ，还继承了父类 Person 的 静态属性x
const p = new Person('Lucy', 20, '女');
const c = new Chinese('韩梅梅', 18, '女', '咏春拳');
const a = new American('特朗普', 72, '男', 'Donald J. Trump');
c.sayHello(); // 你好我是 韩梅梅女士 ,我 18 岁了
c.martial(); // 韩梅梅 正在修炼 咏春拳
a.sayHello(); // 你好我是 特朗普先生 ,我 72 岁了
a.sendTwitter('推特治国'); // 特朗普 : 推特治国
ES6 之前的class
ES5 的繼承，實質是先創造子類別的實例物件this，
然后再将父类的方法添加到 this 上面 Parent.apply(this) 。
ES6 的继承机制完全不同，实质是先创造父类的实例对象 this，所以必须先调用 super 方法，
然后再用子类的构造函数修改this。
为了实现继承，我们需要先实现一个 extendsClass 函数，它的作用是让子类继承父类的静态成员和实例成员。
function extendsClass(parent, child) {
// 防止子类和父类相同名称的成员被父类覆盖
var flag = false;
// 继承静态成员
for (var k in parent) {
flag = k in child;
if (!flag) {
child[k] = parent[k];
}
}
// 继承父类prototype上的成员
// 用一个新的构造函数切断父类和子类之间的数据共享
var F = function () { }
F.prototype = parent.prototype;
var o = new F();
for (var k in o) {
flag = k in child.prototype;
if (!flag) {
child.prototype[k] = o[k];
}
}
}
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = this.gender;
// 如果将 getter/setter 写在 prototype 会获取不到
Object.defineProperty(this, 'fullName', {
get: function () {
var suffix = this.gender === '男' ? '先生' : '女士';
return this.name + suffix;
},
set: function () {
console.log('你已改名为 ' + value + ' ');
},
});
}
Person.x = '静态属性x';
Person.foo = function () {
console.log('类 ' + this.name + ' 有一个 ' + this.x);
}
Person.prototype = {
constructor: Person,
// get fullName() { },
// set fullName(value) { },
sayHello: function () {
console.log('你好我是 ' + this.fullName + ' ,我 ' + this.age + ' 了');
},
};
function Chinese(name, age, gender, kungfu) {
// 用call改变this指向，实现继承父类的实例属性
Person.call(this, name, age, gender);
this.kungfu = kungfu;
}
Chinese.bar = function () {
console.log('类 ' + this.name + ' 的父类是 ' + Person.name);
Person.foo();
}
Chinese.prototype = {
constructor: Chinese,
martial: function () {
console.log(this.name + ' 正在修炼 ' + this.kungfu + ' ');
}
};
extendsClass(Person, Chinese);
function American(name, age, gender, twitter) {
Person.call(this, name, age, gender);
this.twitter = twitter;
}
American.y = '静态属性y';
American.bar = function () {
console.log('类 ' + this.name + ' 有自己的 ' + this.y + ' ，还继承了父类 ' + Person.name + ' 的 ' + Person.x);
}
American.prototype = {
constructor: American,
sendTwitter: function (msg) {
console.log(this.name + ' : ');
console.log(' ' + msg);
}
};
extendsClass(Person, American);
TypeScript 中的 class
讲完了 JavaScript 中的类，还是没有用到 抽象类，抽象方法，私有方法这三个概念，由于 JavaScript 语言的局限性，想要实现这三种概念是很困难的，但是在 TypeScript 可以轻松的实现这一特性。
首先我们稍微修改一下例子中的描述，Person 是抽象类，因为一个正常的人肯定是有国籍的，Person 的 sayHello 方法是抽象方法，因为每个国家打招呼的方式不一样。另外一个人的性别是只能读取，不能修改的，且是确定的是，不是男生就是女生，所以还要借助一下枚举。
enum Gender {
female = 0,
male = 1
};
abstract class Person {
private x: string = '私有属性x，子类和实例都无法访问';
protected y: string = '私有属性y，子类可以访问，实例无法访问';
name: string;
public age: number;
public readonly gender: Gender; // 用关键字 readonly 表明这是一个只读属性
public static x: string = '静态属性x';
public static foo() {
console.log(`类 ${this.name} 有一个 ${this.x}`);
}
constructor(name: string, age: number, gender: Gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
get fullName(): string {
const suffix = this.gender === 1 ? '先生' : '女士';
return this.name + suffix;
}
set FullName(value: string) {
console.log(`你已改名为 ${value} `);
}
// 抽象方法，具体实现交由子类完成
abstract sayHello(): void;
}
class Chinese extends Person {
public kungfu: string;
public static bar() {
console.log(`类 ${this.name} 的父类是 ${super.name}`);
super.foo();
}
public constructor(name: string, age: number, gender: Gender, kungfu: string) {
super(name, age, gender);
this.kungfu = kungfu;
}
public sayHello(): void {
console.log(`你好我是 ${this.fullName} ,我 ${this.age} 岁了`);
}
public martial() {
console.log(`${this.name} 正在修炼 ${this.kungfu} `);
}
}
class American extends Person {
static y = '静态属性y';
public static bar() {
console.log(`类 ${this.name} 有自己的 ${this.y} ，还继承了父类 ${super.name} 的 ${super.x}`);
}
public twitter: string;
public constructor(name: string, age: number, gender: Gender, twitter: string) {
super(name, age, gender);
this.twitter = twitter;
}
public sayHello(): void {
console.log(`Hello, I am ${this.fullName} , I'm ${this.age} years old`);
}
public sendTwitter(msg: string): void {
console.log(`${this.name} : `);
console.log(` ${msg}`);
}
}
Person.x; // 静态属性x
Person.foo(); // 类 Person 有一个 静态属性x
Chinese.x; // 静态属性x
Chinese.foo(); // 类 Chinese 有一个 静态属性x
Chinese.bar(); // 类 Chinese 的父类是 Person
American.x; // 静态属性x
American.y; // '静态属性y
American.foo(); // 类 American 有一个 静态属性x
American.bar(); // 类 American 有自己的 静态属性y ，还继承了父类 Person 的 静态属性x
const c: Chinese = new Chinese('韩梅梅', 18, Gender.female, '咏春拳');
const a: American = new American('特朗普', 72, Gender.male, 'Donald J. Trump');
c.sayHello(); // 你好我是 韩梅梅女士 ,我 18 岁了
c.martial(); // 韩梅梅 正在修炼 咏春拳
a.sayHello(); // Hello, I am 特朗普先生 , I'm 72 years old
a.sendTwitter('推特治国'); // 特朗普 : 推特治国
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是怎麼使用JS與TypeScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！