我創建了 SelectProps 界面！
export interface SelectProps {
value: string
options: string[]
onChange: (value: any) => void
}
我創建了反應組件！
<Select
value="red"
options={['dark', 'white']}
onChange={(value) => console.log(value)}
/>
如何使 value 成為選項的值之一 ('dark' | 'white') ？也就是說，我想得到這種型別：
type Value = 'dark' | 'white'
我必須馬上說這個解決方案不適合：
const options = ['dark', 'white'] as const
type Value = typeof options[number]
uj5u.com熱心網友回復：
這是如何做到的：
export interface SelectProps<O extends string> {
value: O & {}
options: O[]
onChange: (value: O) => void
}
const Select = <O extends string>(props: SelectProps<O>) => <div></div>
正如其他人所說，SelectProps需要通用。我們將O其用作陣列，options并用作 的型別value。這里重要的是兩件事：
首先，與欄位的空物件的{}交集value。這向 TypeScript 發出信號，表明該value欄位不應用于推斷O.
其次，我們限制O為string. 這讓 TypeScript 可以推斷字串文字型別'dark' | 'white'，而不僅僅是string.
function main() {
return (
<div>
<Select
value="red" // Error: Type '"red"' is not assignable to type '"dark" | "white"'
options={['dark', 'white']}
onChange={(value) => console.log(value)}
/>
<Select
value="dark"
options={['dark', 'white']}
onChange={(value) => console.log(value)}
/>
</div>
)
}
操場
uj5u.com熱心網友回復：
您需要使用打字稿泛型：
export interface SelectProps<Value> {
value: Value
options: Value[]
onChange: (value: Value) => void
}
但是你還需要改變Select組件，所以它也需要一個type parameter，并將它傳遞給SelectProps介面：
function Select<Value>(props:SelectProps<Value>){
...
}
uj5u.com熱心網友回復：
在界面中添加您的型別
export interface SelectProps {
value: Value
options: Value[]
onChange: (value: Value) => void
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/515574.html
標籤：反应打字稿
下一篇：如何根據兩個屬性獲取不同的值