DEV Community

Cover image for Typescript: How to use Generics to make your own Type Templates?
Taric Ov
Taric Ov

Posted on

Typescript: How to use Generics to make your own Type Templates?

After we talked about types utilities the last post, let's extend and see more advanced usage of generics in typescript and we could build our own type templates that can be reused across your projects:

let's say that we will type a social tweet/post data…


interface postProps {
  name: string;
  relativeTime: string;
  tweet: string;
  retweets: number;
  likes: number;
  comments: number;
  userImg: string;
  liked: () => void;
  likedUsers: Array<{ name: string; img_src: string; id: number }>;
}

Enter fullscreen mode Exit fullscreen mode

we are familiar now w/ interfaces in typescript and to put it in simple quick words, interfaces are type contracts that an entity/object should conform to.

Now..


type readOnlyProps<T> = {
  readonly [P in keyof T]: T[P];
};

Enter fullscreen mode Exit fullscreen mode

Here we go.. This is a type template of a readonly that converts any type props into readonly mode using the keyword readonly:

  1. We use <T> as our parameter of props.

  2. And then we use this syntax [P in keyof T] to loop through props keys and re-print them w/ the prepended keyword readonly

  3. T[P] is so obviously bringing in the value of the key for each prop

Now we can use this template, like this:


type readOnlyPostPorps = readOnlyProps<postProps>;
//readOnlyPostPorps is our new type
//readOnlyProps is our type template/converter we defined b4
//postProps us our original interface

Enter fullscreen mode Exit fullscreen mode

As you see how generics:

  1. makes things handy

  2. generates from already existing types,

  3. prevents us from repeating/re-typing props (reusability)

  4. opens possibilities for more complex flows

Now..

Try out the example and play around w/ the template and see what you can come up w/ new:

till next time.. keep ur type tight.

πŸ‘‹ Kindness is contagious

Please leave your appreciation by commenting on this post!

It takes one minute and is worth it for your career.

Get started

Thank you!

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay