我决定尝试在我的 React 应用程序中学习 Typescript,但我遇到了第一个错误,我无法弄清楚或找到它的答案。
是否可以仅访问导出类型中的一个特定键并更改其值?
所以我像这样导出我的类型:
export type MyFirstTestType = {
id: number;
name: string;
price: number;
object1: {
name: string;
price: number;
},
object2: {
name: string;
price: number;
},
然后我从我的外部 API 获取值const getTestItems = async (): Promise<MyFirstTestType[]> =>
await (await fetch('apiEndpoint')).json();
在经典 JS 中,我只会为价格创建新状态 const [itemPrice, setItemPrice] = React.useState(data.price)
然后使用 onClick
轻松更新状态功能。是否可以使用 TypeScript 实现这样的目标?所以我只能更新 价格 来自 MyFirstTestType
?我尝试过类似的事情:
const [price, setPrice] = React.useState<MyFirstTestType>({price: 100});
但是这个抛出错误 -> Type '{ price: number; }' 缺少 MyFirstTestType
中的其余属性(身份证,姓名,...)
最佳答案
您问题中的示例具有误导性。
JS:const [itemPrice, setItemPrice] = React.useState(data.price)
技术支持:const [price, setPrice] = React.useState<MyFirstTestType>({price: 100});
在 JS 示例中,您正在初始化 itemPrice
值来自 data.price
(不清楚data
来自哪里)。请注意,虽然 setItemPrice
将更新您的 itemPrice
变量,它不会更新 data
上的值如你所想的那样反对。但是在 TS 示例中,您正在做一些不同的事情:您正在初始化 price
与一个全新的对象。
现在的重点是:price
是什么值?要举行吗?
如果这将是一个简单的价格(如在 JS 示例中),那么您的类型声明是错误的,因为您将该值声明为 MyFirstTestType
.
如果它确实拥有 MyFirstTestType
类型的值那么你一定要通过一个有效的MyFirstTestType
实例作为初始值(或 undefined
)。以及如何有效的MyFirstTestType
实例看起来像,取决于你的类型声明。
但请注意,无论是在 JS 还是在 TS 中,您都应该将您的状态视为不可变的:这里唯一的区别是类型检查。
关于javascript - typescript :是否可以只为导出类型中的一个键设置状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68679975/