'compile-time' 方式来获取所有属性名称定义的接口 [英] 'compile-time' way to get all property names defined interface

问题描述

我想创建一个通用的 TypeScript 类来呈现(作为 HTML 列表)实现特定 interface 的对象数组.

I'd like to create a generic TypeScript class for rendering (as a HTML list) of an array of objects which implement a specific 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 接口中定义的所有属性名称的编译时"列表的最佳方法是什么?

Q: what would be the best way to get a 'compile-time' list of all property names defined in the specified () TypeScript interface?

与 C++ 模板一样，我相信 TypeScript 可以在编译时"解析这些泛型，此时 TypeScript 类型信息(如提供给用于实例化特定对象的泛型的接口)很容易获得.

Like C++ templates, I believe that TypeScript could resolves these generics during "compile time", when TypeScript type information (like an interface supplied to the generic used to instantiate a particular object) is readily available.

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

Since all the required type information is potentially supplied, I was just curious if there was a TypeScript extension/facility available to access this info w/o excessive runtime filtering of 'vanilla' Javascript objects -- which might be problematic due to ambiguous inheritance issues (e.g. desired TypeScript inherited interface properties may get filtered out if runtime, generic, Javascript (obj.hasOwnProperty(prop)) is used for filtering properties).

这种有用的属性内省潜力可以在编译时"期间使用 TypeScript 的类型元数据超集明确解决，而不是在所有这些类型信息都被丢弃时尝试在翻译的 Javascript 中解析此信息.

This useful property introspection potential could be unambiguously resolved with TypeScript's super-set of type meta-data during 'compile-time' vs trying to resolve this information in the translated Javascript, when all of this type information is discarded.

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

I'd hate to 'reinvent-the wheel' with a potentially imperfect Javascript hack if a standard (TypeScript) approach exists.

推荐答案

这可以通过使用由 https://github.com/Microsoft/TypeScript/pull/13940，在 typescript >= 2.4.1 中可用.

This is possible by using custom transformers introduced by https://github.com/Microsoft/TypeScript/pull/13940, which is available in typescript >= 2.4.1.

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

My npm package, ts-transformer-keys, is a good example.

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

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

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

这篇关于'compile-time' 方式来获取所有属性名称定义的接口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！