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:

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.
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.