使用TypeScript类型在选择列表选项在React?

Question

我正在尝试添加TypeScript类型到以下代码:

const [selectedDevice, setSelectedDevice] = useState<DesktopOrMobile>(DesktopOrMobile.desktop);
const handleChange = (event: React.ChangeEvent<{ value: DesktopOrMobile }>): void => {
setSelectedDevice(event.target.value);
};
<select value={selectedDevice} onChange={handleChange}>
<option value={DesktopOrMobile.desktop}>Desktop</option>
<option value={DesktopOrMobile.mobile}>Mobile</option>
</select>

但是我得到这个错误:

TS2322: Type '(event: React.ChangeEvent<{value: DesktopOrMobile;}>)=比;void'不能赋值给类型'(event: ChangeEvent) =>无效"。参数类型'event'和'event'不兼容。类型'ChangeEvent'不能分配给type'更改事件<{value: DesktopOrMobile;}祝辞 ;'.       类型'HTMLSelectElement'不能赋值给类型'{value:DesktopOrMobile;}'.         属性"值"的类型是不兼容的 .           类型'string'不能赋值给Type"DesktopOrMobile"。

我知道问题是event.target.value从onChange事件的选择列表上有一个类型的string不是DesktopOrMobile，但我不确定什么是最好的解决方案。

更新:我可以使用枚举，但不确定是否有比类型转换更好的方法:

import * as React from "react";
import {useState} from 'react'
enum DesktopOrMobile  {
mobile  = 'mobile',
desktop =  'desktop'
}
export default function App() {
const [selectedDevice, setSelectedDevice] = useState<DesktopOrMobile>(DesktopOrMobile.mobile);
const handleChange = (value: DesktopOrMobile): void => {
setSelectedDevice(value);
};
return (
<div>
<select value={selectedDevice} onChange={e => handleChange(e.target.value as DesktopOrMobile)}>
<option value={DesktopOrMobile.desktop}>Desktop</option>
<option value={DesktopOrMobile.mobile}>Mobile</option>
</select>
</div>
);
}

Answer 1

EDIT

你不能给一个状态指定类型，在这种情况下，你需要声明一个带有你需要的键的对象。

假设DesktopOrMobile类型为:

type DesktopOrMobile = { 
mobile: string,
desktop: string 
}

我认为最好的办法是将值的类型指定为keyof DesktopOrMobile，像这样:

const DesktopOrMobileObj: DesktopOrMobile = {
mobile: "mobile",
desktop: "desktop"
};
type ValueType = DesktopOrMobile[keyof DesktopOrMobile];
const [selectedDevice, setSelectedDevice] = useState<ValueType>(DesktopOrMobileObj.desktop);
const handleChange = (event: React.ChangeEvent<{ value: ValueType }>): void => {
setSelectedDevice(event.target.value);
};
<select value={selectedDevice} onChange={handleChange}>
<option value={DesktopOrMobileObj.desktop}>Desktop</option>
<option value={DesktopOrMobileObj.mobile}>Mobile</option>
</select>

这个事件的值是一个字符串，所以你必须给它分配一个字符串。

顺便说一下，下次也粘贴类型。