TypeScript 入門指北（二）

時間 2019-11-07

標籤 typescript 入門简体版

原文原文鏈接

上篇文章咱們提到了爲何要學 TypeScript，以及經過 TypeScript 跟 JavaScript 的簡單對比，熟悉了 TypeScript 一些較爲基礎的語法。

學過面向對象的同窗都知道，面向對象的三個基本要素就是：html

封裝
繼承
多態

在 TypeScript 中，這幾種語法都與之有密切的聯繫：前端

函數
接口
類
泛型

固然，函數和接口在上篇文章已經講過了，這篇文章着重講一下類。typescript

類

在面向對象編程(OOP)中，類是對對象的一個高度的抽象。打個比方，女友能夠當作一個對象，由於女友是具體的一我的；而女人/人則能夠當作一個類，由於它是泛指的。
編程

根據這個關係，咱們能夠用 TypeScript 來定義一個 Woman 類而且 new 一個對象（女友）出來：微信

class Woman {}
let girlFriend = new Woman()

能夠看到，這個對象什麼都沒有，接下來咱們給她添加點屬性上去，讓她變得更立體一些。函數

屬性

屬性包含：post

私有屬性（private）: 屬性被聲明爲 private（私有）以後，不能在類以外的地方訪問。
公有屬性（public）：若是不標記，則屬性默認被聲明爲 public（公有）。
保護屬性（protected）：屬性被聲明爲 protected（保護）以後，不能再類以外的地方訪問，可是能夠在派生類中訪問，也就是說在它的子類中能夠訪問這個屬性。
靜態屬性（static)：屬性被聲明爲 static（靜態），此時該屬性屬於類而不屬於類的實例或者子類，相應的須要在屬性前加上類名才能訪問。

咱們簡單拓展下上面那段代碼，給 Woman 類添加幾個屬性：this

姓名
身高
年齡
...

class Woman {
    public name: string;
    public height: number;
    private age: number;
}

在拓展這個類的時候咱們發現，其實 Woman 類還可以再抽象成人類（Person)，而這就涉及到了繼承。spa

繼承

咱們定義一個 Person 類，並讓 Woman 繼承 Person：code

// 父類
class Person {
    public height: number;
    protected name: string;
    public age: number;
    constructor (name: string, height: number, age: number) {
        this.name = name
        this.height = height
        this.age = age
    }
}
// 子類
class Woman extends Person {
    constructor(name: string, height: number, age: number) {
        super(name, height, age)
    }
}
let girlFriend = new Woman('girl', 180, 18)

抽象類和抽象方法

抽象類 和 抽象方法 的定義方式都是在前邊加一個 abstract 關鍵字，不一樣的是，抽象類 能夠包含具體的屬性和函數實現，可是 抽象函數 則必須在子類中實現。換言之，抽象類 能夠擁有本身的獨立行爲，可是 抽象函數 則跟接口（interface）相似，不包括具體的實現。

所以，上面的例子咱們能夠再進行拓展，將 Person 定義成一個抽象類，再讓 Woman 繼承它

// 父類
abstract class Person {
    public height: number;
    protected name: string;
    public age: number;
    constructor (name: string, height: number, age: number) {
        this.name = name
        this.height = height
        this.age = age
    }
    abstract moYu (): void;
    walk (): void {
        console.log('walk')
    }
}
// 子類
class Woman extends Person {
    constructor(name: string, height: number, age: number) {
        super(name, height, age)
    }
    moYu () {
        console.log('今天你摸魚了嗎？')
    }
}
let girlFriend = new Woman('girl', 180, 18)

這裏 Person 的屬性是否認義，取決於 Person 中是否存在非抽象函數，不然沒有必要寫。