Utility Types in 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`	Constructs a type with all properties of `Type` set to optional.
`Required`	Constructs a type consisting of all properties of `Type` set to required. Opposite of Partial.
`Readonly`	Constructs a type with all properties of `Type` set to `readonly`
`Record`	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`	Constructs a type by picking `Keys` from `Type`
`Omit`	Constructs a type by picking all properties from `Type` and then removing `Keys`
`Exclude`	`Exclude;`
// results in `"b" \| "c"`
// “a” got excluded because it is in both `UnionType` and `ExcludedMembers`
`Extract`	`Extract;`
// results in `"a"`
// because only “a” is in both `Type` and `Union`
`NonNullable`	`NonNullable`
// results in `string \| number`
// because `undefined` and `null` get removed
`Parameters`	`Parameters void>;`
// results in `[s: string]`
// because the parameter of function `Type` is a string
`ConstructorParameters`	Constructs a tuple or array type from the types of a constructor function type
`ReturnType`	`ReturnType string>`
// results in `string`
// because function `Type` returns a string
`InstanceType`	Constructs a type consisting of the instance type of a constructor function in `Type`
`class C {
x = 0;
y = 0;
}`
`InstanceType`
// results in `C`
`ThisParameterType`	Extracts the type of the this parameter for a function type, or unknown if the function type has no `this` parameter
`OmitThisParameter`	Removes the `this` parameter from `Type`
`ThisType`	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`
`Lowercase`
`Capitalize`
`Uncapitalize`	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):

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

Omit is the opposite of Pick.

1
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.

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

Partial

setTextLayerProps is a function that takes props and sets them on an object. Using Partial (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.

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

4
  if(layer) {
5
    Object.entries(props).forEach(([k, v]) => {
6
      (layer as any)[k] = v;
7
    });
8
  }
9
}
10

11
const project: Project = {
12
  layers: [imageLayer, textLayer],
13
  size: projectSize
14
};
15

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

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:

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

4
  if(layer) {
5
    Object.entries(props).forEach(([k, v]) => {
6
      (layer as any)[k] = v;
7
    });
8
  }
9
}
10

11
const project: Project = {
12
  layers: [imageLayer, textLayer],
13
  size: projectSize
14
};
15

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

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

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