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 }
});

（code in playground）

Answer 2

如果可以在编译时添加它并且使用TypeScript> = 2.4.1，则可以尝试建议的here。

基本上，您应该像基本的一样添加the ts-transformer-keys dependency，custom transformer，并且可以列出如下属性：

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

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

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

Answer 3

如果您想保持界面能力，可以执行以下操作，@ 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 4

这种方法可能有点矫kill过正，但是我还是使用它，因为无论如何我都需要JSON模式来验证后端的响应结构。从接口获取密钥只是将Typescript接口转换为JSON模式的一个很好的副作用：

Using a typescript to json schema converter，可以获取接口密钥及其类型。生成的json对象很大且很冗长，因此可以使用解析帮助器函数以递归方式构造更简单的JS对象。好消息是，json模式始终具有相同的结构，因此易于导航。

typescript迭代接口属性

4 个答案: