TypeScript Clean Code: Principles and Patterns

Table of Contents

1. Fundamental Concepts
2. Usage Methods
3. Common Practices
4. Best Practices
5. Conclusion
6. References

Fundamental Concepts

Static Typing

TypeScript’s static typing allows developers to define the types of variables, function parameters, and return values. This helps catch errors at compile - time rather than at runtime. For example:

// Define a function with typed parameters and return value
function add(a: number, b: number): number {
    return a + b;
}

// This will compile without errors
const result = add(3, 5);

// This will cause a compile - time error
// const wrongResult = add('3', 5); 

Interfaces

Interfaces in TypeScript are used to define the structure of an object. They act as a contract that an object must adhere to.

interface Person {
    name: string;
    age: number;
}

function greet(person: Person) {
    return `Hello, ${person.name}! You are ${person.age} years old.`;
}

const john: Person = { name: 'John', age: 30 };
console.log(greet(john));

Enums

Enums are used to define a set of named constants. They make the code more readable and maintainable.

enum Color {
    Red,
    Green,
    Blue
}

let myColor: Color = Color.Green;
console.log(myColor); // Output: 1

Usage Methods

Function Overloading

Function overloading in TypeScript allows a function to have multiple call signatures. This is useful when a function can accept different types of parameters.

function reverse(input: string): string;
function reverse(input: number[]): number[];
function reverse(input: string | number[]): string | number[] {
    if (typeof input === 'string') {
        return input.split('').reverse().join('');
    } else {
        return input.slice().reverse();
    }
}

const reversedString = reverse('hello');
const reversedArray = reverse([1, 2, 3]);

Generics

Generics provide a way to create reusable components that can work with different types.

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

const output1 = identity<string>('myString');
const output2 = identity<number>(100);

Common Practices

Naming Conventions

• Variables and Functions: Use camelCase. For example, userName, calculateTotal.
• Classes and Interfaces: Use PascalCase. For example, UserProfile, PersonInterface.
• Constants: Use all uppercase with underscores. For example, MAX_LENGTH.

Single Responsibility Principle

Each function or class should have a single, well - defined responsibility. For example:

// Bad practice
function handleUserInputAndSaveToDatabase(input: string) {
    // Validate input
    if (input.length < 3) {
        throw new Error('Input is too short');
    }
    // Save to database
    // Assume we have a Database class
    const db = new Database();
    db.save(input);
}

// Good practice
function validateInput(input: string): boolean {
    return input.length >= 3;
}

function saveToDatabase(input: string) {
    const db = new Database();
    db.save(input);
}

function handleUserInput(input: string) {
    if (validateInput(input)) {
        saveToDatabase(input);
    }
}

Best Practices

Error Handling

Use try - catch blocks to handle errors gracefully. Also, create custom error classes for better error handling.

class CustomError extends Error {
    constructor(message: string) {
        super(message);
        this.name = 'CustomError';
    }
}

function divide(a: number, b: number): number {
    if (b === 0) {
        throw new CustomError('Cannot divide by zero');
    }
    return a / b;
}

try {
    const result = divide(10, 0);
} catch (error) {
    if (error instanceof CustomError) {
        console.log(error.message);
    }
}

Avoiding Global Variables

Global variables can lead to naming conflicts and make the code harder to understand and maintain. Instead, use local variables and pass them around as needed.

Code Formatting

Use a code formatter like Prettier to keep the code consistent. Most IDEs support integrating Prettier, which can automatically format the code on save.

Conclusion

Writing clean code in TypeScript is a combination of understanding the fundamental concepts, using the right usage methods, following common practices, and adhering to best practices. By doing so, developers can create more maintainable, readable, and bug - free code. Static typing, interfaces, enums, and other TypeScript features provide powerful tools to achieve clean code, but it is up to the developers to use them effectively.

References

• TypeScript official documentation: https://www.typescriptlang.org/docs/
• Clean Code by Robert C. Martin

This blog provides a comprehensive overview of writing clean code in TypeScript. By following these principles and patterns, developers can improve the quality of their TypeScript projects.