获取通用对象字段作为数组答案

【问题标题】：Getting generic object field as array获取通用对象字段作为数组
【发布时间】：2020-04-15 10:48:14
【问题描述】：

我有一个对象，我想在GenericComponent 中使用它的数组属性serviceElements。

对象

interface MyObject {
    id: number;
    serviceElements: ServiceElement[];
}

interface ServiceElement {
    id: number;
}

通用组件

interface Props<Type> {
    service: GenericService<Type>;
}

export default class GenericComponent<Type> extends React.Component<Props, {}> {
    ....

    private fillDataTable = (): void => {

        service.list().then((data: Type[]) => {

            data.forEach(record => {

                // 1st attempt
                const array: ServiceElement[] = record['serviceElements'];

                // record['serviceElements'] gives the error:
                /* TS7053: Element implicitly has an 'any' type because expression of type '"serviceElements"' can't be used to index type 'unknown'.
                    Property 'serviceElements' does not exist on type 'unknown'.
                */

                //////////////

                // 2th attempt
                const array: ServiceElement[] = record['serviceElements' as keyof Type];

                // const array gives the error:
                /* TS2322: Type 'Type[keyof Type]' is not assignable to type 'ServiceElement[]'.
                     Type 'Type[string] | Type[number] | Type[symbol]' is not assignable to type 'ServiceElement[]'.
                       Type 'Type[string]' is not assignable to type 'ServiceElement[]'.
                */
            }

        }

    }

    ....

}

在页面内部，GenericComponent 将像这样使用：

<GenericComponent<MyObject> service={new MyObjectService()}/>

那么，我怎样才能进入GenericComponent record 的字段serviceElements 作为数组循环呢？

我添加了codesandbox

【问题讨论】：

我们可能无法仅根据以上信息为您提供帮助，我们需要更多详细信息。但您可能想要const array = record.serviceElements;。不需要括号符号，TypeScript 会从 record.serviceElements 的类型推断出 array 的类型。
@T.J.Crowder 我刚刚编辑了这个问题。抱歉，我只是不想通过发送所有不必要的代码来使其更复杂。我觉得这就够了吗？
Type的定义是什么？您的代码期望 Type 具有字符串索引访问和/或 serviceElements 属性。如果只是 record.serviceElements 不起作用，那么 Type 就没有那种类型。
我注意到您正在做很多显式类型的事情，例如then 处理程序上的data 参数在service.list() 返回的承诺上。如果service.list 是属性定义的，则不需要这样做，这样做会使维护更加困难。
@T.J.Crowder Type 的定义在这种情况下是 MyObject 因为我称之为 <GenericComponent<MyObject>../>。而且我很确定MyObject 有serviceElements，正如你在上面看到的。我认为打字稿编译器只是不允许any 类型。我也将service.list().then((data: Type[]) 更改为service.list().then(data，确实不需要这样做；）

标签： javascript typescript typescript-generics

【解决方案1】：

你可能需要.map()

data.map(m => m.serviceElements)
    .forEach(se => {
        // TODO: THINGS
    });

【讨论】：

m.serviceElements 给出错误：TS2339: Property 'serviceElements' does not exist on type 'Type'.