Question

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

我尝试使用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'
    }
]

Answer 1

在Typescript中没有任何反射概念，因此你无法进行类型查找。但是你可能会按照......的方式做一些事情。

// get a reference to the tbody element
var tb = document.querySelector('#out tbody');

// while tb has children, remove the first one
while (tb.childNodes.length) {
  tb.removeChild(tb.childNodes[0]);
}
// tb is now empty

Answer 2

如果您希望保留准确的类型信息，则可以创建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.

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

使用Typescript或javascript

2 个答案: