DEV Community

Cover image for Typescript - Tips & Tricks - Advanced Types
This is Learning profile image Luca Del Puppo
Luca Del Puppo for This is Learning

Posted on • Edited on

Typescript - Tips & Tricks - Advanced Types

#typescript #webdev

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

Utilities for Types

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; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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; }
Enter fullscreen mode Exit fullscreen mode

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

type ExcludeType = Exclude<"x" | "y", "x">; // "y"
Enter fullscreen mode Exit fullscreen mode

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

type ExtractType = Extract<"x" | "y", "x">; // "x"
Enter fullscreen mode Exit fullscreen mode

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

type NonNullableType = NonNullable<string | number | undefined | null>; // string | number
Enter fullscreen mode Exit fullscreen mode

Utilities for Function and Class

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode
  • Lowercase

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

type StringLowercase = Lowercase<"getX" | "getY" | "setX" | "setY">; // "getx" | "gety" | "setx" | "sety"
Enter fullscreen mode Exit fullscreen mode
  • Capitalize

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

type StringCapitalize = Capitalize<"getX" | "getY" | "setX" | "setY">; // "GetX" | "GetY" | "SetX" | "SetY"
Enter fullscreen mode Exit fullscreen mode
  • Uncapitalize

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

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

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

Top comments (0)

Read next

prince_beec5ccde00b7c6c73 profile image

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

Prince -

reversecher profile image

Building a Free Online Music Creator: Free Incredibox Sprunki

reverse Ch -

salehmubashar profile image

Create a Dynamic Code Playground with SandPack + React!

Saleh Mubashar -

supminn profile image

Decoding StyleX: Meta's Cutting-Edge Styling System

Supriya M -