轉載
TypeScript基礎入門 - 類 - 高級技巧
項目實踐倉庫
https://github.com/durban89/typescript_demo.git
tag: 1.1.5
為了保證后面的學習演示需要安裝下ts-node蚪腐,這樣后面的每個操作都能直接運行看到輸出的結果。
npm install -D ts-node
后面自己在練習的時候可以這樣使用
npx ts-node 腳本路徑
類
高級技巧
構造函數(shù)
當你在TypeScript里聲明了一個類的時候凌净,實際上同時聲明了很多東西豌骏。 首先就是類的 實例的類型喂江。
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter: Greeter;
greeter = new Greeter('Gowhich');
console.log(greeter.greet());
運行后得到如下結果
$ npx ts-node src/classes_7.ts
Hello, Gowhich
這里,我們寫了 let greeter: Greeter着帽,意思是 Greeter類的實例的類型是 Greeter。 這對于用過其它面向對象語言的程序員來講已經(jīng)是老習慣了移层。
我們也創(chuàng)建了一個叫做 構造函數(shù)的值仍翰。 這個函數(shù)會在我們使用 new創(chuàng)建類實例的時候被調用。 下面我們來看看观话,上面的代碼被編譯成JavaScript后是什么樣子的予借,如下所示
var Greeter = /** @class */ (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter;
}());
var greeter;
greeter = new Greeter('Gowhich');
console.log(greeter.greet());
上面的代碼里, var Greeter將被賦值為構造函數(shù)匪燕。 當我們調用 new并執(zhí)行了這個函數(shù)后蕾羊,便會得到一個類的實例。 這個構造函數(shù)也包含了類的所有靜態(tài)屬性帽驯。 換個角度說龟再,我們可以認為類具有 實例部分與 靜態(tài)部分這兩個部分。讓我們稍微改寫一下這個例子尼变,看看它們之間的區(qū)別:
class Greeter {
static standardGreeting: string = 'Hello, World';
greeting: string;
greet() {
if (this.greeting) {
return "Hello, "+this.greeting;
} else {
return Greeter.standardGreeting;
}
}
}
let greeter1: Greeter;
greeter1 = new Greeter();
console.log(greeter1.greet());
let greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = 'Hello, other';
let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet());
運行后得到的結果如下
$ npx ts-node src/classes_7.ts
Hello, World
Hello, other
這個例子里利凑, greeter1與之前看到的一樣。 我們實例化 Greeter類嫌术,并使用這個對象哀澈。 與我們之前看到的一樣。
再之后度气,我們直接使用類割按。 我們創(chuàng)建了一個叫做 greeterMaker的變量。 這個變量保存了這個類或者說保存了類構造函數(shù)磷籍。 然后我們使用 typeof Greeter适荣,意思是取Greeter類的類型现柠,而不是實例的類型。 或者更確切的說弛矛,"告訴我 Greeter標識符的類型"够吩,也就是構造函數(shù)的類型。 這個類型包含了類的所有靜態(tài)成員和構造函數(shù)丈氓。 之后周循,就和前面一樣,我們在 greeterMaker上使用 new万俗,創(chuàng)建 Greeter的實例湾笛。
把類當做接口使用
類定義會創(chuàng)建兩個東西:類的實例類型和一個構造函數(shù)。 因為類可以創(chuàng)建出類型该编,所以你能夠在允許使用接口的地方使用類迄本。
class Point {
x: number;
y: number;
}
interface Point3D extends Point {
z: number;
}
let point3d: Point3D = {
x: 1,
y: 2,
z: 3,
}
console.log('point3d = ', point3d);
運行后得到的結果如下
$ npx ts-node src/classes_7.ts
point3d = { x: 1, y: 2, z: 3 }
本實例結束實踐項目地址
https://github.com/durban89/typescript_demo.git
tag: 1.1.6