問題是 TypeScript 認為我提供的值UiConfigContext.Provider可能是未定義的。?然而，可能是因為配置可選引數，我確實提供了默認的{ [Permission.Read]: true}. 我不明白為什么它仍然認為它可能是未定義的。我希望這個函式的引數是可選的，所以類似的東西都可以作業：
renderTestComponent();
renderTestComponent({ config: { [Permission.Read]: true });
renderTestComponent({ enterDetails: true });
renderTestComponent({ config: { [Permission.Read]: true }, enterDetails: true );
這是我的代碼（在 TypeScript 游樂場中復制錯誤）
import React, { createContext } from 'react';
enum Permission {
Read = 'Read',
Write = 'Write',
}
type Configuration = Partial<Record<Permission, boolean>>;
export const UiConfigContext = createContext<Configuration | null>(null);
function renderTestComponent(args: {
config?: Configuration;
enterDetails?: boolean;
} = {
config: { [Permission.Read]: true},
enterDetails: false
}) {
<UiConfigContext.Provider value={args.config}>
Test
</UiConfigContext.Provider>
}
uj5u.com熱心網友回復：
通過在config?:型別定義中添加一個問號，TypeScript 假設該屬性可能以undefined. 如果您確定它永遠不會是undefined，請洗掉可選標志。否則檢查它是否已定義
...{args.config ? <UiConfigContext.Provider value={args.config}>
Test
</UiConfigContext.Provider>: null}...
uj5u.com熱心網友回復：
有兩個問題：首先，型別 with?告訴 Typescript 它可能是undefined. 其次，使用您當前的默認引數，它實際上可以undefined在運行時使用，具體取決于您如何呼叫它。
第一個問題可以通過洗掉?.
function renderTestComponent(args: {
config: Configuration; // <-- removed the ?
enterDetails: boolean; // <-- removed the ?
} = {
config: { [Permission.Read]: true},
enterDetails: false
}) {
// ...
}
但是，現在它不接受使用部分物件呼叫它，例如 renderTestComponent({});or renderTestComponent({ enterDetails: true });。在這種情況下，它不會分配默認引數，因為您為其提供了一個值 ( {})。因為config未定義，打字稿現在抱怨。
對于第二個問題，我建議使用默認引數和解構如下。這里我們在每個屬性中分配默認值，而不是一次分配整個物件：
function renderTestComponent({
config = { [Permission.Read]: true },
enterDetails = false
} = {}) {
console.log(config)
}
renderTestComponent();
renderTestComponent({ config: { [Permission.Read]: true }});
renderTestComponent({ enterDetails: true });
renderTestComponent({ config: { [Permission.Read]: true }, enterDetails: true });
這是一個作業示例：https : //tsplay.dev/m0L6Gm
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/337011.html