获取所有属性名称定义接口的“编译时"方法 [英] '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扩展/功能可用于访问此信息，而无需对原始" 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)方法，我不希望使用可能不完善的Java 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 ，可在> 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 是一个很好的例子. /p>

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']

这篇关于获取所有属性名称定义接口的“编译时"方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！