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

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 应该有效

如果它是字符串映射，你可以使用

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

TypeScript gives error when calling .size on a map in React

dictionary

typescript

reactjs