TS之接口：①屬性接口

接口：

　　在面向對象編程中，接口是一種規范的定義，它定義了行為和動作的規范，在程序設計里面，接口起到一種限制和規范的作用。接口定義了某一批類所需要遵守的規范，接口不關心這些類的內部狀態數據，也不關心這些類里方法的實現細節，它只規定這批類里必須提供某些方法，提供這些方法的類就可以滿足實際需要，typescript中的接口類似於Java，同時還增加了更靈活的接口類型，包括屬性、函數、可索引和類。

分類：

• 屬性類接口
• 函數類型接口
• 可索引接口
• 類類型接口
• 接口擴展

1.屬性接口基本使用

// 對對象進行約束
function printLabel(labelInfo: { label: string }): void {
  console.log(labelInfo.label);
}
// 傳入對象類型參數
printLabel({ label: 'xlx' });　　

對批量方法傳入參數進行約束

interface FullName {
  firstName: string
  secondName: string
}

// 就是傳入對象的約束，屬性接口
function printName(name: FullName) {
  // 必須傳入對象，包含 firstName  secondName
  console.log(name.firstName + '======' + name.secondName);
}

printName({
  firstName: '張',
  secondName: '三',
});

這時如果參數中包含另外一個參數，則會報錯

 

 這時的要求是，對象內必須只有firstName和secondName

解決方法：將參數用外部對象的方式傳入

interface FullName {
  firstName: string
  secondName: string
}

function printName(name:FullName) {
  // 必須傳入對象，包含 firstName  secondName
  console.log(name.firstName+'======'+name.secondName);
}

let obj = {
  firstName: '張',
  secondName: '三',
  age: 20
}

printName(obj);

 此時的要求是只需要obj對象內包含firstName和secondName屬性即可

 （4）屬性接口中屬性的類型

（1）可選屬性

interface Person {
  name: string;
  id?:number
}

let viking:Person = {
  name: "張三",
  id:1
}

上面的Person接口的id屬性后面跟的?表示這個id屬性是可選的，可以定義也可以不定義 

（2）只讀屬性

有些對象屬性只能再對象剛剛創建的時候修改其值。

interface Person {
  name: string;
  readonly id:number
}

let viking:Person = {
  name: "張三",
  id:1
}

viking.id = 9527

 

屬性前面的readonly字段就是約束當前屬性的可讀的，創建了viking實例以后再手動修改只讀屬性id的值，則會報錯：Cannot assign to 'id' because it is a read-only property

typescript具有ReadonlyArray<T>類型，它與Array<T>相似，只是把所有可變方法去掉了，因此可以確保數組創建以后再也不能被修改。

let a: number[] = [1,2,3,4]
let ro: ReadonlyArray<number> = a

ro[0] = 100 // error
ro.push(5) // error
ro.length = 100  // error
a = ro // error