打字稿错误类型“未定义”不能用作索引类型

问题描述

我正在使用 typescript react。
xs,sm,md,lg 在 props 中传递。
每个尺寸（14px、16px、18px、24px）的 px 被传递给 Icon。 (1)中的错误显示在fontSize={FONTSIZE[size]}的地方。
错误 (2) 显示在 .

错误

①Type 'undefined' cannot be used as an index type.ts(2538)  
②Type '(string & {} & ("xs" | "sm" | "md" | "lg")) | undefined' does not satisfy the constraint 'string | number | symbol'.
  Type 'undefined' is not assignable to type 'string | number | symbol'.ts(2344)

import React from 'react';
import { Link as ChakraLink,LinkProps } from '@chakra-ui/react';
import { FunctionComponent } from 'react';
import { OpenExternalIcon } from './Icon/OpenExternalIcon';

export type AtomLinkProps = LinkProps & {
  iconType?: 'openExternal';
  size?: 'xs' | 'sm' | 'md' | 'lg';
};

const FONTSIZE: Record<AtomLinkProps['size'],string> = {
  xs: '14px',sm: '16px',md: '18px',lg: '24px',};
export const Link: FunctionComponent<AtomLinkProps> = ({
  size,iconType,children,...props
}) => {
  const Icon: Record<'openExternal',JSX.Element> = {
    openExternal: <OpenExternalIcon fontSize={FONTSIZE[size]} />,};
  return (
    <ChakraLink size={size} {...props}>
      {children}
      {Icon[iconType!]}
    </ChakraLink>
  );
};

图片③

图片④ 错误信息

Element implicitly has an 'any' type because expression of type '"lg" | ({} & "xs") | ({} & "sm") | ({} & "md")' can't be used to index type 'Record<FontSizeType,string>'.

解决方法

正如错误所暗示的那样，FONTSIZE 不会将 undefined 作为索引，如果 size 未定义可能会发生这种情况。您可以通过为您的组件强制设置 size 来解决它，或者提供一个默认值作为 FONTSIZE 的键

解决方案 1：

export type AtomLinkProps = LinkProps & {
  color?: ColorType;
  iconType?: 'openExternal'; 
  // make size aa compulsory attribute rather than optional
  size: 'xs' | 'sm' | 'md' | 'lg';
};

解决方案 2：

不是使用 AtomLinkProps 来定义 FONTSIZE 记录键，您可以为 FONTSIZE 使用另一种类型，然后您可以在将 size 作为键传递给 FONTSIZE 时使用默认值

type FontSizeType = 'xs' | 'sm' | 'md' | 'lg';
export type AtomLinkProps = LinkProps & {
  iconType?: 'openExternal';
  size?: FontSizeType;
};
const FONTSIZE: Record<FontSizeType,string> = {
  xs: '14px',sm: '16px',md: '18px',lg: '24px',};

<OpenExternalIcon fontSize={FONTSIZE[size || 'lg']} />,

,

问题来了

export type AtomLinkProps = LinkProps & {
  color?: ColorType;
  iconType?: 'openExternal';
  // size is optional so you can not use this property as index 
  size?: 'xs' | 'sm' | 'md' | 'lg';
};

我认为它会解决问题

尺寸：'xs' | 'sm' | 'md' | 'lg';