Почему не определяется тип контекста в React?

Question

[HitGirl]

Здравствуйте!

import React from "react";

export const themes = {
    light: {
        foreground: '#000000',
        background: '#eeeeee',
    },
    dark: {
        foreground: '#ffffff',
        background: '#222222',
    },
};

export const ThemeContext = React.createContext(
    themes.dark // default value
);

class ThemedButton extends React.Component {
    static contextType = ThemeContext;
    render() {
        let props = this.props;
        let theme = this.context;
        return (
            <button
                {...props}
                style={{backgroundColor: theme.background}}
            />
        );
    }
}

В строке:
style={{backgroundColor: theme.background}}
Возникает ошибка:
TS2571: Object (theme) is of type 'unknown'.

Подскажите, пожалуйста, как правильно указать тип для контекста?

Comments

[WbICHA]

А навести мышку на this.context очень сложно, да?

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.
static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>

@see — https ://reactjs.org/docs/context.html

declare context: React.ContextType<typeof ThemeContext>

Answer 1

[Антон Иванов]

Ответ ниже. А вообще не понятно зачем вам TypeScript, если вы его нигде в файле не использовали.

export const ThemeContext = React.createContext<string>(
    themes.dark // default value
);

Comments

[WbICHA]

В каком месте это ответ? Это в принципе невалидный код.

[HitGirl]

export const ThemeContext = React.createContext<{foreground: string, background:string}>(
    themes.dark // default value
);

не работает