Decidí probar y aprender Typescript en mi aplicación React y me encontré con el primer error que no puedo descifrar ni encontrar la respuesta.
¿Es posible acceder solo a una clave específica en el tipo exportado y cambiar su valor?
Así que estoy exportando mi tipo así:
export type MyFirstTestType = { id: number; name: string; price: number; object1: { name: string; price: number; }, object2: { name: string; price: number; },Y luego obtengo los valores de mi API externa
const getTestItems = async (): Promise<MyFirstTestType[]> => await (await fetch('apiEndpoint')).json();En JS clásico, simplemente crearía un nuevo estado por precio
const [itemPrice, setItemPrice] = React.useState(data.price) y luego actualice fácilmente el estado con la función onClick . ¿Es posible lograr algo como esto con TypeScript? Entonces, ¿puedo actualizar solo el precio de MyFirstTestType ?
Intenté algo similar:
const [price, setPrice] = React.useState<MyFirstTestType>({price: 100}); Pero este error de lanzamiento de -> Escriba '{ precio: número; }' faltan el resto de las propiedades en MyFirstTestType (id, nombre,...)
El ejemplo en su pregunta es engañoso.
JS: const [itemPrice, setItemPrice] = React.useState(data.price)
TS: const [price, setPrice] = React.useState<MyFirstTestType>({price: 100});
En el ejemplo de JS, está inicializando itemPrice con un valor de data.price (no está claro de dónde provienen data ). Tenga en cuenta que mientras setItemPrice actualizará su variable itemPrice , no actualizará el valor en el objeto de data como parece pensar. Pero en el ejemplo de TS, está haciendo algo diferente: está inicializando price con un objeto completamente nuevo.
Ahora el punto es: ¿qué tipo de valor va a mantener el price ?
Si ese será un precio simple (como en el ejemplo de JS), su declaración de tipo es incorrecta, porque está declarando ese valor como MyFirstTestType .
Si de hecho tendrá un valor de tipo MyFirstTestType , entonces ciertamente debe pasar una instancia válida de MyFirstTestType como valor inicial (o undefined ). Y el aspecto de una instancia válida de MyFirstTestType depende de su declaración de tipo.
Pero tenga en cuenta que, ya sea en JS o en TS, debe tratar su estado como inmutable: la única diferencia aquí es la verificación de tipo.
En primer lugar, debe usar la interfaz en lugar del tipo
Puede usar otro tipo para su tipo setState que extienda el tipo de origen
export interface MyFirstTestType { id: number; name: string; price: number; object1: { name: string; price: number; }; object2: { name: string; price: number; }; } export interface MyFirstTestTypeState extends Partial<MyFirstTestType> { name?: string; price: number; object1?: { name: string; price: number; }; object2?: { name: string; price: number; }; } En este caso, id y otro serían opcionales solo para el estado, pero para su solicitud puede usar el que id y otro no son opcionales, aún puede ver las propiedades de MyFirstTestType y usarlas, la única diferencia es que ahora puede actualizar cualquier propiedad que desee. desear
Ahora impórtelo y luego en su estado de uso
const [price, setPrice] = useState<MyFirstTestTypeState>({price:2}); Aquí está el ejemplo de caja de arena
https://codesandbox.io/s/cranky-hooks-zwisw?file=/src/App.tsx:154-224