TS學習之接口

TypeScript的核心原則之一是對值所具有的結構進行類型檢查。接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

interface testType {
    name: string;
    age: number;
}　　
function test(obj: testType): void {
    console.log(obj.name);
    console.log(obj.age);
}
test({name:"fred",age:20,height:180})
//fred  20

interface:接口關鍵字，只要傳入的對象滿足接口的必要條件，那么它就是被允許的。

可選屬性（接口定義中加“？”）

interface testType {
    name: string;
    age?: number;
}

只讀屬性（readonly）

interface testType {
    readonly name: string;
    readonly age: number;
}

let test1:testType = {name:"fred",age:20}
test1.name = "Bob"; //error

額外的屬性檢查

interface testType {
    name?: string;
    age?: number;
}

function test(conf: testType): void {

}

test({ nama: "fred", age: 20 }) //error:'nama' dose not exist in type 'testType'

解決方法：a) 斷言

test({ nama: "fred", age: 20 } as testType) //斷言

　　　　b)字符串索引簽名

interface testType {
    name?: string;
    age?: number;
    [propName:string]:any;  //字符串索引簽名
}

　　　　c)中間變量繞過類型檢測

let test2 = { nama: "fred", age: 20 }; //中間變量繞過類型檢測
test(test2)

接口繼承（extends）

interface nameFace {
    name: string;
}
interface ageFace {
    age: number;
}
interface heightFace extends nameFace, ageFace {
    height: number;
}

let person = <heightFace>{};
person.name = "fred";
person.age = 20;
person.height = 180;

 接口繼承類

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

interface Point3d extends Point {
    z: number;
}

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