我想制作 2 個不同的物件，每個物件的型別都略有不同，以與具有兩種型別的值的狀態物件兼容，我收到以下錯誤：
型別 'TypeA | 上不存在屬性 'dataA' B型'。型別“TypeA”.ts(2339) 上不存在屬性“dataA”
，所以我的狀態如下所示
const inicialState: {
dataA: string;
dataB: number[];
groupType: "" | "typeA" | "typeB";
} = {
dataA: ''
dataB: [],
groupType: "";
}
const [state, setState] = useState < typeof inicialState > (inicialState);type TypeA = {
dataA : string
group : 'a1'
};
type TypeB = {
dataB : number[]
group : 'b1'
};
cosnt data : (TypeA | TypeB)[] = [{dataA : 'dataA string', group : 'a1'} ,{dataB : [1,2,3,4,5] ,'b1' }]
// id in filter is coming as props so the id will decied on the object the will be filterd...
const edited = data.filter((el) => el.id === id)[0] as TypeA | TypeB;
// Case 1
if (edited?.mainGroup === 'a1')) {
setState({
...state,
dataA: edited.dataA,
});
return;
}
// Case 2
if (edited?.mainGroup === 'b1') {
setState({
...state,
dataB: edited.dataB,
});
return;
}問題出在 if 塊中，Typescript 不知道我在推動什么狀態，如何在不使用強制轉換的情況下解決這個問題，因為真實物件太大而無法將每個值強制轉換為當前型別。我的部分解決方案是
if (edited?.mainGroup === 'b1') {
let casted = edited as TypeB
setState({
...state,
dataB: casted.dataB,
});
return;
}你會認為這是一個混亂的解決方案，還是可以使它更加集中而不是使用強制轉換，并在 if 陳述句中立即讓 ts 知道我們在這里使用哪種型別，因為我們正在進行檢查？
uj5u.com熱心網友回復：
你有幾個選擇。您的型別和聯合在不同示例之間有些混合。但對我來說，您似乎有兩種型別的資料，以及 useState 掛鉤中的單獨初始狀態。如果您已經為 initialState 定義了型別/介面，您不妨將其分解為已宣告的 interface type InitialState = {...}; useState<InitialState>();。
選項 #1 - 簡潔型別
如果組引數僅用于定義它是什么型別的資料，您可以擺脫它并使用一種單一型別。這將是我個人的偏好，因為它減少了很多地方的型別檢查。唯一需要它的地方是您顯示或訪問資料的地方。
type Type = {
data: string | number[];
};
然后，您可以使用typeof運算子來區分兩者
if(typeof data === 'string') {
// do stuff
} else {
// data is known to be of type number[] here
}
Array.isArray()如果您擴展到兩種以上的型別，您也可以使用該功能。
選項 #2 - 'in' 型別保護
您還可以使用 'in' 函式，打字稿可以使用該函式來縮小或推斷型別。這適用于您的情況，因為 TypeA 和 TypeB 具有不同的屬性。
if(dataA in data) {
// data is of TypeA
}
if(dataB in data) {
// data is of TypeB
}
選項 #3 - 函式型別保護
您還可以選擇創建一個縮小型別的函式
function isTypeA (unknownType: TypeA | TypeB): unknownType is TypeA {
return group === 'a1';
}
function isTypeB (unknownType: TypeA | TypeB): unknownType is TypeB {
return group === 'b1';
}
在此處查看更多資訊：https ://www.typescriptlang.org/docs/handbook/advanced-types.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/517350.html
標籤：反应打字稿