javascript - typescript :是否可以只为导出类型中的一个键设置状态?

标签 javascript reactjs typescript react-hooks setstate

我决定尝试在我的 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/

相关文章:

javascript - Raphael 设置透明 png 不透明度丢失 alpha channel

javascript - 在 Polymer 元素中使用 JavaScript

javascript - 快照监听器 : FirebaseError: Missing or insufficient permissions 中的未捕获错误

javascript - React 中与子组件的交叉观察器

angular - 如何从应用程序的任何位置打开模态

typescript - Angular2 TypeError : linkParams. forEach 不是函数

javascript - 如何从 .t​​hen 返回 promise

javascript - 跨屏幕传递数据

javascript - 以文件作为参数的 React Api 调用

reactjs - 将最新的字符串值保存在 react 状态数组中