TypeScript中如何用表示字段的字符串访问interface对应属性

你原来的写法存在两个问题：

1. 点语法不支持传入动态变量访问属性，必须使用方括号[]语法
2. 入参f的类型为string，范围过宽，TypeScript无法确认它是目标interface的合法属性，会触发类型报错

标准实现方案（编译期类型安全） #

核心是用keyof关键字把入参的类型约束为目标interface的合法属性集合，搭配方括号访问属性：

// 定义interface（TS约定接口名首字母大写，也可按你的需求保留原名foo）
export interface Foo {
    field1: boolean;
    field2: boolean;
}

// 实例化对象
const fooInstance: Foo = {
    field1: true,
    field2: false
};

// 方法实现，keyof Foo表示入参只能是'field1'|'field2'两种合法值
function findValue(f: keyof Foo): boolean {
    // 动态属性用方括号访问
    return fooInstance[f];
}

调用效果：

findValue('field1') // 正常返回 true
findValue('field3') // 编译阶段直接报错，避免非法属性访问

兼容任意字符串入参的方案（需运行时校验） #

如果入参是前端无法确定的外部字符串（比如后端接口返回、用户输入），可以加一层类型守卫做运行时校验：

// 类型守卫，判断传入字符串是否为Foo的合法属性
function isFooKey(key: string): key is keyof Foo {
    return ['field1', 'field2'].includes(key);
}

function findValue(f: string): boolean | undefined {
    if (isFooKey(f)) {
        return fooInstance[f];
    }
    // 非法属性的兜底逻辑，可根据需求修改
    return undefined;
}

内容的提问来源于stack exchange，提问作者vicki