TypeScript Naming Conventions: Crafting Maintainable Code

TypeScript, a strongly-typed language, offers a broad feature set to aid developers in producing well-structured, maintainable code. Among its extensive capabilities are the options to define interfaces, types, enums, union types, and generics. This article delves into some widely-used naming conventions for these various TypeScript declarations.

Interfaces

Interfaces in TypeScript serve to shape an object. They commonly act as contracts between different parts of an application, such as between components or between a component and a service. Naming interfaces demands clarity and descriptiveness to accurately reflect the interface’s purpose.

• Interface names should be a noun or noun phrase that encapsulates the object modeled by the interface.
• Adhere to the PascalCase convention for interface names, meaning that the first letter of each word in the name is capitalized.
• Refrain from using the “I” prefix or “Interface” suffix in the interface name like IUser or UserInterface.

interface User {
  id: number;
  name: string;
  surname: string;
}

Types

Types provide a means to establish custom types in TypeScript. They can create aliases for existing types or generate new types from the ground up. The names of types should be lucid and descriptive, reflecting the type’s purpose.

• For object types, follow the same conventions as for interfaces.
• For union types, prefer using descriptive noun phrases and the conjunction “Or” to connect them.
• However, whenever possible, avoid using the conjunction “Or” and opt for more descriptive names.

type Developer = {
 name: string;
 languages: Language[];
}

type DeveloperOrDesigner = Developer | Designer;

type Employee = Developer | Designer;

Function types define the structure of a function, including its parameters and return type.

• Use a verb or verb phrase that indicates the action performed by the function.
• Employ PascalCase to capitalize the first letter of each word in the function type name.
• Some developers choose to use the “Fn” suffix to highlight that the type represents a function.

// function type
type UserGenerator = (username: string, email?: string) => User;

// function type overloading
type UserGenerator = {
    (username: string): User;
    (username: string, email?: string): User;
};

Enums

Short for enumeration, enums enable the definition of a set of named constants.

• Use a singular noun or noun phrase that describes the set of named constants being defined.
• Apply PascalCase to capitalize the first letter of each word in the enum name.
• Use PascalCase or CONSTANT_CASE for every property in the enum.

enum Role {
  ADMIN,
  MODERATOR,
  USER,
}
// or
enum Month {
  January,
  February,
  ...
}

Generics

Generics, a component of generic programming, allow developers to create reusable code compatible with various data types.

• When using only one generic type, represent it with a single uppercase letter.
• If the generic type is used multiple times, or if there are several generic types, consider using descriptive names.

interface Response<S, T, U> {
  status: S;
  data: T;
  error: U;
}

interface Response<TStatus, TResult, TError> {
  status: TStatus;
  data: TResult;
  error: TError;
}

In conclusion, TypeScript naming conventions play an instrumental role in writing clean, clear, and maintainable code. By following these conventions, developers can ensure their code is easy to read and understand, making it easier for others (and themselves) to maintain and enhance in the future.