1. 程式人生 > >TypeScript系列學習筆記-介面(interface)

TypeScript系列學習筆記-介面(interface)

介面簡介:

原則:對值所具有的結構進行型別檢查(核心原則之一)。 它有時被稱做“鴨式辨型法”或“結構性子型別化;

作用:為這些型別命名和為你的程式碼或第三方程式碼定義契約。

語法:宣告關鍵字,interface ,程式碼例項如下:宣告一個介面 IPerson,定義屬性欄位:name,age和可選屬性欄位:sex,同時定義一個SayHi()方法,在定義一個Student類實現(關鍵字:implements)IPerson介面。

  

隱式介面:

//宣告介面
interface Count{
    num1: number;
    num2: number;
}
function Add(para:Count) { 
    return para.num1 + para.num2;
}
//對比,para引數為介面型別(隱式介面)
function Add2(para:{
    num1: number;
    num2: number;
}) { 
    return para.num1 + para.num2;
}

當介面中只包含一個方法時,介面可以當作方法型別實現:

//介面宣告
interface Count{
    (num1: number, num2: number): number; //匿名函式型別,形參number,返回值number
}
//介面實現
let add: Count = function (a,b) {
    return a + b;
}

使用<介面型別>{}隱式宣告一個匿名物件實現介面:

//宣告介面  
interface Count{  
    num1: number;  
    num2: number;  
} 
//隱式宣告一個匿名物件,實現介面
let myCount = <Count>{};
myCount.num1 = 10;
myCount.num2 = 20;

介面支援多繼承(關鍵字:extends),介面之間也可以相互繼承,創建出多個介面的合成介面;

//宣告介面
interface Shape {
    color: string;
}
//介面繼承介面
interface Square extends Shape {
    sideLength: number;
}
//隱式匿名物件實現介面Square
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
//宣告介面
interface Shape {
    color: string;
}
//宣告介面
interface PenStroke {
    penWidth: number;
}
//宣告介面,繼承多個介面
interface Square extends Shape, PenStroke {
    sideLength: number;
}
//隱式匿名物件實現介面Square
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

混合型別一個物件可以同時做為函式和物件使用,並帶有額外的屬性。

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;

關於readonly vsconst:當宣告變數為常量時使用 const,當宣告只讀屬性時使用 readonly。

總結:

1.在介面中可以包含屬性、方法;

2.使用關鍵字 interface 定義介面;

3.屬性可以使用符號"?"標識為可空型別;

4.TS支援隱式介面;

5.介面支援多繼承;

6.可以使用符號"<介面型別>{}"來隱式宣告匿名物件實現介面;