Typescript - Tips & Tricks - Advanced Types

Hi Guys, Today I’ll show you some advanced utilities exposed by the typescript language. Let’s start!

Utilities for Types

• Partial

This utility allows you to add the optional modifier to all the properties of your type.

type PartialPoint = Partial<{ x: number; y: number }>; // { x?: number | undefined; y?: number | undefined; }

• Required

This utility allows you to remove the optional modifier to all the properties of your type.

type RequiredPoint = Required<{ x?: number; y?: number }>; // { x: number; y: number; }

• ReadOnly

This utility allows you to add the read-only modifier to all the properties of your type.

type ReadOnlyPoint = ReadOnly<{ x: number; y: number }>; // { readonly x: number; readonly y: number; }

• Pick

This utility allows you to get a subset of properties from another type.

type PickPoint = Pick<{ x: number; y: number }, "x">; // { x: number; }

• Omit

This utility allows you to exclude some properties from another type.

type OmitPoint = Omit<{ x: number; y: number }, "x">; // { y: number; }

• Record

This utility allows you to map the properties of a type to another type.

type Point = {
  x: number;
  y: number;
};
type PointRecord = Record<keyof Point, number | null>; // { x: number | null; y: number | null; }

• Exclude

This utility allows you to remove some types from a union type.

type ExcludeType = Exclude<"x" | "y", "x">; // "y"

• Extract

This utility allows you to get some types from a union type.

type ExtractType = Extract<"x" | "y", "x">; // "x"

• NonNullable

This utility allows you to remove the undefined and null types from a union type.

type NonNullableType = NonNullable<string | number | undefined | null>; // string | number

Utilities for Function and Class

• Parameters

This utility allows you to extract from a function its parameters.

function createPoint(x: number, y: number) {
  return { x, y };
}
type ParametersType = Parameters<typeof createPoint>; // [x: number, y: number]

• ConstructorParameters

This utility allows you to extract from a class its constructor parameters.

class Point {
  constructor(x: number, y: number) {}
}
type ConstructorParametersType = ConstructorParameters<typeof Point>; // [x: number, y: number]

• ReturnType

This utility allows you to get the return type from a function.

function createPoint(x: number, y: number) {
  return { x, y };
}
type CreatePointReturnType = ReturnType<typeof createPoint>; // { x: number; y: number; }

• InstanceType

This utility allows you to construct a type consisting of the instance type of a construction function type.

class Point {
  constructor(x: number, y: number) {}
}
type InstanceTypePoint = InstanceType<typeof Point>; // Point
type InstanceTypeString = InstanceType<string>; // Error: Type 'string' does not satisfy the constraint 'new (...args: any) => any'

• ThisParameterType

This utility allows you to extract the this parameter from a function type, or unknown if the function type has no this parameter.

function toHex(this: Number) {
  return this.toString(16);
}
function numberToString(n: ThisParameterType<typeof toHex>) {
  return toHex.apply(n);
}
numberToString(12)

• OmitThisParameter

This utility allows you to remove the this parameter from a function type.

function toHex(this: Number) {
  return this.toString(16);
}
const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5);
fiveToHex()

Utilities to Manipulation String Types

• Uppercase

This utility allows converting your types to uppercase format.

type StringUppercase = Uppercase<"getX" | "getY" | "setX" | "setY">; // "GETX" | "GETY" | "SETX" | "SETY"

• Lowercase

This utility allows you to convert your types to lowercase format.

type StringLowercase = Lowercase<"getX" | "getY" | "setX" | "setY">; // "getx" | "gety" | "setx" | "sety"

• Capitalize

This utility allows you to convert your types to capitalize format.

type StringCapitalize = Capitalize<"getX" | "getY" | "setX" | "setY">; // "GetX" | "GetY" | "SetX" | "SetY"

• Uncapitalize

This utility allows you to convert your types to uncapitalize format.

type StringUncapitalize = Uncapitalize<"GetX" | "GetY" | "SetX" | "SetY">; // "getX" | "getY" | "setX" | "setY"

I hope these utilities will help you in the future. That’s all for today. See you soon Guys!