DEV Community 👩‍💻👨‍💻

Cover image for 3 Ways of Type Transformation in Typescript
Dany Paredes
Dany Paredes

Posted on • Updated on • Originally published at danywalls.com

3 Ways of Type Transformation in Typescript

When we use types or interfaces, the typescript compiler enforces the object fit with them to avoid runtime errors for missing fields.

Sometimes we want the flexibility to create an object without breaking the contract with the interface type.

For example, we have the interface User with all properties required.

interface User {
  username: string;
  password: string;
  roles: string[];
  active: boolean;
}
Enter fullscreen mode Exit fullscreen mode

Maybe we want to create a user and later call the API to get the roles. If we try to make the object without all the properties, the compiler shows an error because it doesn't fit with the interface.

Error compilers missing properties

In most cases, we change the property to optional roles?: string[] and to allow compiling, but we know it is a cheat.

Typescript provides the utility to work with it:

Partial: Create a new type with all properties as optional from the type:

let admin: Partial<User> = {
  username: 'admin',
  password: 'admin'
}
Enter fullscreen mode Exit fullscreen mode

Thanks to @lukeshiru contribution, I learn other ways to deal with it:

Partial makes every property optional. Maybe it is not what we want.

Typescript provides other Utility types, Omit and Pick let play with it.

Omit: Create a new type taking all properties from the type and removing the keys.

type UserWithoutRoles = Omit<User, "roles">;

const userWithoutRoles: UserWithoutRoles = {
    username: "admin",
    password: "admin",
};
Enter fullscreen mode Exit fullscreen mode

Pick: Create a new type from the type and pick a set of properties.

type UserWithStatus = Pick<User, "username" | "active">

const userWithStatus: UserWithStatus = {
    username: "dany",
    active: true
}
Enter fullscreen mode Exit fullscreen mode

Thanks again to @lukeshiru :)

Learn more about Typescript Utility Types

Read more articles in www.danywalls.com

Foto de Suzanne D. Williams en Unsplash

Top comments (6)

Collapse
 
maurerkrisztian profile image
Maurer Krisztián

Nice, 🙂 if something doesn't feel right, there is always a solution in typescript. I think all typescript developers should use these utilities link
I just wrote a post about a typescript solution, what do you think? blog post

Collapse
 
flexice profile image
FlexICE

I was surprised that many TypeScript developers do not even know about the utilities

Collapse
 
maurerkrisztian profile image
Maurer Krisztián

Typescript gives you too many options, which are often good. But also you don't need to learn the correct way you can do "as any" and the problem is "solved". My typescript pilosophi is eliminate all "any" types and create types what can't be used wrongly 😄

Thread Thread
 
flexice profile image
FlexICE

I personally care very much about the purity and fidelity of my code, just in my sad experience, as you said: do whatever you want, the main thing to solve the problem, but this unfortunately leads the whole project to a bunch of bugs or an incomprehensible code base

Collapse
 
lukeshiru profile image
Luke Shiru

The typescript compiler is sometimes annoying when we try to be strict with one object to fit the interfaces and create it.

Is not annoying, is helping you out. If you said the type of a User has a required roles field, you shouldn't skip it because you'll end up with runtime errors due to that missing field.

If you want to get a part of an object, instead of using Partial which makes all properties optional, use Omit or Pick instead:

type UserWithoutRoles = Omit<User, "roles">;

const userWithoutRoles: UserWithoutRoles = {
    username: "admin",
    password: "admin",
};

// And later...

const user: User = {
    ...userWithoutRoles,
    roles: ["admin"],
};
Enter fullscreen mode Exit fullscreen mode

Partial is bad for this because the inferred type will make every property optional, and you really don't want that. I recommend you take a look at this so your next post is more informative for everyone ^_^

Cheers!

Collapse
 
danywalls profile image
Dany Paredes Author

Thanks for your feedback!! Amazing contribution, very helpful!!!! (I will update the article with your feedback)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.