When working with a package written in TypeScript, the TypeScript compiler derives types itself from the package's source.

If, however, a package is written in JavaScript, it makes no sense to duplicate it and write a copy in TypeScript. Instead, a creator can use 

 and provide typescript type information about APIs of a package.

 and want to expose some types under this namespace. In this case, you would write:

// types.d.ts

// Namespaces are like internal modules,
// they help to organize your code.
declare namespace SickComponentsLibrary {
  
  // Here we can declare some types
  // that will be used across components later.
  type Avatar = {
    src: string;
  }
  
  // Everything that should be accessible outside
  // can be exported via export keyword.
  export type UserProp = {
    id: string;
    name: string;
    avatar: Avatar
  }
  
  // You can also declare interfaces if needed.
  type SwipeDirection = 'left' | 'right' | 'top' | 'bottom'
  
  export interface Swipable {
    swipe(): SwipeDirection;
  }
}

In the case, of a library that exports functions or classes you can declare their type signatures as well:

// types.d.ts

// You can export without namespaces as well:
declare function doStuff(x: number): string;

// Notice that we don't create a function body here.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">What <code>.d.ts</code> files are</h1><p>When working with a package written in TypeScript, the TypeScript compiler derives types itself from the package's source.</p><p>If, however, a package is written in JavaScript, it makes no sense to duplicate it and write a copy in TypeScript. Instead, a creator can use <code>.d.ts</code> files. </p><p>Those files are called <a href="https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html" rel="noopener noreferrer nofollow">declaration files</a> and provide typescript type information about APIs of a package.</p><h2><a name="declaration-example" id="declaration-example">Declaration Example</a></h2><p>Let's say you write a component library <code>SickComponents</code> and want to expose some types under this namespace. In this case, you would write:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-1bH0S" id="cm-1bH0S">// types.d.ts

// Namespaces are like internal modules,
// they help to organize your code.
declare namespace SickComponentsLibrary {
  
  // Here we can declare some types
  // that will be used across components later.
  type Avatar = {
    src: string;
  }
  
  // Everything that should be accessible outside
  // can be exported via export keyword.
  export type UserProp = {
    id: string;
    name: string;
    avatar: Avatar
  }
  
  // You can also declare interfaces if needed.
  type SwipeDirection = 'left' | 'right' | 'top' | 'bottom'
  
  export interface Swipable {
    swipe(): SwipeDirection;
  }
}</textarea><p>In the case, of a library that exports functions or classes you can declare their type signatures as well:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-UZ3sv" id="cm-UZ3sv">// types.d.ts

// You can export without namespaces as well:
declare function doStuff(x: number): string;

// Notice that we don't create a function body here.</textarea><p>Live examples of <code>.d.ts</code> files you can find in <code><a href="https://github.com/DefinitelyTyped/DefinitelyTyped" rel="noopener noreferrer nofollow">DefinitelyTyped</a></code><a href="https://github.com/DefinitelyTyped/DefinitelyTyped" rel="noopener noreferrer nofollow"> repo</a>.</p><h2><a name="sources" id="sources">Sources</a></h2><ul><li><p><a href="https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html" rel="noopener noreferrer nofollow">Declaration files</a></p></li><li><p><a href="https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html" rel="noopener noreferrer nofollow">Declaration reference</a></p></li><li><p><code><a href="https://github.com/DefinitelyTyped/DefinitelyTyped" rel="noopener noreferrer nofollow">DefinitelyTyped</a></code><a href="https://github.com/DefinitelyTyped/DefinitelyTyped" rel="noopener noreferrer nofollow"> repo</a></p></li></ul>

AUTHOR

Alex Bespoyasov

When working with a package written in TypeScript, the TypeScript compiler derives types itself from the package's source. If, however, a package is written in JavaScript, it makes no sense to duplicate it and write a copy in TypeScript. Instead, a creator can use .d.ts files. Those files are…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

What .d.ts files are

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript