typescript - “编译时”方式获取所有属性名称定义的接口(interface)

Question

我想创建一个通用的 TypeScript 类来呈现(作为 HTML 列表)一组对象，这些对象实现了特定的接口(interface)。

例如

class GenericListRenderer<T> {
  items: T[];

 constructor(listItems: T[], className?: string){
      this.items = listItems;
      ...
    }

    private getPropertyNames(): string[]{

    // What is the best way to access all property names defined in
    // TypeScript interface 'T' that was used in this generic?
    ...   
    }

    render(){
      var propNames: string[] = this.getPropertyNames();
      // render list with each item containing set of all 
      // key(prop name)/value pairs defined by interface 'T'  
      ...

    }
}

问:获取指定 () TypeScript 接口(interface)中定义的所有属性名称的“编译时”列表的最佳方法是什么？

与 C++ 模板一样，我相信 TypeScript 可以在“编译时”解析这些泛型，此时 TypeScript 类型信息(如提供给用于实例化特定对象的泛型的接口(interface))随时可用。

由于可能提供了所有必需的类型信息，我只是好奇是否有 TypeScript 扩展/工具可用于访问此信息而无需对“vanilla”Javascript 对象进行过多的运行时过滤——这可能会出现问题，因为不明确的继承问题(例如，如果使用运行时、泛型、Javascript (obj.hasOwnProperty(prop)) 来过滤属性，则可能会过滤掉所需的 TypeScript 继承接口(interface)属性)。

这种有用的属性自省(introspection)潜力可以在“编译时”期间使用 TypeScript 的父类(super class)型元数据集明确解决，而不是在丢弃所有此类信息时尝试在翻译后的 Javascript 中解决此信息。

如果存在标准 (TypeScript) 方法，我不想用可能不完美的 Javascript hack 来“重新发明轮子”。

Answer 1

这可以通过使用 https://github.com/Microsoft/TypeScript/pull/13940 引入的自定义转换器来实现，在 typescript >= 2.4.1 中可用。

我的 npm 包，ts-transformer-keys , 就是一个很好的例子。

import { keys } from 'ts-transformer-keys';

interface Props {
  id: string;
  name: string;
  age: number;
}
const keysOfProps = keys<Props>();

console.log(keysOfProps); // ['id', 'name', 'age']