代码之家 › 专栏 › 技术社区 › l_r

使用Typescript或javascript动态获取类成员的名称和值

member typescript class angular javascript

l_r · 技术社区 · 7 年前

我对这些语言很陌生,我确信它并没有那么复杂,但找不到如何动态遍历类实例变量。

我试图使用Angular在表中显示实例的变量。我想写一个可以用于任何类的函数。

假设我有一个工作簿类:

export class workbookEntity {
    public name: string;
    public creationDate: string;

    constructor() {
        this.name = 'my work book name';
        this.creationDate = '2018/01/26';
    }
}

假设我想在另一个类的函数中获取这个类的一个实例的变量的名称和值:

export class showClassComponent {
    // some code here

    whenSubmitedInHtmlForm(className: string): void {
        // do something to walk through instance
        // with className parameter = 'workbookEntity'
    }

    // more code there
}

您将如何遍历实例以获取每个变量的名称和值,从而获得类似的结果?

[
    {
        name: 'name',
        value: 'my work book name'
    },
    {
        name: 'creationDate',
        value: '2018/01/26'
    }
]

2 回复 | 直到 7 年前

Barry Tormey 7 年前

Typescript中没有反射的概念,所以您不必进行类型查找。但是你也许可以按照以下方式做一些事情。。。

export class showClassComponent {
    var classes = [ { name: 'workBookEntity', value: new WorkBookEntity() }]

    whenSubmitedInHtmlForm(className: string): void {
        let c = classes.filter(class => class.name == className)[0];
        if(c) {
            let ret = [];

            for (var key in c) {
                if (c.hasOwnProperty(key)) {
                    ret.push({ name: key, value: c[key] });
                }
            }

            return ret;
        }
    }

    // more code there
}

Anthony 7 年前

如果希望能够保留准确的类型信息,可以创建一个pick实用程序函数,然后将其导入到需要使用的类模块中。

let workBook = new WorkbookEntity();

export function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  let newObj = {} as Pick<T, K>;
  for (const key of keys) {
    newObj[key] = obj[key];
  }
  return newObj;
}

console.log(pick(workBook, ['name', 'creationDate']));

// log: { name: 'my work book name', creationDate: '2018/01/26' }

然后,如果希望能够处理多个对象,可以将第一个函数导入另一个实用函数。

export function pickObjects<T extends object, K extends keyof T>
  (objects: T[], keys: K[]): Pick<T, K>[] {
  return objects.reduce((result, obj) => [...result, pick(obj, keys)], []);
}

let workbooks = pickObjects([workBook, workBook2], ['name']);
workbooks[0].name // this exists
workbooks[0].age // Typescript error.

编辑会告诉你年龄是不存在的,因为我们没有选择它

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

9 月前

Alex · 在轻量级中同时解构和不解构变量

9 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

9 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

9 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

user3472810 · Angular@Output/EventEmitter返回undefined

10 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

10 月前