default Keyword in Typescript

by

    When you’re learning TypeScript, you might come across the term “default” in the context of modules. In this Typescript tutorial, I will explain what is the Typescript default keyword and how to use the default keyword in Typescript with a few practical examples.

    The default keyword in Typescript is used for exporting a single value (like a function, class, or variable) from a module, making it the main export. This simplifies imports in other files, allowing you to import this value without specifying its name. It’s especially useful when a module primarily aims to provide one specific functionality.

    What is the “default” Keyword in Typescript?

    In TypeScript, the “default” keyword is used during module export to specify a default export. Unlike named exports, a default export allows a module to export a single value, which can be a function, a class, or a variable. This makes imports more concise and is particularly useful when a module is designed to export one main functionality.

    Why Use Default Exports in Typescript?

    Here are a few reasons why we use the default exports in Typescript.

    • Simplicity: Default exports simplify the import syntax when only one value is being exported.
    • Readability: It improves readability, making the primary functionality of the module clear.
    • Flexibility: Allows renaming of the imported value without an additional import syntax.

    Typescript default keyword syntax

    Here is a syntax for exporting a default value in Typescript.

    // Exporting a function as default
export default function greet(name: string): string {
    return `Hello, ${name}!`;
}

// Exporting a class as default
export default class User {
    constructor(public name: string) {}
}

// Exporting a variable as default
const greeting = "Hello World";
export default greeting;

    Below is how you can import a default export in Typescript.

    // Importing a default-exported function
import greet from './greet';

// Importing a default-exported class
import User from './User';

// Importing a default-exported variable
import greeting from './greeting';

    default Keyword in Typescript Examples

    Now. let us check some examples to understand how to use the default keyword effectively.

    Example 1: Default Function Export

    greet.ts

    export default function greet(name: string): string {
    return `Hello, ${name}!`;
}

    app.ts

    import greet from './greet';
console.log(greet('Alice'));

    You can see the output in the screenshot below once you run the code using Visual Studio Code.

    To run the above Typescript code, run the below two commands:

    tsc app.ts
node app.js
    default Keyword in Typescript

    Example 2: Default Class Export

    User.ts

    export default class User {
    constructor(public name: string) {}
}

    app.ts

    import User from './User';
const user = new User('Bob');
console.log(user.name); // Output: Bob

    Example 3: Default Variable Export

    constants.ts

    const greeting = "Welcome to TypeScript";
export default greeting;

    app.ts

    import greeting from './constants';
console.log(greeting); // Output: Welcome to TypeScript

    Conclusion


    In TypeScript, the “default” keyword is used for exporting a single value (like a function, class, or variable) from a module, making it the main export. In this tutorial, we understood:

    • What is the “default” Keyword in Typescript?
    • Why Use Default Exports in Typescript?
    • Typescript default keyword syntax
    • default Keyword in Typescript Examples

    You may also like:

    >