A little about Typescript Utility Types

Nowadays, the TypeScript type system is very powerful, it provides type safety, productivity, scalability and so on. So, TypeScript type system natively provides several “utility types” to help us with some definitions of types. Here, I want to share w…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Murillo Nahás

Nowadays, the TypeScript type system is very powerful, it provides type safety, productivity, scalability and so on. So, TypeScript type system natively provides several "utility types" to help us with some definitions of types. Here, I want to share with you 5 of them.

So, let's getting started.

Summary

  • Pick
  • Omit
  • ReadOnly
  • Partial
  • Required

1. Pick(Type, Keys)

The Pick utility type was developed to generate new types as the result of picking some properties from an existing type. This utility type is useful when you want to create a new type with specific properties from a type with a lot of properties.

type Person = {
  name: string
  lastName: string
  age: number
  hobbies: string
}

type SomePerson = Pick<Person, "name" | "age">

// type SomePerson = {
//  name: string;
//  age: number;
// }

2. Omit(Type, Keys)

The Omit utility type was the opposite of Pick type, instead of stating what properties you want to keep, the Omit type expect the properties you want to be omitted. Using Omit type will be useful when you want to get rid of certain properties.

type Person = {
  name: string
  lastName: string
  age: number
  hobbies: string
}

type SomePerson = Omit<Person, "lastName" | "hobbies">

// type SomePerson = {
//  name: string;
//  age: number;
// }

3. Readonly(Type)

The Readonly utility type is used to construct types with all properties set to be read only. It's not possible to reassign new values to the properties, it will result in a TypeScript warning.

type Person = {
  name: string
}

type ReadOnlyPerson = Readonly<Person>

const person: ReadOnlyPerson = {
  name: "Fizz",
}

person.name = "Buzz"
// Cannot assign to 'name' because it is a read-only property.

4. Partial(Type)

The Partial utility type is used to construct with all properties set to be optional. This utility type can be useful when we still don't know what a object will be.

type Person = {
  name: string
  lastName: string
  age: number
  address: string
}

type PartialPerson = Partial<Person>

// type PartialPerson = {
//   name?: string | undefined;
//   lastName?: string | undefined;
//   age?: number | undefined;
//   address?: string | undefined;
// }

5. Required(Type)

The Required utility type does the opposite of Partial utility type. This utility type constructs a type with all properties set to be required. We can use the Required utility type to ensure that optional properties will not appear in the type.

type Person = {
  name: string
  lastName: string
  age: number
  address: string
}

type RequiredPerson = Required<Person>

// type RequiredPerson = {
//   name: string;
//   lastName: string;
//   age: number;
//   address: string;
// }

As you can see above, I listed 5 of them, but there are several utility types we can work with, they are very useful and will bring type safety and organization to us. You can learn more by the official documentation here.


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Murillo Nahás


Print Share Comment Cite Upload Translate Updates
APA

Murillo Nahás | Sciencx (2022-12-14T00:47:29+00:00) A little about Typescript Utility Types. Retrieved from https://www.scien.cx/2022/12/14/a-little-about-typescript-utility-types/

MLA
" » A little about Typescript Utility Types." Murillo Nahás | Sciencx - Wednesday December 14, 2022, https://www.scien.cx/2022/12/14/a-little-about-typescript-utility-types/
HARVARD
Murillo Nahás | Sciencx Wednesday December 14, 2022 » A little about Typescript Utility Types., viewed ,<https://www.scien.cx/2022/12/14/a-little-about-typescript-utility-types/>
VANCOUVER
Murillo Nahás | Sciencx - » A little about Typescript Utility Types. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/12/14/a-little-about-typescript-utility-types/
CHICAGO
" » A little about Typescript Utility Types." Murillo Nahás | Sciencx - Accessed . https://www.scien.cx/2022/12/14/a-little-about-typescript-utility-types/
IEEE
" » A little about Typescript Utility Types." Murillo Nahás | Sciencx [Online]. Available: https://www.scien.cx/2022/12/14/a-little-about-typescript-utility-types/. [Accessed: ]
rf:citation
» A little about Typescript Utility Types | Murillo Nahás | Sciencx | https://www.scien.cx/2022/12/14/a-little-about-typescript-utility-types/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.