Блог

Я пытаюсь изучить typescript и, похоже, не понимаю, как исправить ошибку Type 'undefined' cannot be used as an index type.ts(2538) , сохранив значения реквизитов по умолчанию.

Код:

 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. Таким образом, он жалуется на то, что цветовая опора может быть неопределенной (как это объявлено в PVIconInterface).

Возможное решение

Переместите логику реквизитов по умолчанию в destructuring defaults следующим образом:

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

Если вы хотите увидеть другие или более сложные решения, вот ссылка на хорошую статью о defaultProps и TypeScript: средняя статья

Ps. Это мой первый ответ stack, поэтому, если я допустил ошибку, пожалуйста, поправьте меня 🙂