這是我的界面：
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;
}
我在App組件中使用這些：
但我有一個問題：this在建構式中宣告一個方法時，據我所知，它與IAppState. 所以我的問題是，我如何宣告/使用既不參考 State 也不參考 Props 的方法的介面？我需要它來設定this組件的方法/屬性。
netInfoSubscription, setTheme- 是我感興趣的。
這是代碼：
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>
);
}
}
uj5u.com熱心網友回復：
你問過兩個相關的事情：setTheme和netInfoSubscription。
你有幾個選擇：
方法語法
你setTheme是一個方法，所以你可以把它寫成一個，并bind在建構式中使用：
export default class App extends React.PureComponent<{},IAppState> {
constructor(props) {
// ...
this.setTheme = this.setTheme.bind(this);
// ...
}
setTheme(theme: string) {
// ...
}
}
這樣做的一個優點setTheme是 on App.prototype，這有時對單元測驗很有幫助（它可以被模擬）。
這適用于setTheme，但不適用于netInfoSubscription; 為此，您將需要以下其他選項之一。
屬性宣告（包括方法）
您可以將您的setTheme寫成一個屬性（當然，netInfoSubscription也是一個屬性）：
export default class App extends React.PureComponent<{},IAppState> {
setTheme = (theme: string) => {
// ...
};
netInfoSubscription?: SubscriptionType;
// Or:
netInfoSubscription: SubscriptionType | null = null;
}
For setTheme，因為這是一個箭頭函式，所以它不需要系結。它關閉的背景關系this是指正在構造的實體。
對于netInfoSubscription，由于我們在實體構造程序中沒有它的值，因此有兩種選擇：
- 用于
?指示該屬性是可選的。 - 使用具有
null我們分配的值的聯合型別，直到/除非我們有訂閱。
請注意，這兩種方法中的任何一種都netInfoSubscription可能是undefined（或null）代碼中的任何位置。對于您知道它不是（但 TypeScript 不知道）的地方，您可以將其抓取到本地常量并進行斷言：
someMethod() {
// If we *know* (from the logic) that we have the subscription now
const { netInfoSubscription } = this;
assertNotNullish(netInfoSubscription);
// ...here you can use `netInfoSubscription`'s value, and TypeScript will understand
// that we now know it has one
// ...
}
assertNotNullish是我的標準實用功能之一，如下所示：
const assertNotNullish: <T>(value: T | undefined | null) => asserts value is T = (value) => {
if (value == null) { // Checks `null` and `undefined`
throw new Error(`Expected value to be non-nullish`);
}
};
游樂場鏈接
注意：您可以只使用非空斷言運算子，但我不會。assertNotNull使用類似的東西運行時檢查您斷言的內容是否正確。使用非空斷言運算子不會，它只是告訴 TypeScript 假設斷言為真。
一個界面
您可以定義一個介面：
interface AppInstanceMembers {
setTheme: (theme: string) => void;
netInfoSubscription?: SubscriptionType;
// ...
}
// ...
export default class App extends React.PureComponent<{},IAppState> & AppInstanceMembers {
// ????????????????????????????????????????????????????????????????^^^^^^^^^^^^^^^^^^^^
constructor(props) {
// ...
this.setTheme = (theme/* You don't have to repeat the type here*/) => {
// ...
};
// ...
}
// ...
}
這告訴 TypeScript 期望setTheme（并且可能netInfoSubscription）在App（您在建構式中滿足）。但這確實意味著您必須重復setTheme.
如前所述，在您從邏輯中知道（但 TypeScript 不知道）netInfoSubscription不會為空的地方，您可以使用assertNotNullish.
uj5u.com熱心網友回復：
簡單的
在建構式之外撰寫函式體
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/468673.html