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

Question

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

我正在尝试使用 Angular 在 table 中显示实例的变量。我想编写一个可以与任何 class.

一起使用的函数

假设我有一个工作簿 class:

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

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

假设我想在另一个 class' 函数中获取此 class 实例的变量的名称和值：

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'
    }
]

Answer 1

没有反射的概念，在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
}

Answer 2

如果您希望能够保留准确的类型信息，您可以创建一个 pick 实用函数，然后将它导入到您的 class 模块中您需要使用它的任何地方。

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.

编辑器会显示年龄不存在，因为我们没有选择它

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

Dynamically get class members names and values using Typescript or javascript

javascript

class

member

typescript

angular