TypeScript中對象的類型限制——接口

對象的類型–接口(接口在ts中的作用之一)

TypeScript 中的接口是一個非常靈活的概念，除了可用於對類的一部分行爲進行抽象以外，也常用於對對象的形狀進行描述。此篇主要學習對對象的形狀進行描述.

• 接口的定義及使用

interface Person{   //定義接口
    name:string,
    age:number
}

let tom:Person = {   //可以使用
    name:"tom",
    age:18
}   

let merry:Person = { //少一個屬性，不行，報錯
    name:"merry"
}

let lisi:Person = {  //多一個屬性不行,報錯
    name:"lisi", 
    age:18,
    height:180 
}

爲對象指定類型時，必須與接口的’形狀’一模一樣，多一個少一個都會報錯。

• 定義接口的可選屬性

有的時候我們不想要跟接口的屬性一摸一樣，就可以給接口用?號定義可選屬性。

interface Person{
    name:string,
    age:number,
    height?:number   //可選屬性
}

let Tom:Person = {
    name:"tom",
    age:18
}

let Marry:Person = {
    name:"Marry",
    age:18,
    height:180
}

console.log(Tom);
console.log(Marry);

• 定義接口的任意屬性

[propName: string]: any;   //任意屬性的形式

小例子：

interface Person1{
   name:string,
   age?:number,
   [propName:string]:any
}

let timi:Person1 = {
    name:"timi",
    age:18,
    height:180,
    width:270
}

console.log(timi);

需要注意：

1. 確定屬性與可選屬性必須是任意屬性數據類型的子集，否則報錯。
2. 定義任意屬性後，可添加的任意屬性不止一個。

• 定義只讀屬性。

需要注意：只讀的約束存在於第一次給對象賦值的時候，而不是第一次給只讀屬性賦值的時候，還有就是給對象賦值的時候，必須給只讀屬性賦值。

定義方式：屬性前加readonly

interface Pers{
   readonly name:string,
   age?:number,
   [propName:string]:any
}

let dog:Pers={  //正常
 name:"dog"
}

let cat:Pers={   //報錯
   age:18
}