How to let typescript know about the type of data when mapping variables from an object?-CodePudding

I have the following code:

type ToDo = {
  id: number;
  title: string;
  completed: boolean;
}

const { data: todo, pending } = await useLazyAsyncData(...)

I need to declare type for todo variable. I've tried something like

const { data: (todo as ToDo), pending } = await useLazyAsyncData(...)

But it does not work. How to do it properly?

CodePudding user response：

You could try using an interface, like this

interface CustomType {
  data: ToDo;
  pending: boolean;
}

const { data, pending } = (await useLazyAsyncData(...)) as CustomType

CodePudding user response：

I'm not really sure what you want to do, and where the actual error is, as the code fragment you provided is just that - a fragment...

So I made some pseudo code that (mostly) satisfies TypeScript Playground

type ToDo = {
  id: number;
  title: string;
  completed: boolean;
}
type useLazyAsyncDataReturnType = {
    data: ToDo;
    pending: any;
}
async function whatever(){
    const { data, pending }:useLazyAsyncDataReturnType = await useLazyAsyncData();
   }

const useLazyAsyncData = ():useLazyAsyncDataReturnType => {
    const returnValue: useLazyAsyncDataReturnType = {data:{id: 2, title:'me', completed:true}, pending: 2};
    return returnValue;
}

You do successfully declare you data-type of ToDo (case-sensitive!);

afterwards you (try to) declare an anonymous object to which you then assign a function definition. That's not working.

You could declare a named variable (in the main scope), but not a constant, as it is supposed to get a (new) value at some point in time and you would have to assign it a value at creation-time. Which would work, as long as you only update it's 'inner' properties, but makes litte sens. You could do it like that:

let answer:{data:ToDo, pending:any};

that way you have a variable that is prepared to deal with the (likely) return-type of you function.

You code means to the compiler that you make an object with a property 'data' and you (try to) assign a value of ToDo as that property value. But you are missing out on using a variable name after 'const'...

Edit: as you mean it as a destructing assignment, you could not use the colon as type assignment, so you would have to leave it to the implicit typing to the return type of the promise's return type;

// const needs to be followed by a valid variable name.
// inside the object constructor {} the colon assigns values to properties
// it does not define types
const test = {stuff: 3, otheStuff: 'abc'};

// as destructing assignment:
const {data, pending}:returnType = await someFunction();

where return type:

type returnType = {
    data: ToDo;
    pending: any;
}

ant that needs also to be the promise's resolve return type.

await only works inside async functions, but you probably left that part out to shorten your example. But after await a call to a function that returns a Promise is expected (you are defining a function there!) and the await in turn returns the promises resolve return type

As I guess your promises resolve return type is {data:ToDo, pending:any} I defined that type too as functions only can return one value, and set that as return type of the function that I defined outside the async function;

The function itself is useless, I just made it return the expected typt to satisfy the playground compiler.