DEV Community

Discussion on: Understanding Generics in TypeScript

View post
Collapse
 
murkrage profile image
Mike Ekkel •

This is a great explanation but I'm still unsure of a situation where I would use generics.

function returnStringOrNumber(arg: string | number) {
  return arg
}
Enter fullscreen mode Exit fullscreen mode

The above example can have multiple return types without the need of a generic.

function returnStringOrNumber(arg: string | number): string | number {
  return arg
}
Enter fullscreen mode Exit fullscreen mode

So I'm not sure how a generic would add to that. Granted, that's mostly due to my lack of understanding of generics in the first place 😄

Collapse
 
captainyossarian profile image
yossarian •

Most of the time you need to use generics when one argument depends on another catchts.com/infer-arguments or you need to do some validation catchts.com/type-negation , catchts.com/validators

Collapse
 
murkrage profile image
Mike Ekkel •

Thanks for the resources!

Collapse
 
folken718 profile image
OldMan Montoya •

Think consuming an API, you can get different types of responses, here generics are gold , because you create the function to consume once using generics and you just specify the type when you use it

Collapse
 
murkrage profile image
Mike Ekkel •

That's a very good point :)

Collapse
 
plondon profile image
Philip London •

Hey Mike! Did you checkout the interactive tutorial? Maybe that would be helpful as well!

To answer your question, let's say we used returnStringOrNumber and assigned a variable to it.

const myStringOrNum = returnStringOrNumber(123)

Now try performing a mathematical function on myStringOrNum! TypeScript doesn't know if that's valid or not because as we said, returnStringOrNumber might return a string!

However, if we used generics:

function returnStringOrNumber<T>(arg: T): T {
  return arg
}

const myStringOrNum = returnStringOrNumber<number>(123)
Enter fullscreen mode Exit fullscreen mode

We can now perform mathematical operations on this value with safety!

Collapse
 
iam_danieljohns profile image
Daniel Johns •

I tried this and it still ran. Is this just a JS issue or am I missing something?

function returnStringOrNumber<T>(arg: T): T {
  return arg
}
let value = returnStringOrNumber<number>(123) + "hello"
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
plondon profile image
Philip London •

Hey @iam_danieljohns that's perfectly valid JavaScript, in this case value will be cast to a string type because concatenating a number and a string results in a string. In this case value will be "123hello".

If you wanted to make sure that value was indeed a number type you could do:

let value: number = returnStringOrNumber<number>(123) + "hello"
Enter fullscreen mode Exit fullscreen mode