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]);