TypeScript入門-類

longmon 發布于2019-08-20 15:34 / 1777人閱讀

摘要：可以使用關鍵字來定義類的靜態屬性，示例代碼如下輸出輸出抽象類有抽象類的概念，他是供其他類繼承的基類，不能直接實例化。抽象類必須包含一些抽象方法，同時也可以包含非抽象的成員。

學習Angular 2 ，《揭秘Angular 2》讀書筆記。Angular2 選擇 TypeScript 作為其官方最主要的構建語音，這意味著掌握 TypeScript 語音將更有利于高效地開發 Angular 應用。

類

傳統的 JavaScript 程序是使用函數和基于原型（Prototype）繼承來創建可重用的“類”，這對于習慣面向對象編程的開發者來說并不友好。TypeScript 中可以支持使用基于類的面向對象編程。

類的例子

示例代碼如下：

class Car {
    engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
    drive(distanceInMeters: number = 0) {
        console.log(`A car runs ${ distanceInMeters }m powered by` + this.engine);
    }
}

上面聲明了一個汽車類，這個類有三個類成員：

類屬性 engine，可通過 this.engine 訪問

構造函數 constructor

方法 drive

下面實例化一個Car的對象，通過執行構造函數對其初始化。

let car = new Car("petrol");
car.drive(100); // 輸出：A car runs 100m powered by petrol

繼承與多態

封裝、繼承、多態是面向對象的三個特性。上面的例子中把汽車的行為寫到一個類中，即所謂的封裝。在 TypeScript 中，使用 extends 關鍵字即可方便地實現繼承。示例代碼如下：

// 繼承自前文的 Car 類
class MotoCar extends Car {
    constructor(engine: string) { super(engine); }
}

class Jeep extends Car {
    constructor(engine: string) { super(engine); }
    drive(distanceInMeters: number = 100) {
        console.log("Jeep...")
        retrun super.drive(distanceInMeters);
    }
}

let tesla = new MotoCar("electricity");
let landRover: Car = new Jeep("petrol");

tesla.drive();    // 調用父類的 drive() 方法
landRover.drive(200);    // 調用子類的 drive() 方法

從上面的例子可以看到，MotoCar 和 Jeep 是基類Car的子類，通過 extends 來繼承父類，子類可以訪問父類的屬性和方法，也可以重寫父類的方法。Jeep 類重寫了父類的 drive() 方法，這樣 drive() 方法在不同的類中就具有不同的功能，這就是多態。

修飾符

在類中的修飾器可以分為公共（public）、私有（private）和受保護（protected）三種類型。

public 修飾符
在 TypeScript 里，每個成員默認為 public，可以被自由訪問，我們也可以顯式地給 Car 類里定義的成員加上 public 修飾符，示例代碼如下：

class Car {
    public engine: string;
    public constructor(engine: string) {
        this.engine = engine;
    }
    public drive(distanceInMeters: number = 0) {
        console.log(`A car runs ${ distanceInMeters }m powered by` + this.engine);
    }
}

private 修飾符
當類成員被標記為 private 時，就不能在類的外部訪問它，示例代碼如下：

class Car {
    private engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
}

new Car("petrol").engine;    // 報錯：engine 屬性是私有的，只能在類內部訪問

protected 修飾符
protected 修飾符與 private 修飾符的行為很相似，但有一點不同，protected 成員在派生類中仍然可以訪問，示例代碼如下：

class Car {
    private engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
    drive(distanceInMeters: number = 0) {
        console.log(`A car runs ${ distanceInMeters }m powered by` + this.engine);
    }
}
class MotoCar extends Car {
    constructor(engine: string) { super(engine); }
    drive(distanceInMeters: number = 100) {
        super.drive(distanceInMeters);
    }
}
let tesla = new MotoCar("electricity");
console.log(tesla.drive());    // 正常
console.log(tesla.engine);    // 報錯

靜態屬性

類的靜態成員存在于類本身而不是類的實例上，我們使用類名. 來訪問靜態屬性。可以使用 static 關鍵字來定義類的靜態屬性，示例代碼如下：

class Grid {
    static origin = {x: 0, y: 0};
    constructor(public scale: number) {}
    calculateDistanceFromOrigin(point: {x: number; y: number;}) {
        let xDist = (point.x - Grid.origin.x);
        let yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
}
let grid1  = new Grid(1.0);

let grid2  = new Grid(5.0);

// 輸出：14.142...
console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
// 輸出：2.828...
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

抽象類

TypeScript 有抽象類的概念，他是供其他類繼承的基類，不能直接實例化。抽象類必須包含一些抽象方法，同時也可以包含非抽象的成員。abstract 關鍵字用于定義抽象類和抽象方法。抽象類中的抽象方法不包含具體實現，但是必須在派生類中實現，示例代碼如下:

abstract class Person {
    abstract speak(): void;    // 必須在派生類中實現
    walking(): void {
        console.log("Walking on the road");
    }
}

class Male extends Person {
    speak(): void {
        console.log("How are you?");
    }
}

let person: Person;    // 創建一個抽象類的引用
person = new Person();    // 報錯，不能創建抽象類實例
person = new Male();    // 創建一個 Male 實例
person.speak();
person.walking();

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82342.html

TypeScript入門教程

摘要：現在，出現了更多本身支持或者通過插件支持語法智能提示糾錯甚至是內置編譯器的文本編輯器和。 TypeScript是什么 TypeScript是JavaScript的一個超集 TypeScript需要編譯為JavaScript才能運行（語法糖） TypeScript提供了類型系統，規范類似Java TypeScript提供了ES6的支持，也可以支持部分ES7草案的特性，不用擔心TypeS...

Dr_Noooo 2019-08-26 11:52 評論0 收藏0
TypeScript入門-接口

摘要：接口類型檢查不會去檢查屬性順序，但是屬性的必須存在且類型匹配。函數的返回值函數的返回值類型必須與接口定義的返回值保持一致。示例代碼如下張三李四張三輸出張三輸出張三索引簽名支持字符串和數字兩種數據類型。學習Angular 2 ，《揭秘Angular 2》讀書筆記。Angular2 選擇 TypeScript 作為其官方最主要的構建語音，這意味著掌握 TypeScript 語音將更有利...

sewerganger 2019-08-21 15:32 評論0 收藏0
TypeScript入門學習之路

摘要：學習之路學習之路安裝環境起步開發工具自動編譯文件中的數據類型中的函數中類的定義繼承中的繼承中的繼承類的靜態屬性和靜態方法類的多態的抽象類中的接口中的泛型學習之路安裝環境查看版本起步新建通過命令編譯此時路徑下 ...

jemygraw 2021-11-22 09:34 評論0 收藏0
TypeScript快速入門

摘要：添加了可選的靜態類型注意并不是強類型和基于類的面向對象編程。類類型接口示例接口更注重功能的設計，抽象類更注重結構內容的體現模塊中引入了模塊的概念，在中也支持模塊的使用。一：Typescript簡介維基百科： TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個嚴格超集，并添加了可選的靜態類型和基于類的面向對象編程。C#的首席架構師以及Delp...

moven_j 2019-08-22 11:11 評論0 收藏0
TypeScript極速完全入門-3ts結合react進行項目開發

摘要：前面我們已經說了大部分的核心內容，接下來我們就說說如何用開發實際項目。因為和結合很緊密，資料也很多，而且我會找機會專門說下這方面的知識，所以我們將重點放到如何用結合上來。所以前面打牢基礎，現在我們開始實際組建工作流。前面我們已經說了大部分typescript的核心內容，接下來我們就說說如何用typescript開發實際項目。因為angular和typescript結合很緊密，資料也...

arashicage 2019-08-22 16:45 評論0 收藏0