Javascript 在TypeScript中迭代接口属性

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

接口活动{
id:string，
标题：字符串，
正文：字符串，
json:Object
}

我目前：

头：数组=[
{文本：'id'，值：'id'}，
{文本：'title'，值：'title'}，
{text:'body'，value:'body'}，
{文本：'json'，值：'json'}
]

这变得非常重复。我想要的是这样的：

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

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

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

headers:Array=Activity.keys.map（key=>{
返回{text:key，value:key}
})

您不能，接口只用于编译时，因为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 }
});

const活动={
id:“”，
标题：“，
正文：“，
json:{}
}
活动类型=活动类型；
常量头：数组=对象.键（活动）.map（键=>{
返回{text:key，value:key}
});

---

（）

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

课堂活动{
公共id:string=''；
公共标题：字符串=“”；
公共机构：字符串=“”；
公共json:Object={}；
}
让活动=新活动（）
常量头：数组=对象.键（活动）.map（键=>{
返回{text:key，value:key}
});
log（JSON.stringify（headers））

如果您可以在编译时添加它，并且您使用的是TypeScript>=2.4.1，那么您可以尝试建议的方法

基本上，您应该添加，像一个基本的，您将能够列出如下属性：

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

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

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

从'ts transformer key'导入{keys}；
界面道具{
id：字符串；
名称：字符串；
年龄：人数；
}
常量keysOfProps=keys（）；
console.log（按键操作）；//['id'、'姓名'、'年龄']

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

---

，可以获得接口键及其类型。生成的json对象很大且冗长，因此解析助手函数可以方便地以您想要的方式递归构造更简单的JS对象。好消息是，json模式总是具有相同的结构，因此很容易导航。

可能是一个明显的问题-第二个活动声明（作为类型）如何不与第一个声明（作为常量）相混淆？@LukeWilliams第一个（

const

）定义是一个值，第二个是类型定义。例如，如果您没有第二个，您将执行以下操作：

let a:Activity

您将得到以下错误：

“找不到名称‘活动’”

。编译器将在不同的时间/情况下使用这些定义。如果我们希望接口的属性是可选的，我们能否实现相同的定义？@velociraptor11无法将编译时间类型转换为运行时，所以没有。您可以做的是从结果数组中筛选出所有具有

未定义

（或

null

）值的项必须删除行

type Activity=typeof Activity<代码>对象。键

仅适用于对象，而不适用于类型。我如何将其用于纯类型脚本项目。。。一个没有网页包？很好的建议！我能够在一个Gulp脚本中使用它来编译，非常容易。如果您需要对我的代码片段的引用，请看：如果您没有使用绑定器，最简单的方法就是使用ttypescript。只需安装它并将该插件添加到您的tsconfig.json就可以了。要使用

create react app

很难：(