TypeScript如何获取类/接口可选属性类型并动态维护数据类型

问题根源说明 #

TypeScript的类型信息仅存在于编译阶段，运行时会被完全擦除。直接通过typeof this[name]只能读取属性的运行时值类型，未赋值的可选属性自然返回undefined。以下是几种针对性解决方案：

方案1：利用反射元数据保留类型信息 #

通过TypeScript的反射元数据特性，在运行时获取编译阶段的类型定义，需要少量配置：

1. 安装依赖：

npm install reflect-metadata

2. 修改tsconfig.json启用相关编译选项：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

3. 改造类实现类型获取：

import 'reflect-metadata';

class Load {
    ID: number;
    Action?: string;

    public getType(name: keyof Load): string {
        // 从元数据中读取属性的设计类型
        const type = Reflect.getMetadata('design:type', this, name);
        return type.name.toLowerCase();
    }

    constructor() { }
}

const _load = new Load();
_load.ID = 5;

console.log(_load.getType("ID")); // 输出 number
console.log(_load.getType("Action")); // 输出 string

方案2：手动维护类型映射表 #

如果不想引入额外依赖，直接定义与类/接口结构对应的类型映射对象，虽然需要手动同步属性，但实现简单直接：

interface Load {
    ID: number;
    Action?: string;
}

// 维护属性与类型的映射关系
const LoadTypeMap: Record<keyof Load, string> = {
    ID: 'number',
    Action: 'string'
};

// 使用时直接从映射表取值
const _load: Load = { ID: 5 };
console.log(LoadTypeMap["ID"]); // number
console.log(LoadTypeMap["Action"]); // string

针对Angular动态渲染需求的落地建议 #

结合你要动态生成输入框、提交时保留原始类型的核心需求，推荐使用类型映射表+提交时类型转换的方案：

1. 定义接口与字段配置：

interface Load {
    ID: number;
    Action?: string;
}

// 配置字段的显示与类型信息
const LoadFieldConfig = [
    { key: 'ID', label: 'ID', type: 'number' as const },
    { key: 'Action', label: '操作', type: 'string' as const }
];

2. 模板中动态渲染输入框：

<div *ngFor="let field of LoadFieldConfig">
    <label>{{ field.label }}</label>
    <input 
        [type]="field.type === 'number' ? 'number' : 'text'"
        [(ngModel)]="formData[field.key]"
    >
</div>

3. 提交时处理类型转换：

submitForm() {
    const payload: Load = { ...this.formData };
    // 统一处理数字类型字段，避免空输入变为空字符串
    LoadFieldConfig.forEach(field => {
        if (field.type === 'number') {
            payload[field.key] = payload[field.key] === '' ? null : Number(payload[field.key]);
        }
    });
    // 调用后端接口提交payload
}

这种方式无需逐个手动处理字段，既能根据类型渲染对应输入框，又能保证提交数据的类型符合后端要求。

内容的提问来源于stack exchange，提问作者once in an blue moon