迭代TypeScript中的接口属性

ss2ws0br  于 2023-03-04  发布在  TypeScript
关注(0)|答案(4)|浏览(160)

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

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 }
})
4xrmg8kj

4xrmg8kj1#

你不能,接口只用于编译时,因为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在Playground)

ztmd8pv5

ztmd8pv52#

如果您可以在编译时添加它,并且您使用的是TypeScript〉= 2.4.1,则可以尝试建议的here方法。
基本上,您应该添加the ts-transformer-keys dependency,自定义变压器,就像一个基本的变压器一样,您将能够列出如下属性:

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

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

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

huwehgph3#

如果你想保留接口的能力,你可以做以下的事情,@Nitzan Tomer是对的。2接口是类型系统的一部分,因此它们只在编译时才有意义,因为它们在编译代码中被忽略了。

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))
cl25kdpy

cl25kdpy4#

这种方法可能有点过头,但我使用它是因为我需要JSON模式来验证后端的响应结构。从接口获取键只是将类型脚本接口转换为JSON模式的一个不错的副作用:
Using a typescript to json schema converter,可以获得接口键及其类型。生成的json对象又大又冗长,因此解析助手函数可以方便地按照您想要的方式递归构造更简单的JS对象。好消息是json模式总是具有相同的结构,因此很容易导航。

相关问题