typeScript面對對象篇二

接口

接觸過面向對象的後端語言的應該對接口很熟悉，只接觸過前端的對接口會有點陌生，在維基百科中對OOP中接口的定義是這樣的：

在面向對象的語言中，術語interface常常被用來定義一個不包含數據和邏輯代碼但用函數簽名定義了行爲的抽象類型。

實現一個接口能夠被當作是簽署了一份協議,接口比如是協議，當咱們簽署它時，必須遵照它的規則，接口的規則是方法和屬性的簽名，咱們不想實現它們。

在typescript中最經常使用到接口的場景是用接口做爲參數的類型檢查。

interface BaseButtonProps {
  icon: string;
}
function printButton(buttonProps: BaseButtonProps) {
  console.log(buttonProps.icon);
}
let myObj = {icon:'add'};
printButton(myObj);

在調用printButtonh函數的時候類型檢查器會查看參數對象是要求包含icon屬性的。

可選屬性

用?來這個屬性是可選屬性

interface BaseButtonProps {
  icon?: string;
}

只讀屬性

屬性名前用 readonly來指定只讀屬性

interface BaseButtonProps {
   readonly icon?: string;
}

泛型類型

先看下簡單泛型

function greetNane<T>(name:T):T{
    return name
}

let myIdentity: <T>(name: T) => T = greetNane;

咱們還能夠使用帶有調用簽名的對象字面量來定義泛型函數：

function greetNane<T>(name:T):T{
    return name
}
let myIdentity: {<T>(name: T): T} = greetNane;

這引導咱們去寫第一個泛型接口了。 咱們把上面例子裏的對象字面量拿出來作爲一個接口：

interface GenericIdentityFn<T> {
    (arg: T): T;
}

function greetNane<T>(name:T):T{
    return name
}

let myIdentity: GenericIdentityFn<number> = greetNane;

泛型類

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

泛型類看上去與泛型接口差很少。 泛型類使用（ <>）括起泛型類型，跟在類名後面。

泛型約束

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // Now we know it has a .length property, so no more error
    return arg;
}

如今這個泛型函數被定義了約束