嘗試將作為泛型結果的值分配給Merge物件型別（鍵值型別）時出現語法錯誤：
type Merge<a,b> = any
type test<P, S= any, K= any> = {
jsx1?: (state: Merge<K, S>, props: P, nextJsx?) => JSX.Element; //ok
jsx2?: ({state: S, props: P, nextJsx}) => JSX.Element; // ok
jsx3?: ({ state: Merge<K, S>, props: P, nextJsx }) => JSX.Element; // error - why?
// ^ WebStorm: ", expected" ^ VSCode: ';' expected.(1005)
};
IDE：WebStorm
為什么這被認為是語法錯誤？我如何分配jsx3->state型別Merge？
打字稿 4.4.4。
在 VSCode 中：結果非常相似，但錯誤出';'expected.ts(1005)在箭頭函式上。TS Playground 中的相同錯誤：
操場
uj5u.com熱心網友回復：
在簽名({state: S, props: P, nextJsx}) => JSX.Element，S而P不是型別，它們是識別符號。在這種情況下，冒號:并不表示型別注釋，它表示重新系結屬性的名稱，如下例所示：
const obj = {foo: 23};
// bar is not a type annotation here
const {foo: bar} = obj;
// 23
console.log(bar);
我不確定引數重新系結在型別宣告中的用處是什么，但無論好壞，這就是它的意思。所以錯誤是因為Merge<K, S>它不是重新系結的有效識別符號；但實際上你jsx2和你的jsx3宣告都有問題，只是你沒有收到另一個錯誤。
解決方案是將型別放在一個地方，在背景關系中，它們實際上是型別；即在引數的型別注釋中。
type Test<P, S=any, K=any> = {
jsx1?: (state: Merge<K, S>, props: P, nextJsx?) => JSX.Element;
jsx2?: (params: {state: S, props: P, nextJsx}) => JSX.Element;
jsx3?: (params: {state: Merge<K, S>, props: P, nextJsx}) => JSX.Element;
}
請注意，引數是一個名為 的單個物件params，它的型別現在出現在型別注釋背景關系中，因此它不會被決議為重新系結識別符號。此外，盡管params型別宣告中只有一個命名引數，但在實際實作這些函式時，仍然完全可以進行引數解構（和重新系結，如果您愿意）：
const test: Test<number, number, number> = {
jsx2: ({state, props, nextJsx}) => console.log(state, props, nextJsx),
jsx3: ({state, props, nextJsx}) => console.log(state, props, nextJsx),
};
游樂場鏈接
uj5u.com熱心網友回復：
您正在使用不同的名稱解構你的物件jsx2和jsx3自己輸入。在jsx3這種情況下，這是無效的語法。您想要做的是正確鍵入函式引數：
type Merge<A,B> = any;
type JSX2Args<P, S> = {
state: S,
props: P,
nextJsx: unknown
}
type JSX3Args<P, S, K> = {
state: Merge<K, S>,
props: P,
nextJsx: unknown
}
type test<P, S= any, K= any> = {
jsx1?: (state: Merge<K, S>, props: P, nextJsx?) => JSX.Element;
jsx2?: (arg: JSX2Args<P, S>) => JSX.Element;
jsx3?: ({ state, props, nextJsx }: JSX3Args<P, S, K>) => JSX.Element;
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/370085.html