About “*.d.ts” in TypeScript

by

The “d.ts” file is used to provide typescript type information about an API that’s written in JavaScript. The idea is that you’re using something like jQuery or underscore, an existing javascript library. You want to consume those from your typescript code.

Rather than rewriting jquery or underscore or whatever in typescript, you can instead write the d.ts file, which contains only the type annotations. Then from your typescript code you get the typescript benefits of static type checking while still using a pure JS library.

This works thanks to TypeScript’s constraint of not letting you add the “.ts” extension at the end of the import statement. Because of that, when you reference some file, let’s say, my-module.js, if there is a my-module.d.ts next to it, then TypeScript will include its content:

src/
  my-module.js
  my-module.d.ts
  index.ts

my-module.js

const thing = 42;

module.exports = { thing };

my-module.d.ts

export declare const thing: number;

index.ts

import { thing } from "./my-module"; // <- no extension

// runtime implementation of `thing` is taken from ".js"
console.log(thing); // 42

// type declaration of `thing` is taken from ".d.ts"
type TypeOfThing = typeof thing; // number

More Related Contents:

  1. Typescript does not copy d.ts files to build
  2. TypeScript: Object.keys return string[]
  3. Angular 2 custom form input
  4. How to check the object type on runtime in TypeScript?
  5. What is the syntax for Typescript arrow functions with generics?
  6. How to extend String Prototype and use it next, in Typescript?
  7. Angular 2: Convert Observable to Promise
  8. How to prepare release version with SystemJS and Gulp?
  9. Angular2 canActivate() calling async function
  10. How to declare a Fixed length Array in TypeScript
  11. Is it possible to restrict number to a certain range
  12. Higher-order type functions in TypeScript?
  13. Angular 6 View is not updated after changing a variable within subscribe
  14. ESLint – Configuring “no-unused-vars” for TypeScript
  15. Object destructuring with property names that are not valid variable names
  16. How to declare a type as nullable in TypeScript?
  17. How to use Object.values with typescript?
  18. is there a way to get all required properties of a typescript object
  19. Typescript: ReturnType of overloaded function
  20. What TypeScript version is Visual Studio Code using? How to update it?
  21. Why does TypeScript track mutation of function static properties?
  22. Array VS Type[] in Typescript
  23. What’s the meaning of “=>” in TypeScript? (Fat Arrow)
  24. How to use array.map with tuples in typescript?
  25. how to remove properties via mapped type in TypeScript
  26. How to update TypeScript to latest version with npm?
  27. Typescript: Spread types may only be created from object types
  28. Typescript and filter Boolean
  29. Why TypeScript lets me add a string and a number? Can I prevent it?
  30. A way to mark arbitrary strings in Typescript Template Literals

Leave a Comment