Typescript:类型'undefined'不能用作索引类型.ts(2538)

Rakesh_Kumar

我正在尝试学习打字稿,但似乎并没有设法解决错误Type 'undefined' cannot be used as an index type.ts(2538),保持默认的prop值。

码:

interface PVIconInterface {
  name: string;
  size?: string;
  color?: string;
  rotate?: number
};

// Styled Components
const IconContainer: any = styled.span <{ $fontSize: string, $colorPath: string, $transform: string, theme: any }>`
display: inline-block;
color: ${({ $colorPath, theme }) => getColor($colorPath, theme)};
font-size: ${({ $fontSize }) => $fontSize};
transform: ${({ $transform }) => $transform};
`;

const PVIcon: React.FC<PVIconInterface> = ({ name, size, color, rotate }) => {
 return (
   <IconContainer
     className={`icon-${name}`}
     $colorPath={IconColorMap[color]}  //--- this is where TS gives error coz possible undefined
     $fontSize={IconSizeMap[size]}
     $transform={getTransformStyles(rotate)}
   />
 );
};

PVIcon.defaultProps = {
  color: 'normal',
  size: 'small',
  rotate: 0
};

export default PVIcon;

任何指针都受到高度赞赏!谢谢

一月

Typescript编译器对defaultProps一无所知。因此,它抱怨color prop可能是未定义的(如在PVIconInterface中声明的那样)。

可能的解决方案

将默认的props逻辑移动到破坏默认值的过程中,如下所示:

...
    const PVIcon: React.FC<PVIconInterface> = ({
  name,
  size = "small",
  color = "normal",
  rotate = 0,
}) => {
  return
...

如果您希望看到其他或更复杂的解决方案,请参考以下有关defaultProps和TypeScript的好文章:中级文章

附言 这是我的第一个堆栈答案,所以如果我犯了错误,请纠正我:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

包的类型不能用作供应商的包的类型

为什么我在TypeScript中遇到“类型'String'不能用作索引类型”错误

类型不能用作索引类型

TS2536:类型“ keyof T2”不能用于索引类型“ T1”

类型“未定义”不能用作索引类型

类型'null'不能用作索引类型

F#-类型参数不能用作类型构造函数

打字稿错误-类型'string []'不能用作索引类型

TS2536:即使类型必须是键,也不能用作索引?

类型'string'不能用于索引类型'T'.ts(2536)

如何配置TypeScript来避免:类型'string'不能分配给类型'“ desc” | “ asc” | undefined'.ts(2322)?

类型'undefined'不能用作索引类型

介质不能用作请求的设备类型

类型 'any[]' 不能用作索引类型 Angular 构建

类型“{}”不能用作索引类型

类型“X”不能用作索引类型

类型 '() => Promise<AxiosResponse<any>>' 不能用作索引类型 [ReactJs]

Entity Framework Core:表“Users”中的“Id”列的类型不能用作索引中的键列

Person 类型的 TypeScript 错误 (TS2345) 参数 | undefined 不能分配给 Person 类型的参数

TS7053:元素隐式具有“任何”类型,因为“字符串”类型的表达式不能用于索引“User_Economy”类型

响应 yup 错误类型“未定义”不能用作索引类型。TS2538

TS7053。隐式具有 'any' 类型,因为类型 'string' 的表达式不能用于索引类型 'ZoneI'

TS7053:元素隐式具有“任何”类型,因为“页面”类型的表达式不能用于索引类型“对象”

TS2536:类型不能用于索引类型 ENUM - TS MAPPED TYPES

通用类型索引。TS2536:类型“字符串”不能用于索引类型“T”

打字稿:从嵌套的全局对象访问值 | 键入“字符串”不能用作索引类型

TypeScript 联合类型不能用作数组

类型“键”不能用于索引 TypeScript 中的类型“对象”

错误 TS2538:类型“CCCustomer”不能用作索引类型