DEV Community

Advanced TypeScript Types cheat sheet (with examples)

Ibrahima Ndaw on June 15, 2020

TypeScript is a typed language that allows you to specify the type of variables, function parameters, returned values, and object properties. Here...

Read full post

kHRISl33t • Jun 15 '20

A really well-written article with good examples. Good job!

Would like to add one more thing I like to use and you might find it interesting:

type Maybe<T> = T | null;

function foo(bar: Maybe<string>) {
  if (!bar) {
    // handle if bar is null
  }
  // do stuff if value not null.
}

Ionel Cristian Lupu • Jun 16 '20

What are some really good real world examples for this? (3,4 examples).

Wouldn't the optional operator be enough?

function foo(bar?: string) {
  if (!bar) {
    // handle if bar is falsy
  }
  // do stuff if value not falsy.
}

The only thing I can think of is when you really need the parameter to be exactly null. But I never have this use case in the projects I work on, so I think something is fishy :))

Michael De Abreu • Jun 16 '20

The difference between the two, is that in Maybe the value is required, and in the second one is optional. So, you can have Maybe values and those values would be either defined or not, but would still be required. I have found this to be useful in React.

kHRISl33t • Jun 16 '20

Actually it's just personal preference to have null values instead of undefined.
The example I provided is actually not that great, because I tend to use this more with objects and their properties.

chico1992 • Jun 15 '20

You should explicitly check for bar===null as in your case the empty string will also make !bar true

kHRISl33t • Jun 16 '20

you are right, thanks :)

Cesar Kohl • Jun 20 '20

Great article! Please remember to use semicolons at the end of the lines.

Ibrahima Ndaw • Jun 21 '20

The semicolon is not mandatory, I prefer to not use it. Thanks for reading BTW

Garret • Jun 30 '20

No semicolon makes it look so much cleaner:)

Randal Vance Cunanan • Jun 28 '20

Use prettier, you don't even have to type it yourself.

Cesar Kohl • Jun 26 '20

It's not mandatory if you wanna go against Google: google.github.io/styleguide/jsguid... . Please reconsider.

Garret • Jun 30 '20

Theres a million different style guides, use whatever you want. No one is forced to use a specific one.

Mirko Vukušić • Jun 27 '20 • Edited

:) so glad I don't have to see or type those anymore

Pedro Mutter • Jun 18 '20

Congratulations! Really good article, very useful! I would like to add the possibility to create your own type guards on the type guard section, here is an example:

Ibrahima Ndaw • Jun 21 '20

Great! A really good example, I will add it to the article.

Skye Wu • Jul 17 '20

i think : obj is ImportantType is ok, but can be more simpler:

function isImportantType(obj: any): boolean {
  return obj.id && obj.requiredFiled;
}

Todd Matheson • Jul 22 '20

That defeats the purpose of using the type guard altogether. Typescript won’t infer the type from that function. :obj is ImportantType is the what tells typescript what the passed parameters type is. Hence type guard.

Skye Wu • Jul 23 '20

thanks for explain

Pedro Mutter • Jul 17 '20

But it wouldn't be a type guard though.

Skye Wu • Jul 23 '20

thanks for explain

Oleg Krasavin • Jun 18 '20

Seems typescript is getting overcomplicated.

Luis Aceituno • Jun 18 '20

How so? These have been in it for a long time now. You are also not required to use them, since they're mostly syntactic sugar. It does make life easier a lot of times though!

Ibrahima Ndaw • Jun 21 '20

Absolutely.

bbehzadi • Jun 25 '20

Good article, to the point and concise with good examples.

I wish I knew Partial<T> - that I just learnt here before. This is how I implemented it:

export type ObjectWithOptionalProps<T> = { [key in keyof T]?: T[key] };

Yuri Karadzhov • Jun 15 '20

Good article, nice to have everything combined in one place.

Ibrahima Ndaw • Jun 21 '20

Thanks for reading too.

Thibaud Desodt • Jun 18 '20

Really concise summary / recap.

Will share that with my team, thanks a lot !

Ibrahima Ndaw • Jun 21 '20

Great! I'm glad this article could help.

Welington Veiga • Jun 20 '20 • Edited

It is a list of "easy to get" examples of the most interesting TS typing features, it's quite handy having them packed like this, thank you!

Ibrahima Ndaw • Jun 21 '20

Great! I'm glad you find value in this article.

Evgeny Artemov • Sep 21 '20

OMG, what I see! The first well wrote and detailed explanation of the typescript types system!!! Thanks a lot!!!

Ibrahima Ndaw • Sep 22 '20

Awesome! I'm glad you find value on it.

Richard Burd • Dec 16 '20

Thank you for writing this article Ibrahima! I have been looking to update my beginner's TypeScript cheat sheet with utility types and this is the best explanation I've seen so far!!