Declaration file syntax (.d.ts) in Typescript - Mini Project: Build & Apply

Understanding Declaration File Syntax (.d.ts) in TypeScript

📖 Scenario: You are working on a TypeScript project that uses a JavaScript library without type definitions. To help TypeScript understand the library's types, you will create a declaration file (.d.ts).

🎯 Goal: Create a declaration file that describes a simple JavaScript library's interface using TypeScript declaration syntax.

📋 What You'll Learn

Create an interface describing a user object

Declare a function that takes a user object and returns a string

Use the declare keyword properly

Export the function from the declaration file

💡 Why This Matters

🌍 Real World

Declaration files help TypeScript understand JavaScript libraries without built-in types, improving code safety and editor support.

💼 Career

Many jobs require working with third-party JavaScript libraries in TypeScript projects, so knowing how to write declaration files is valuable.

1

Create an interface for a user object

Create an interface called User with two properties: name of type string and age of type number.

Typescript

# Your code here
// Create interface User with name and age properties

Need a hint?

Use the interface keyword followed by the interface name and curly braces to define properties.

2

Declare a function that uses the User interface

Add a declaration for a function called greetUser that takes one parameter user of type User and returns a string. Use the declare keyword.

Typescript

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

// Declare function greetUser that takes user: User and returns string
# Your code here

Need a hint?

Use declare function followed by the function name and parameter types.

3

Export the declared function

Export the greetUser function using the export keyword so it can be used by other files.

Typescript

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

declare function greetUser(user: User): string;

// Export greetUser function
# Your code here

Need a hint?

Use export { functionName }; syntax to export declarations.

4

Print a message showing the declaration file content

Print the entire declaration file content as a single string exactly as written, including interface, function declaration, and export statement.

Typescript

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

declare function greetUser(user: User): string;

export { greetUser };

// Print the declaration file content
# Your code here

Need a hint?

Use console.log with a template string to print the full content.