Тип «неопределенный» не может быть присвоен типу «по умолчанию» | "красный" | "зеленый" | "синий"

Question

Я использую React и TypeScript в своем приложении. Как избавиться от ошибки ниже?

      import { styled } from "linaria/react";

type Color = {
  color: "default" | "red" | "green" | "blue";
};


const handleColorType = ({ color }: Color) => {
  switch (color) {
    case "default":
      return "#03a9f3";
    case "red":
      return "#f56342";
    case "green":
      return "#f56342";
    case "blue":
      return "#f56342";
    default:
      return "#fff";
  }
};

export const Title = styled.h1`
  font-size: 50px;
  display: inline-flex;
  margin: 150px auto 0;
  color: ${({ color }) => handleColorType({ color // <---- here I get the error })};
`;

Затем я получаю эту ошибку Typescript:

(свойство) цвет: "по умолчанию" | "красный" | "зеленый" | "синий" Введите строку | undefined» нельзя присвоить типу «по умолчанию» | "красный" | "зеленый" | "синий"'. Тип «неопределенный» не может быть присвоен типу «по умолчанию» | "красный" | "зеленый" | "синий".ts(2322) color.ts(2, 3): ожидаемый тип исходит из свойства "цвет", которое объявлено здесь для типа "Цвет"

Answer 1

Попробуйте определить тип опоры как цвет в стилизованном компоненте.

       color: ${({ color }: Color) => handleColorType({ color })};

потому что теперь это просто необязательная строка