typescript - Właściwość 'white' nie istnieje w typie tailwind types

Jestem nowy w TypeScript i próbuję zrozumieć, co robię źle.

Zainstalowałem @types/tailwindcss w wersji 2.2.4 i próbuję stworzyć powiadomienie typu toast, które powinno używać koloru motywu, więc oto kod:

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",
    }
}

ale this.colors.white wyrzuca błąd mówiący:

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

Śledziłem TailwindThemeColors w @types/tailwindcss i jest to:

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;
}

Usunąłem tę część ((getters: { theme: any; negative: any; colors: any; breakpoints: any }) => T) | i zadziałało, ale wiesz, to jest zewnętrzny pakiet i nie powinno się go w ten sposób modyfikować.

Próbuję zrozumieć, co robię źle? i co ta linia kodu, którą usunąłem, ponieważ nie znalazłem jej podczas przeglądania dokumentacji TypeScript.

czy jest sposób, aby ustawić właściwy typ, bez po prostu ignorowania błędu?

Odpowiedź #1

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

TailwindThemeGetter<T> jest albo funkcją, albo T, więc TypeScript chce, abyś sprawdził, czym to jest. Coś w rodzaju:

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

Musisz obsłużyć sytuację, gdy jest to funkcja, aby móc mieć domyślny kolor (co zrobiłem powyżej) lub zgłosić wyjątek.