TypeScript 中类的动态 getter 和设置

Question

我在课堂上使用动态 getter 检索数据时遇到问题。这是我得到的错误：元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型“UserProps”。在类型“UserProps”.ts(7053) 上未找到具有“字符串”类型参数的索引签名这是代码interface UserProps {  name?: string;  age?: number;}export class User {  constructor(private data: UserProps) {}  get(propName: string): number | string {    return this.data[propName];  }  set(update: UserProps): void {    Object.assign(this.data, update);  }}

Answer 1

我能找到的最干净的解决方案如下：

interface UserProps {

    name?: string;

    age?: number;

}

export class User {

    constructor(private data: UserProps) {}

    // Add generic magic here

    get<K extends keyof UserProps>(propName: K): UserProps[K] {

        return this.data[propName];

    }

    set(update: UserProps): void {

        Object.assign(this.data, update);

    }

}

或者，您可以添加任意键索引以及更新 get 语句的类型。

interface UserProps {

    name?: string;

    age?: number;

    // this next line is important

    [key: string]: string | number | undefined;

}

export class User {

    constructor(private data: UserProps) {}

    // number|string changed to number|string|undefined

    get(propName: string): number | string | undefined {

        return this.data[propName];

    }

    set(update: UserProps): void {

        Object.assign(this.data, update);

    }

}