我有一個名為useDropdownSelection. 這很簡單。這是代碼：
import { useState } from 'react'
export const useDropdownSelection = (initialValue: string) => {
const [selectedOption, setSelectedOption] = useState<string>(initialValue)
const handleClick = (event: React.MouseEvent<HTMLLIElement>) => {
const target = event.target as HTMLElement
setSelectedOption(target.innerText)
}
return [selectedOption, handleClick]
}
如您所見，該handleClick函式的型別為(event: React.MouseEvent<HTMLLIElement>) => void
但是當我將它匯入我的 index.tsx 時，handleClick無論出于何種原因，該函式都變成了型別string | ((event: MouseEvent<HTMLLIElement, MouseEvent>) => void)
const [selectedDropdownOption, handleDropdownClick] = useDropdownSelection('Most upvotes') // const handleDropdownClick: string | ((event: MouseEvent<HTMLLIElement, MouseEvent>) => void). WHY?
為什么會這樣？
我認為這與我回傳陣列的事實有關？
uj5u.com熱心網友回復：
如果你在自定義 Hook 中回傳一個陣列，你會想要避免型別推斷，因為 TypeScript 會推斷一個聯合型別（當你實際上想要在陣列的每個位置使用不同的型別時）。
如果你想避免聯合型別，你需要做的是使用 const 斷言：
return [selectedOption, handleClick] as const;
現在selectedOption和handleClick將分別保持它們的型別。
檔案：https ://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/hooks/#custom-hooks
uj5u.com熱心網友回復：
這是因為您沒有指定useDropdownSelection將為每個索引回傳特定型別的陣列，因此 TS 假定每個索引可能同時包含回呼和字串值。檢查下面的示例：
const f = (s: string) => {
const n: number = 5;
return [s, n];
}
const result = f('s');
result是一種(string | number)[]型別。要明確告知它將是 [string, number] 你必須像下面這樣實作它：
const f = (s: string): [string, number] => {
const n: number = 5;
return [s, n];
}
const result = f('s'); // type is [string, number]
上面介紹的語法類似于由 useState 實作的語法。
因此，在您的示例中，顯式鍵入掛鉤的回傳值：
export const useDropdownSelection = (initialValue: string): [string, (event: MouseEvent<HTMLLIElement, MouseEvent>) => void] => {...}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/482444.html
下一篇：如何匯出原型方法？