typescript迭代接口属性

Question

我需要将接口属性映射到对象:

    interface Activity {
        id: string,
        title: string,
        body: string,
        json: Object
    }

我目前这样做:

   headers: Array<Object> = [
            { text: 'id', value: 'id' },
            { text: 'title', value: 'title' },
            { text: 'body', value: 'body' },
            { text: 'json', value: 'json' }
        ]

这变得非常重复.我想要的是这样的:

   headers: Array<Object> = Activity.keys.map(key => {
       return { text: key, value: key }
   })

Answer 1

你不能,接口仅用于编译时,因为javascript不支持它.

你能做的是:

const Activity = {
    id: "",
    title: "",
    body: "",
    json: {}
}

type Activity = typeof Activity;
const headers: Array<Object> = Object.keys(Activity).map(key => {
    return { text: key, value: key }
});

(游乐场代码)

Answer 2

如果您想保留界面功能，您可以执行以下操作，@Nitzan Tomer 是对的。接口是类型系统的一部分，因此它们仅在编译时相关，因为它们在转译代码中被省略。

class Activity {
    public id: string = '';
    public title: string = '';
    public body: string = '' ;
    public json: Object = {};
}

let activity = new Activity()

const headers: Array<Object> = Object.keys(activity).map(key => {
    return { text: key, value: key }
});

console.log(JSON.stringify(headers))

Answer 3

如果您可以在编译期间添加它，并且使用TypeScript> = 2.4.1，则可以尝试此处建议的方法。

基本上，您应该像基本的一样添加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']