在TS中如何动态增加类的属性成员

一、前言

最近的工作中接触到一个TS的项目，复杂的封装架构，据说架构着是java出身的，于是项目中出现了数据模型、视图模型等，还有诸多的业务模型。我需要去写模型调用数据，由于之前同事的逻辑中对接口返回数据又进行了封装，现在要求用新的接口定义返回数据模型，这就导致写代码过程中，我用的很多属性在原来定义的模型中没有，TS检查不通过，出现了大量错误。通过TS中的索引器可以解决这个问题

二、什么是索引器

索引器并不陌生，JS中叫做成员表达式对象[值]，在TS中，默认情况下，不对索引器做严格的类型检查，在索引器中，键的类型可以是字符串或数字，在类中，索引器书写的位置应该在所有成员之前。

三、代码演示

先写一个对字符串类型的

class User {
    [prop:string]:any  // prop名字可以随便起
    constructor(
        public name:string,
        public age:number    
    ){}
    sayHello(){}
}
const u = new User("aa",22);
u.pid = "223"; // 这样也是成立的，虽然类中没有，但符合索引器规则不报错，因此可以用索引器随意添加属性

再来看一个数字类型的

class MyArray {
    [index:number]:string
    0 = "1" // 这在ts里是成立的，会被编译成在构造函数constructor中的this[0] = 1
    1 = "abc"
    2 = "def"
}
const my = new MyArray();
my[5] = "2"

四、总结

TS中索引器的作用
1、在严格的检查下、可以实现为类动态增加成员
2、可以实现动态的操作类成员
3、在js中，所有的成员名本质上，都是字符串，如果使用数字作为成员名，会自动转换为字符串，在TS中，如果某个类使用了两种类型的索引器，要求两种索引器的值类型必须匹配。
关于业务的总结
对于已经定义的数据返回模型dataType，字段都是确定的。假设data是这个类型的，但我想增加一个是否被选择的字段data.isSelected = true，此时TS就会说dataType不存在属性isSelected，加上索引器就可以了。虽然可以解决这个问题，但这可能并不好，一定程度上打破了TS的类型控制。