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

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

member typescript class angular javascript

l_r · 技术社区 · 6 年前

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

我试图使用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 回复 | 直到 6 年前

Barry Tormey 6 年前

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 6 年前

如果希望能够保留准确的类型信息,可以创建一个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.

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

推荐文章