TypeScript-索引簽名和只讀屬性

索引簽名概述

• 索引簽名用於描述那些 “通過索引得到” 的類型，比如 arr[10] 或 obj["key"]
• 只要 key 和 value 滿足索引簽名的限定即可, 無論有多少個都無所謂

• 首先來看看 obj["key"] 的形式

interface FullName {
    [propName: string]: string
}

let obj: FullName = {
    firstName: 'Jonathan',
    lastName: 'Tang',
}

console.log(obj["firstName"]);

如果不滿足接口索引簽名限定的類型會報錯如下：

• 無論 key 是什么類型最終都會自動轉換成字符串類型, 所以如下的代碼就沒有報錯

interface FullName {
    [propName: string]: string
}

let obj: FullName = {
    firstName: 'Jonathan',
    lastName: 'Tang',
    false: '666'
}

console.log(obj["firstName"]);

• 不報錯的原理也挺簡單的，還是如上那句話 無論 key 是什么類型最終都會自動轉換成字符串類型 來驗證一下這一點即可其實在我 ES6 文章當中已經說過了所以基礎好還是非常重要的

• 再來看看 arr[10] 的形式
• 方式一

interface stringArray {
    [propName: number]: string
}

let arr: stringArray = {
    0: 'a',
    1: 'b',
    2: 'c'
};

console.log(arr[0]);

• 方式二

interface stringArray {
    [propName: number]: string
}

let arr: stringArray = ['a', 'b', 'c'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

只讀屬性概述

• 讓對象屬性只能在對象剛剛創建的時候修改其值
• 在只讀屬性限定前面添加 readonly 即可

interface FullName {
    firstName: string
    readonly lastName: string
}

let myName: FullName = {
    firstName: 'Jonathan',
    lastName: 'Lee'
};

myName.lastName = 'Wang';
console.log(myName);

• TS 內部對只對屬性進行了擴展，擴展出來了一個 只讀數組（ReadonlyArray）

let arr2: ReadonlyArray<string> = ['a', 'b', 'c'];
console.log(arr2[0]);
arr2[0] = '666';
console.log(arr2[0]);