Here are my interfaces:
export type alphaColorProcessing = (opacity: number) => string | string[];export interface welcomeMapping { [key: string]: alphaColorProcessing | string;}export interface IPalette { [key: string]: string | string[] | alphaColorProcessing | welcomeMapping;}export interface IThemeContext { theme: string; palette: IPalette; setTheme?: (theme: string) => void;}export interface IThemeState extends IThemeContext { isDark: Boolean;}export interface IAppState { loading: boolean; themeState: IThemeState;}export interface IAppProps { setTheme?: (theme: string) => void;}
I am using these in App
component:
But I have the problem: while declaring a method on this
, in constructor, as I understand it has nothing to do with IAppState
. So my question is, how can I declare/use an interface for the methods which are refferring neither to State, nor to Props? I need for it for the methods/properties that I'm setting on this
of the component.
netInfoSubscription, setTheme
- is what I am interested in.
here's the code:
export default class App extends React.PureComponent<{},IAppState> { showedForce = false; showedBadIP = false; constructor(props) { super(props); this.setTheme = (theme:string) => { this.setState((state) => ({ themeState: { ...state.themeState, theme, isDark: theme === 'dark', palette: Palette, }, })); }; this.state = { loading: true, themeState: { theme: 'light', isDark: false, palette: Palette, setTheme: this.setTheme, }, }; } componentDidMount() { NetInfo.configure({ reachabilityUrl: 'https://www.cisco.com/', }); this.netInfoSubscription = NetInfo.addEventListener((state) => { handleConnectionStatus(state.isConnected); }); } render() { const { themeState, loading } = this.state; if (loading) return null; return (<Provider store={ Store }><AppearanceProvider><SafeAreaProvider><Root><ThemeContext.Provider value={ themeState }><Navigation /><FingerprintModal /></ThemeContext.Provider></Root></SafeAreaProvider></AppearanceProvider></Provider> ); }}