Typescript - ( Declaration | Definition ) file ( .d.ts file)

Installation

Example with lodash

yarn add @types/lodash --dev
// or
npm install -S @types/lodash

Repository containing these files for each library.

• TypeSearch
• https://github.com/microsoft/TypeScript/tree/master/lib
• See DefinitelyTyped

Global Variable

/** The number of widgets present */
declare var foo: number;
declare const foo: number; // Read only
declare let foo: number; // Block scoped

Function

• declare function declare functions

declare function greet(greeting: string): void;

Objects with Properties (Namespace)

• declare namespace to declare to describe types or values accessed by dotted notation

declare namespace myLib {
    function makeGreeting(s: string): string;
    let numberOfGreetings: number;
}

Overloaded function

Function - Overloaded Function (Overloaded)

declare function getWidget(n: number): Widget;
declare function getWidget(s: string): Widget[];

Creation with tsc command line

with Typescript - tsc (official compiler)

tsc --declaration ./js/index.ts
# or 
tsc --declaration -p tsconfig.json

where:

• -d or –declaration generates a '.d.ts' file.

Creation with tsconfig and jsx

{
  // Your project
  "include": ["src/**/*"],
  "compilerOptions": {
    // Tells TypeScript to read JS files, as
    // normally they are ignored as source files
    "allowJs": true,
    // Generate d.ts files
    "declaration": true,
    // This compiler run should only output d.ts files
    // to not overwrite the js file
    "emitDeclarationOnly": true,
    // Types should go into this directory.
    // Removing this would place the .d.ts files
    // next to the .js files
    "outDir": "dist",
    // go to js file when using IDE functions like
    // "Go to Definition" in VSCode
    "declarationMap": true,
    // exclude errors in types from dependencies libraries
    "skipLibCheck": true,
    // Allows jsx
    "allowImportingTsExtensions": true,
    "jsx": "react-jsx",
    // ??? React can only be used with a default import when using the 'esModuleInterop' flag
    "esModuleInterop": true
  }
}

• then with tsc

tsc --project tsconfig.types.json

• then in your package.json

{
  "types":"/dist/index.d.ts"
}