3

In typescript, you can define an interface and create an instance of it by declaring a variable of that interface type and setting the properties appropriately like this.

interface Thing{
  id: number,
  name: string
}

const thing: Thing = {
    id:1,
    name:'my thing'
}

However, if I have a method or function that returns that interface type I cannot figure out how to return an instance of it without first creating a variable to return.

So I can do this:

function getThing(): Thing {
  const thing: Thing = {
    id:1,
    name:'my thing'
  }
  return thing;
}

I can't figure out, what if any, is the correct syntax to do this

function getThing(): Thing {  
  return: Thing = {
    id:1,
    name:'my thing'
  }
}

I know I can do this:

function getThing(): Thing {  
  return <Thing> {
    id:1,
    name:'my thing'
  };
}

But that removes some amount of type checking that I would rather remain.

Is it possible to return an instance of an interface without declaring a variable and without casting?

2 Answers 2

3

Just directly return it, Typescript will know that the thing you're returning should in fact be a Thing:

interface Thing{
  id: number,
  name: string
}

function getThing(): Thing {  
  return {
    id:1,
    name:'my thing'
  }
}

See TypeScript Playground.

3
  • Typescript knows but the IDE (for example VSCode) will not complain if you add a property to the return object that does not exist in the interface. While declaring a variable of type Thing and initializing it that way, it will show an error if you try to add a property that is not defined in the interface.
    – Johnny
    Mar 1 at 19:42
  • 1
    @Johnny In my experience, the above is caught by both the compiler and IDE. For example, see the playground link in my post. Perhaps your IDE has a more lenient config? Specific tsconfig settings perhaps? Mar 2 at 18:14
  • you are right, this seems to be a VSCode issue. I was not able to find why VSCode is not reporting this as an error. Thanks anyway.
    – Johnny
    Mar 6 at 21:10
1

You can either return the instance directly

function getThing(): Thing {  
  return {
    id:1,
    name:'my thing'
  };
}

Or to specify explicitly that the instance is of type Thing via as operator:

function getThing(): Thing {  
  return {
    id:1,
    name:'my thing'
  } as Thing;
}

Note that in the 2nd example, adding the as Thing part is un-necessary

5
  • I had thought I tried that and it didn't work but I must have made some other mistake because now I have just amended my actual code and it works fine. Aug 28, 2021 at 14:38
  • 1
    I would avoid the “as”. You are actually weakening the type checking when you include that. Aug 28, 2021 at 14:45
  • @LindaPaiste Thanks I figured that was probably the case. Aug 28, 2021 at 14:46
  • @LindaPaiste Of course, there is no need to add as here. That was just an additional note ;)
    – Dorin Baba
    Aug 28, 2021 at 14:47
  • This answer is not enforcing the property checks, you can add a property in the returned object that does not exist in the interface. The solution should show an error if returning an object with extra properties that are not in the declared interface
    – Johnny
    Mar 1 at 19:40

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.