How to write better Typescript code? 10 advanced tips

In this article, we’re going to dive into 10 advanced tips to elevate your TypeScript coding skills. These tips go beyond the basics, offering insights and techniques to help you write more efficient, maintainable, and type-safe code.

#1 Optional Chaining (?.)

Optional chaining allows you to safely access nested properties or methods without worrying about null or undefined values. It short-circuits the evaluation if any intermediate property is null or undefined, preventing runtime errors.

const user = {
  name: 'Piotr',
  address: {
    city: 'Warsaw',
    postalCode: '00-240'
  }
};
const postalCode = user.address?.postalCode;
console.log(postalCode); // 00-240
const invalidCode = user.address?.postalCode?.toLowerCase();
console.log(invalidCode); // Output: undefined

This feature simplifies your code by reducing the need for repetitive null checks.

#2 Use Mapped Types for Transformation

Mapped types allow you to create new types by transforming properties of existing types. They are especially useful for creating utility types like Readonly or Partial.

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

type Partial<T> = {
  [P in keyof T]?: T[P];
};

This approach ensures that you can enforce specific constraints on types dynamically, making your type definitions more flexible and reusable.

#3 Utility Types

TypeScript provides several built-in utility types to assist with common type transformations. These types help reduce boilerplate and make your code more concise.

• Partial: Makes all properties in a type optional.
• Required: Makes all properties required.
• Readonly: Marks all properties as readonly.
• Pick: Constructs a type by picking a set of properties from another type.

interface User {
  id: number;
  name: string;
  email?: string;
}

type PartialUser = Partial<User>; // All properties are optional
type RequiredUser = Required<User>; // All properties are required
type ReadonlyUser = Readonly<User>; // All properties are readonly
type PickedUser = Pick<User, 'id' | 'name'>; // Only 'id' and 'name' are included

These utility types streamline type manipulation, improving both code readability and maintainability.

#4 Index Signatures for Flexible Object Types

Index signatures allow you to define types for objects with dynamic keys. This is useful when you need to work with objects that may have varying keys.

interface StringMap {
  [key: string]: string;
}

const translations: StringMap = {
  hello: 'Hola',
  goodbye: 'Adiós'
};

Index signatures provide a way to enforce consistent value types while allowing flexibility with the object’s keys.

#5 Conditional Types for Type Logic

Conditional types enable you to create types that depend on a condition. They add logic to your type definitions, allowing for more dynamic and context-sensitive types.

type IsString<T> = T extends string ? 'Yes' : 'No';

type A = IsString<string>; // 'Yes'
type B = IsString<number>; // 'No'

This capability allows you to create more powerful and adaptable type systems, accommodating complex type relationships.

#6 Discriminated Unions for Type Safety

Discriminated unions are a pattern used to create type-safe unions by including a common property (discriminator) that helps TypeScript determine the exact type.

interface Dog {
  kind: 'dog';
  bark: () => void;
}

interface Cat {
  kind: 'cat';
  meow: () => void;
}
type Animal = Dog | Cat;
function handleAnimal(animal: Animal) {
  if (animal.kind === 'dog') {
    animal.bark();
  } else {
    animal.meow();
  }
}

Discriminated unions enhance type safety and make your code easier to reason about when dealing with multiple related types.

#7 Exhaustiveness Checking with never

TypeScript’s never type can be used to ensure exhaustive checks in your code, particularly in switch statements or complex conditional logic.

type Shape = 'circle' | 'square';

function getArea(shape: Shape) {
  switch (shape) {
    case 'circle':
      return Math.PI * 1 * 1;
    case 'square':
      return 1 * 1;
    default:
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

This pattern helps catch any unhandled cases during compilation, ensuring that your code covers all possible scenarios.

#8 Type Guards for Runtime Type Checking

Type guards allow you to narrow down types at runtime. This is useful when working with union types, enabling you to safely access properties or methods that are specific to one type.

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function printValue(value: string | number) {
  if (isString(value)) {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

Using type guards ensures that your code handles different types appropriately, reducing the risk of runtime errors.

#9 Inferred Types for Cleaner Code

While explicit types are important, there are cases where letting TypeScript infer types can lead to cleaner code. Inferred types reduce redundancy and can make your code more concise.

const add = (a: number, b: number) => a + b;

const result = add(2, 3); // TypeScript infers the type of 'result' as number

Use type inference wisely to strike a balance between clarity and conciseness in your code.

#10 Advanced Generics for Reusable Functions

Generics in TypeScript are powerful tools that enable you to create reusable and type-safe functions. Advanced use of generics can make your code more flexible and adaptable to different scenarios.

function identity<T>(value: T): T {
  return value;
}

const numberIdentity = identity(42); // Type is number
const stringIdentity = identity('TypeScript'); // Type is string

Advanced generics allow you to write functions that work across a variety of types while maintaining type safety, which is particularly useful in libraries and frameworks.

So, that’s all what I wanted to write.

Happy coding!