Mastering TypeScript: Advanced Tips and Techniques

TypeScript has become an essential tool for JavaScript developers, providing static type checking and enhanced IDE support. While many developers are familiar with the basics, there are several advanced features that can significantly improve your code quality and developer experience.

1. Leveraging Utility Types

TypeScript provides several built-in utility types that can help you transform and manipulate types in various ways.

Partial and Required

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

// Makes all properties optional
type PartialUser = Partial<User>; 

// Makes all properties required (even age)
type RequiredUser = Required<User>;

Pick and Omit

// Create a type with only certain properties
type UserCredentials = Pick<User, 'email' | 'id'>;

// Create a type excluding certain properties
type PublicUser = Omit<User, 'email' | 'id'>;

2. Discriminated Unions

Discriminated unions are a powerful pattern for modeling complex state:

type LoadingState = {
  status: 'loading';
}

type SuccessState = {
  status: 'success';
  data: any;
}

type ErrorState = {
  status: 'error';
  error: string;
}

type RequestState = LoadingState | SuccessState | ErrorState;

function handleRequest(state: RequestState) {
  switch (state.status) {
    case 'loading':
      // TypeScript knows we're in the LoadingState
      return <LoadingSpinner />;
    case 'success':
      // TypeScript knows we have data here
      return <DataView data={state.data} />;
    case 'error':
      // TypeScript knows we have an error message here
      return <ErrorMessage message={state.error} />;
  }
}

3. Template Literal Types

TypeScript 4.1 introduced template literal types, which allow you to manipulate string types:

type CSSValue = `${number}${'px' | 'em' | 'rem' | '%'}`;

// Valid: "42px", "100%"
// Invalid: "42", "px", 42

type RGB = `rgb(${number}, ${number}, ${number})`;
type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
type HEX = `#${string}`;

type Color = RGB | RGBA | HEX;

4. Conditional Types

Conditional types allow you to create types that depend on other types:

type IsArray<T> = T extends Array<any> ? true : false;

// Evaluates to true
type CheckArray = IsArray<string[]>;

// Evaluates to false
type CheckString = IsArray<string>;

Combined with infer, this becomes extremely powerful:

type ArrayElementType<T> = T extends Array<infer E> ? E : never;

// Extracts 'string' from string[]
type StringArrayElement = ArrayElementType<string[]>;

5. Branded Types

Branded types help you avoid mixing semantically different values that share the same primitive type:

type UserId = number & { readonly __brand: unique symbol };
type ProductId = number & { readonly __brand: unique symbol };

function createUserId(id: number): UserId {
  return id as UserId;
}

function getUserById(id: UserId) {
  // ...
}

const userId = createUserId(123);
const productId = 456 as ProductId;

getUserById(userId); // OK
getUserById(productId); // Error: Argument of type 'ProductId' is not assignable to parameter of type 'UserId'

6. Using keyof and typeof

The keyof and typeof operators are incredibly useful for creating flexible APIs:

const config = {
  api: 'https://api.example.com',
  timeout: 3000,
  retryCount: 3
};

// Get type of the config object
type Config = typeof config;

// Get keys of the config object as a union
type ConfigKeys = keyof Config; // "api" | "timeout" | "retryCount"

function getConfig<K extends ConfigKeys>(key: K): Config[K] {
  return config[key];
}

const apiUrl = getConfig('api'); // TypeScript knows this is a string
const timeout = getConfig('timeout'); // TypeScript knows this is a number

Conclusion

These advanced TypeScript techniques can help you write more robust and maintainable code. By leveraging the type system to its fullest, you can catch errors at compile time and create more expressive APIs. Keep exploring TypeScript’s rich type system to continually improve your development experience.

Remember, the goal isn’t just to make the compiler happy but to create code that’s easier to understand, refactor, and maintain over time.

Tag: JavaScript

Mastering TypeScript: Advanced Tips and Techniques