How to Set Default Values for TypeScript Types?

One of my team members recently asked about setting default values for TypeScript types. In this tutorial, I will explain how to set default values for TypeScript types with some real examples.

Set Default Values for TypeScript Types

Let me first explain to you why we are required to set default values for various TypeScript Types.

Default values in TypeScript provide a way to ensure that your functions and objects have sensible initial values, reducing the likelihood of errors and improving code maintainability. They are particularly useful when you want to avoid undefined values or when you need to provide fallback values.

Set Default Values for TypeScript Function Parameters

One of the most common use cases for default values in TypeScript is with function parameters. You can specify default values directly in the function signature.

Let me show you an example.

Example

Here is the complete TypeScript code.

function greet(name: string = "John Doe", city: string = "New York"): string {
    return `Hello, ${name} from ${city}!`;
}

console.log(greet()); // Output: Hello, John Doe from New York!
console.log(greet("Alice", "Los Angeles")); // Output: Hello, Alice from Los Angeles!

In this example, the greet function has default values for both name and city. If no arguments are provided, the function uses “John Doe” and “New York” as defaults.

Here is the exact output in the screenshot below:

Set Default Values for TypeScript Types

Read How to Check the Type of a Variable in TypeScript?

Default Values in Object Destructuring in TypeScript

TypeScript also allows setting default values when destructuring objects. This is particularly useful when working with configuration objects.

Example

Here is an example.

interface Config {
    apiUrl?: string;
    timeout?: number;
}

const defaultConfig: Config = {
    apiUrl: "https://api.example.com",
    timeout: 5000,
};

function initialize(config: Config = defaultConfig): void {
    const { apiUrl = "https://api.example.com", timeout = 5000 } = config;
    console.log(`API URL: ${apiUrl}, Timeout: ${timeout}`);
}

initialize(); // Output: API URL: https://api.example.com, Timeout: 5000
initialize({ apiUrl: "https://api.custom.com" }); // Output: API URL: https://api.custom.com, Timeout: 5000

Here, the initialize function uses default values specified in the defaultConfig object. If the config parameter is not provided, it defaults to defaultConfig.

Read How to Set Default Values in TypeScript Interfaces?

Default Type Arguments in Generics in TypeScript

TypeScript 2.3 introduced default type arguments, allowing you to provide default types for generics. This feature simplifies type definitions and makes your code more flexible.

Example

Here is an example.

class ApiResponse<T = string> {
    constructor(public data: T) {}
}

const response1 = new ApiResponse(); // T defaults to string
const response2 = new ApiResponse<number>(42); // T is explicitly set to number

console.log(response1.data); // Output: ""
console.log(response2.data); // Output: 42

In this example, the ApiResponse class uses a default type argument. If no type is specified, T defaults to string.

Conclusion

Setting default values in TypeScript is a powerful feature that can help you write more resilient and maintainable code. Whether you are setting default values for function parameters, object properties, or generic types, understanding these patterns will make your TypeScript applications more robust and easier to manage.

For more detailed information on setting default values in TypeScript, you can refer to the TypeScript Handbook or explore further examples on Stack Overflow.