typescript - 타입 'tailwind types'에는 속성 'white'가 존재하지 않습니다

저는 TypeScript 초보이고 제가 무엇을 잘못하고 있는지 이해하려고 노력하고 있습니다.

저는 @types/tailwindcss 버전 2.2.4를 설치했고 테마 색상을 사용해야 하는 토스트를 만들려고 하고 있습니다. 그래서 코드가 다음과 같습니다:

import iziToast, {IziToastSettings} from "izitoast";
import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "@base/tailwind.config" ;


class Toast {
    config = resolveConfig(tailwindConfig);
    colors = this.config.theme!.colors!;
    default: IziToastSettings = {
        messageColor: this.colors.white,
        iconColor: this.colors!.white,
        position: "topRight",
    }
}

하지만 this.colors.white 는 다음과 같은 오류를 발생시킵니다:

TS2339: Property 'white' does not exist on type 'TailwindThemeColors'

저는 @types/tailwindcss에서 TailwindThemeColors를 추적했으며, 그것은 다음과 같습니다:

export type TailwindThemeGetter<T> = ((getters: { theme: any; negative: any; colors: any; breakpoints: any }) => T) | T;

export type TailwindThemeColors = TailwindThemeGetter<TailwindValuesColor>;

export interface TailwindValuesColor {
    readonly [key: string]: TailwindColorValue;
}

나는 이 부분 ((getters: { theme: any; negative: any; colors: any; breakpoints: any }) => T) | 를 제거했더니 작동했지만, 알다시피 이건 외부 패키지이기 때문에 이렇게 조작하면 안 됩니다.

제가 무엇을 잘못하고 있는지 이해하려고 노력하고 있습니다. 그리고 제가 Typescript 문서를 조사하는 동안 찾지 못해서 제거한 이 코드 줄이 무엇인지 궁금합니다.

오류를 무시하지 않고 올바른 유형을 설정할 방법이 있나요?

답변 #1

export type TailwindThemeGetter<T> = ((getters: { theme: any; negative: any; colors: any; breakpoints: any }) => T) | T;

`TailwindThemeGetter<T>`는 함수이거나 `T`이므로 TypeScript는 당신에게 그것이 무엇인지 테스트하라고 요구합니다. 예를 들어:

class Toast {
    config = resolveConfig(tailwindConfig);
    white = typeof (theme?.colors) === 'object' ? theme.colors?.['white'] : 'white';
    default: IziToastSettings = {
        messageColor: this.white,
        iconColor: this.white,
        position: "topRight",
    }
}

함수인 경우를 처리해야 합니다. 그래서 기본 색상을 가질 수 있거나(위에서 제가 한 것처럼) 예외를 던질 수 있습니다.