TypeScript--類(Class)與接口(interface)

接口定義對象的類型

一種定義複雜類型的格式, 好比咱們用對象格式存儲一篇文章, 那麼就能夠用接口定義文章的類型:

interface Article {
    title: stirng;
    count: number;
    content:string;
    fromSite: string;
}

const article: Article = {
    title: '爲vue3學點typescript(2), 類型',
    count: 9999,
    content: 'xxx...',
    fromSite: 'baidu.com'
}

複製代碼

在這種狀況下,當咱們給article賦值的時候, 若是任何一個字段沒有被賦值或者字段對應的數據類型不對, ts都會提示錯誤, 這樣就保證了咱們寫代碼不會出現上述的小錯誤.

非必填(?)

仍是上面的例子, fromSite的意思是文章來自那個網站,若是文章都是原創的, 該字段就不會有值, 可是若是咱們不傳又會提示錯誤, 怎麼辦? 這時候就須要標記fromSite字段爲非必填, 用"?"標記:

interface Article {
    title: stirng;
    count: number;
    content:string;
    fromSite?: string; // 非必填
}

// 不會報錯
const article: Article = {
    title: '爲vue3學點typescript(2), 類型',
    count: 9999,
    content: 'xxx...',
}

複製代碼

用接口定義函數

接口不只能夠定義對象, 還能夠定義函數:

// 聲明接口
interface Core {
    (n:number, s:string):[number,string]
}

// 聲明函數遵循接口定義
const core:Core = (a,b)=>{
    return [a,b];
}

複製代碼

類實現接口

實現（implements）是面向對象中的一個重要概念。通常來說，一個類只能繼承自另外一個類，有時候不一樣類之間能夠有一些共有的特性，這時候就能夠把特性提取成接口（interfaces），用 implements 關鍵字來實現。這個特性大大提升了面向對象的靈活性。

先簡單看下如何給類定義接口:

// 定義
interface Animate {
    head:number;
    body:number;
    foot:number;
    eat(food:string):void;
    say(word:string):string;
}

// implements
class Dog implements Animate{
    head=1;
    body=1;
    foot=1;
    eat(food:string){
        console.log(food);
    }
    say(word:string){
        return word;
    }
}
複製代碼

一個類能夠實現多個接口：

interface Alarm {
    alert();
}

interface Light {
    lightOn();
    lightOff();
}

class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}
複製代碼

上例中，Car 實現了 Alarm 和 Light 接口，既能報警，也能開關車燈。

接口繼承接口

接口與接口之間能夠是繼承關係：

interface Alarm {
	alert();
}

interface LightableAlarm extends Alarm {    
	lightOn();    
	lightOff();
}
複製代碼

上例中，咱們使用 extends 使 LightableAlarm 繼承 Alarm。

接口繼承類

接口也能夠繼承類：

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

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};
複製代碼

混合類型

能夠使用接口的方式來定義一個函數須要符合的形狀：

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}
複製代碼

有時候，一個函數還能夠有本身的屬性和方法：

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;
複製代碼