根據 Typescript，此代碼存在以下問題：Argument of type 'number' is not assignable to parameter of type 'SetStateAction<T>'.ts(2345).
使用型別或型別聯合代替泛型的類似版本將起作用（實際上，可能會建議使用具有所有預期型別的??聯合）。
不過，如果我想堅持使用泛型，我將如何修改此代碼以使其被接受？
import React, { Dispatch, SetStateAction, useState } from 'react';
function useValue<T>(init: T) {
return useState<T>(init);
}
function SpecialButton<T>({
value,
setValue,
}: {
value: T;
setValue: Dispatch<SetStateAction<T>>;
}) {
switch (typeof value) {
case 'number':
return <button onClick={() => setValue(value 1)}>Add 1 to {value}</button>;
default:
return <div>UNSUPPORTED</div>;
}
}
function App() {
const [value, setValue] = useValue<number>(0);
return <SpecialButton value={value} setValue={setValue} />;
}
（另外，我注意到在型別等于數字的情況下，值將被強制轉換為T | number，但我不知道如何利用它）。
uj5u.com熱心網友回復：
我可以向您建議下一種縮小型別的方法：
function useValue<T>(init: T) {
return useState<T>(init);
}
type Parameters<T> = {
value: T;
setValue: Dispatch<SetStateAction<T>>;
};
const isNumberParams = (parameters: { value: unknown }): parameters is Parameters<number> =>
typeof parameters.value === 'number';
const isStringParams = (parameters: { value: unknown }): parameters is Parameters<string> =>
typeof parameters.value === 'string';
function SpecialButton<T>(params: Parameters<T>) {
if (isNumberParams(params)) {
return (
<button onClick={() => params.setValue(params.value 1)}>Add 1 to {params.value}</button>
);
}
if (isStringParams(params)) {
return (
<button onClick={() => params.setValue(params.value '1')}>Add 1 to {params.value}</button>
);
}
return <div>UNSUPPORTED</div>;
}
function App() {
const [value, setValue] = useValue<number>(0);
return <SpecialButton value={value} setValue={setValue} />;
}
uj5u.com熱心網友回復：
我會嘗試像這樣宣告一個自定義型別：
import React, { Dispatch, SetStateAction, useState } from 'react'
// Declare custom Type:
type StateActionType<T> = SetStateAction<T>
然后你在你的SpecialButton宣告中使用它：
// Use the custom Type:
function SpecialButton<T>({ value, setValue } : {
value: T,
setValue: Dispatch<StateActionType<T>>
}) {
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/410124.html
標籤：