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

【问题标题】：Typescript error Type 'undefined' cannot be used as an index type打字稿错误类型“未定义”不能用作索引类型
【发布时间】：2021-03-11 08:27:41
【问题描述】：

我正在使用打字稿反应。
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>'.

【问题讨论】：

原因可能是 size 是可选的并且可以是未定义的。尝试删除“？”在类型定义中的大小之后。
好吧，正如错误提示的那样， undefined 不能用作索引类型。 Size 是一个可选属性，因此它可以是未定义的。
请勿发布图片或您的代码或错误消息。以文本形式包含它们
对不起。我应该把 cmets 的代码放在哪里？

标签： reactjs typescript chakra

【解决方案1】：

问题来了

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' | 's' | 'md' | 'lg';

【讨论】：

【解决方案2】：

正如错误所暗示的，FONTSIZE 不会将 undefined 视为未定义大小时可能发生的索引。您可以通过使组件强制使用 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']} />,

【讨论】：

，但我得到了如图 3 所示的错误。
由于您定义了const FONTSIZE: Record<AtomLinkProps['size'], string>，因此您的 AtomLinkProps 的大小是可选的，对象 FONTSIZE 不例外。您应该强制设置大小或为 FONTSIZE 索引提供一个不是可选的类型
我不想强制使用 fontSize。如何为 FONTSIZE 索引提供非可选类型？
@aahhuhuhu 我已经用 SOLUTION2 更新了我的答案，不需要你强制要求尺寸
您可以创建一个演示沙箱吗？