Related articles
This article's content
Utility Types in TypeScript
October 5, 2022 | 2 years ago
TypeScript Core
typescript

Utility types let you create types based on other types. Have a look at the official TypeScript page for example about utility types.

Partial<Type>Constructs a type with all properties of Type set to optional.
Required<Type>Constructs a type consisting of all properties of Type set to required. Opposite of Partial.
Readonly<Type>Constructs a type with all properties of Type set to readonly
Record<Keys, Type>Constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type.
Pick<Type, Keys>Constructs a type by picking Keys from Type
Omit<Type, Keys>Constructs a type by picking all properties from Type and then removing Keys
Exclude<UnionType, ExcludedMembers>Exclude<"a" | "b" | "c", "a">;
// results in "b" | "c"
// “a” got excluded because it is in both UnionType and ExcludedMembers
Extract<Type, Union>Extract<"a" | "b" | "c", "a" | "f">;
// results in "a"
// because only “a” is in both Type and Union
NonNullable<Type>NonNullable<string | number | undefined>
// results in string | number
// because undefined and null get removed
Parameters<Type>Parameters<(s: string) => void>;
// results in [s: string]
// because the parameter of function Type is a string
ConstructorParameters<Type>Constructs a tuple or array type from the types of a constructor function type
ReturnType<Type>ReturnType<() => string>
// results in string
// because function Type returns a string
InstanceType<Type>Constructs a type consisting of the instance type of a constructor function in Type
class C {
x = 0;
y = 0;
}
InstanceType<typeof C>
// results in C
ThisParameterType<Type>Extracts the type of the this parameter for a function type, or unknown if the function type has no this parameter
OmitThisParameter<Type>Removes the this parameter from Type
ThisType<Type>This utility does not return a transformed type. Instead, it serves as a marker for a contextual this type. Note that the noImplicitThis flag must be enabled to use this utility.
Uppercase<StringType>
Lowercase<StringType>
Capitalize<StringType>
Uncapitalize<StringType>		To help with string manipulation around template string literals, TypeScript includes a set of types which can be used in string manipulation within the type system.

Omit property from type

Omit allows you to create a new type based on an existing type, but specify properties of the existing type that you want to have omitted in the new type (don’t mix that up with Exclude):

Omit<{ a: string, b:string }, 'a' > === { b: string }

Omit is the opposite of Pick.

Pick<{ a: string, b:string }, 'a' > === { a: string }

Exclude is different from Omit, because it takes a union type and removes a constituent of that union.

Exclude<string | number, string > === number

Partial<T>

setTextLayerProps is a function that takes props and sets them on an object. Using Partial<T> (which is a build-in TypeScript feature) we can specify that only props of a specific type are allowed to be passed in as props. In the following example we only allow props from TextLayer.

function setTextLayerProps(project: Project, id: string, props: Partial<TextLayer>) {
  const layer = project.layers.find(l => l.id === id);

  if(layer) {
    Object.entries(props).forEach(([k, v]) => {
      (layer as any)[k] = v;
    });
  }
}

const project: Project = {
  layers: [imageLayer, textLayer],
  size: projectSize
};

setTextLayerProps(project, "10", {
  text: "hello",
  shouldNotWork: true // Good: TypeScript complains, that shouldNotWork is not part of the props of TextLayer
});

We can improve this example and make it more variable: We want to allow props depending on the generic type: If we define TextLayer, then only allow props from TextLayer, if we define ImageLayer, then only allow props from ImageLayer:

function setLayerProps<T extends TextLayer | ImageLayer>(project: Project, id: string, props: Partial<T>) {
  const layer = project.layers.find(l => l.id === id);

  if(layer) {
    Object.entries(props).forEach(([k, v]) => {
      (layer as any)[k] = v;
    });
  }
}

const project: Project = {
  layers: [imageLayer, textLayer],
  size: projectSize
};

setLayerProps<TextLayer>(project, "10", {
  text: "hello" // Good: only TextLayer props are allowed
});

setLayerProps<ImageLayer>(project, "20", {
  src: "some image source" // Good: only ImageLayer props are allowed
});

setLayerProps<ImageLayer>(project, "30", {
  src: "some image source",
  shouldNotWork: true  // Good, compiler complains
});

About Author

Mathias Bothe To my job profile

I am Mathias from Heidelberg, Germany. I am a passionate IT freelancer with 15+ years experience in programming, especially in developing web based applications for companies that range from small startups to the big players out there. I create Bosycom and initiated several software projects.