Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
TypeScript Tutorial
TypeScript Utility Types

TypeScript Utility Types

By Shammi Anand
5 mins read
Last updated: 4 May 2023
163 views
Learn via video courses
Topics Covered

Overview

TypeScript is a strongly typed superset of JavaScript including conditional, lookup, and mapped types that allows us to write type functions which are also called TypeScript utility types. It allows us to write different types using transformations in already existing type definitions.

Introduction to TypeScript Utility Types

TypeScript allows us to add new custom types based on the user requirements. But while actually working on a project, different types that are required to get the job done only have a few different constraints. That is, most times, we may only need to perform some transformations on existing types to get the final type as needed. This saves the hassle of creating a new type function or a custom utility type.

  • TypeScript supports a bunch of in-built utility types which can be used without needing any other dependencies or packages.
  • TypeScript utility types allow to perform type transformation

Type transformations generally include four types of transformations:

  1. extraction of types: selecting only certain types from an existing type declaration.
  2. inclusion of types: including some additional type(s) to an existing type declaration.
  3. exclusion of types: Excludes some types from an existing type declaration.
  4. conditional mapping of types: choosing types from an existing type declaration based on some specified condition.

These four types of transformation facilitates the need of Utility Types.

1. Partial<T>

  • It creates a new type that marks all the properties of an input type T as optional.
  • Mostly used in conjunction with update logic.
  • A common example would be Redux the popular state management library used in many frontend frameworks like react
    • Redux follows an update pattern where only the properties that are changed are provided for updation of the state.

2. Required<T>

  • Required is the exact opposite of Partial<T>
    • It creates a new type that marks all the properties of an input type T as required or non-optional.
  • It is used to make sure that all properties of a type are required.

3. Readonly<T>

  • Readonly creates a new type that marks all the properties of an input type T as readonly.
    • It stops the properties from being re-assigned.
    • Force re-assigning these properties will result in a TypeScript warning.
  • Often used for freezing an object to prevent it from being edited.

4. Pick<T, Keys>

  • Pick creates a new type that picks only the properties of input type T that are mentioned in Keys
  • This is one of the most useful built-in TypeScript utility types as it allows us to select a subset of properties from any existing types.

5. Record<Key, Value>

  • Record creates a new type where all the properties of input type T that are specified by member names in Keys are set to the type Value
    • All the members of this newly created will have type as Value

6. Exclude<T, E>

  • Exclude creates a new type that excludes all the properties, of the input type T, specified in E
  • Mostly used to exclude certain members from a type definition like null and undefined

7. NonNullable<T>

  • NonNullable creates a new type that excludes null and undefined from the input type T.
    • This can be alternatively be achieved by using Exclude<T, null | undefined>
    • This in-built utility type prevents acceptance of nullable values

8. Extract<T, E>

  • Extracted creates a new type which extracts only the properties of input type T that are mentioned in E.

9. Omit<T, Keys>

  • Omit creates a new type that omits all the properties, of the input type T, specified in Keys

Conclusion

  • TypeScript supports a bunch of in-built utility types like Partial, Required, Readonly,Pick, Record, Exclude, NonNullable, Extract, Omit, etc.
  • TypeScript utility types can be accessed globally
  • TypeScript utility types allow performing type transformation which generally involves extraction of types, inclusion of types, exclusion of types, and `conditional mapping of types.
  • TypeScript utility types can be accessed globally. * Generics are extensively used to implement Utility Type or Type functions natively in the source code.