TypeScript系列學習筆記-介面(interface)
阿新 • • 發佈:2019-01-01
介面簡介:
原則:對值所具有的結構進行型別檢查(核心原則之一)。 它有時被稱做“鴨式辨型法”或“結構性子型別化;
作用:為這些型別命名和為你的程式碼或第三方程式碼定義契約。
語法:宣告關鍵字,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.可以使用符號"<介面型別>{}"來隱式宣告匿名物件實現介面;