我正在嘗試為一個 React 組件創建一個 props 型別，它可以有某些欄位，但也可以有另外兩個欄位。但是它們必須同時指定，或者根本不指定。
我試圖通過以下示例實作這一目標：
interface Base {
f: string;
d: string;
}
interface ExtendedBase extends Base {
a: string;
b: string;
}
const obj: Base | ExtendedBase = { // shouldn't this give an error that 'b' is missing?
f: '',
d: '',
a: ''
}
我認為使用 union 它將需要 2 個 Base 欄位或 4 個 ExtendedBase 欄位，但在上面的示例中，僅指定 3 個欄位似乎滿足了 union，但為什么呢？
有什么想法嗎？非常感激。
uj5u.com熱心網友回復：
作為您的型別定義的替代方案，我建議使用Discriminated unions。這樣，您可以將代碼重構為：
interface Common {
f: string;
d: string;
}
interface Base extends Common {
type: 'base'
}
interface ExtendedBase extends Common {
type: 'extendedBase'
a: string;
b: string;
}
const obj: ExtendedBase | Base = { // gives an error that 'b' is missing
type: 'extendedBase',
f: '',
d: '',
a: '',
}
uj5u.com熱心網友回復：
我認為，您可以使用型別別名
例如，
type MyType = {
a?: true,
b?: string
} | {
a?: false,
b?: string
}
在這里， if ais assigned/truethen b 將是必需的，如果您不想分配或保留aas false，則b不需要。
希望這有幫助！
祝你好運:-D
uj5u.com熱心網友回復：
obj您定義的變數可以包含 aBase或 anExtendedBase但分配時的約束實際上是“每個屬性屬于一種型別，而另一種屬性必須存在于分配的值中”。
必須在被分配的值中的實際鍵obj只有fand d，您可以分配，{ f: '', d: '', a: '' }因為它至少有fand d。
如果你想保留這個資料結構，你可以保留這個解決方案并利用基于控制流的型別縮小：
interface Base {
f: string;
d: string;
}
interface ExtendedBase extends Base {
a: string;
b: string;
}
const obj: Base | ExtendedBase = {
f: '',
d: '',
a: '',
}
if(!('a' in obj)) {
// obj is considered to be of type Base in this code block
obj.a; // Property 'a' does not exist on type 'Base'.
obj.b; // Property 'b' does not exist on type 'Base'.
obj.d; // OK
obj.f; // OK
} else {
// obj is considered to be of type ExtendedBase in this code block
obj.a; // OK
obj.b; // OK
obj.d; // OK
obj.f; // OK
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/377269.html
標籤：打字稿