TypeScript 在 React 中的地图上调用 .size 时出错

Question

我正在编写一个 React 组件，我在其中将地图作为道具传递并稍后读取它的大小。 当我使用 TypeScript 键入地图时，我没有收到任何错误，但是当我在地图上调用.size时出现错误。 此外，当我尝试映射该数组时，我也会收到错误消息。

映射本身包含键和值对，它们都是字符串。

代码：

import * as Styled from './assignments-list.styles'

type TMap<T> = {
    [index: string] : T
}

type TAssignmentsListProps = {
    assignments: TMap<string>
}

const AssignmentsList = ({assignments}: TAssignmentsListProps) => {

    return (
        <Styled.AssignmentsList>
            <Styled.Header> 
                Assignments
            </Styled.Header>
                {
                    (assignments && assignments.size !== 0) ? // error here
                    <Styled.ListFiles>
                        {
                            Array.from(assignments).map(([name, url]) => { // error here
                                return (
                                    <li key={name}> 
                                        <Styled.ListItemWrapper>
                                            <Styled.FileName>
                                                {name}
                                            </Styled.FileName>
                                            <Styled.RemoveFile>
                                                View
                                            </Styled.RemoveFile>
                                        </Styled.ListItemWrapper>
                                    </li>
                                )
                            })
                        }
                    </Styled.ListFiles> :
                    <Styled.BodyText>None</Styled.BodyText>
                }
        </Styled.AssignmentsList>
    )
}

export default AssignmentsList

有任何想法吗？

Answer 1

我不明白assignments的真正类型是什么

这里错误assignments.size !== 0因为您试图将字符串与数字进行比较，这总是错误的。

如果可以固定，按固定类型

type TMap<T> = {
  [index: string]: T
} & {
  size: number
}

或者

type TMap<T> = Map<string, T>

或者，如果它是字符串映射，您可以使用

assignments && Object.keys(assignments).length !== 0

根据实际地图类型将地图转换为数组。 如果它Map那么Array.from应该可以工作

如果它映射字符串，您可以使用How to convert an Object {} to an Array [] of key-value pairs in JavaScript