概述

這是我學習typescript的筆記。寫這個筆記的原因主要有2個，一個是熟悉相關的寫法；另一個是理清其中一些晦澀的東西。供以後開發時參考，相信對其他人也有用。

學習typescript建議直接看中文文檔或英文文檔。我是看的英文文檔。

typescript handbook 學習筆記3

類

基本使用

class Greeter {
    //只讀，必須在聲明的時候或者constructor裏面初始化
    readonly greeting: string;
    //constructor裏面的只讀
    constructor(readonly message: string) {
        this.greeting = message;
    }
    greet() {
        return 'Hello, ' + this.greeting;
    }
}

class Greeter01 extends Greeter {
    constructor(message: string = 'everyone') {super(message);}
    greet() {
        return 'hi, ' + this.greeting;
    }
}

let sam = new Greeter01('world');
sam.greet();
 

public, private和protected

1. public是默認的，如果不聲明就是public。
2. private指只能內部訪問，不能被子類訪問。
3. protected指只能被內部或者子類的實例訪問。

註意：

1. 2個類相同，除了成員相同之外，private和protected的元素必須來自於同一處代碼。
2. 如果一個類的constructor被標記為protected，那麽表示這個類不能被實例化，只能通過它生成子類，然後實例化子類。

存取器

存取器能夠攔截並重寫讀寫屬性的操作，如果只有get沒有set就會被認為是只讀的。

let language = {
  log: ['example', 'test'],
  set current(name) {
    this.log.push(name);
  },
  get current() {
    if (this.log.length === 0) {
        return undefined;
    } else {
        return this.log[this.log.length - 1];
    }
  }
}

language.current = 'EN';
console.log(language.current);
 

靜態屬性和方法

在屬性或方法前面加上static就是靜態屬性或方法了，實例屬性或方法用this訪問，靜態屬性或方法用類名來訪問。

抽象類

抽象類和接口類似，只能被繼承，不能被實例化，和接口不同的是，抽象類可以定義一些方法，這些方法可以被繼承。

抽象類也有抽象屬性，抽象屬性和接口一樣，一定要在子類中實現。

類當做接口使用

很好理解，看下面這段代碼即可。

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};
 

函數

簡寫形式和完整形式

由於編譯的時候可以從簡寫形式推斷出完整形式，所以推薦用簡寫形式。

//簡寫形式
function add(x: number, y: number): number {
    return x + y;
}
let myAdd = function(x: number, y: number): number { return x + y; };

//完整形式
let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; };

可選參數和默認參數

//可選參數
function buildName(firstName: string, lastName?: string) {
    return firstName + " " + lastName;
}
//默認參數
function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}

可選參數和默認參數的函數類型是相同的：(firstName: string, lastName?: string) => string。為了書寫方便，默認參數寫在後面比較好。

參數多的話也可以解構和展開，示例如下：

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;

this

關於this的原理請看這裏：理解js中的函數調用和this。

如果遇到this報錯，可以通過添加this: void或者this: 類名 來解決。

註意下面這種直接用等號的寫法是一種實驗性的寫法，es6並不支持，只在es7上做了提案。但是typescript和react都對這種寫法做了支持.

//用瀏覽器的審查元素運行，會報錯
class Handler {
    onClickGood = () => { console.log(this); }
}

一般如果要用等號的話，我們需要寫在constructor裏面(註意要加this)。

//寫在constructor裏面
class Handler {
    constructor() {
        this.onClickGood = () => { console.log(this); }
    }
}

let myHandler = new Handler();
myHandler.onClickGood();

函數重載

看下面的例子，註意前2個才是函數重載，最後一個是函數聲明。在編譯的時候，會逐一判斷函數類型，如果這2個都不符合，就會報錯。

let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
    // Check to see if we're working with an object/array
    // if so, they gave us the deck and we'll pick the card
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    }
    // Otherwise just let them pick the card
    else if (typeof x == "number") {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 };
    }
}

typescript handbook 學習筆記4