Generating typescript declaration files from javascript

Typescript

Typescript Problem Overview


Say for example, you have a npm library, in my case mongoose, how would you go about generating d.ts files?

Typescript Solutions


Solution 1 - Typescript

JavaScript doesn't always contain enough type information for the TypeScript compiler to infer the structures in your code - so automatically generating a definition based on JavaScript is rarely an option.

There are instructions on how to write them from scratch here:

https://www.stevefenton.co.uk/2013/01/complex-typescript-definitions-made-easy/

But there is one trick that might work (it only works in a limited set of cases).

If you paste the JavaScript into a new TypeScript file, fix any trivial errors you may get and compile it using the definition flag, it may be able to get you a file that would at least be a starting point.

tsc --declaration js.ts

Solution 2 - Typescript

The question is a bit old, but for the sake of people coming from search engines like me, if you are looking for an automated tool, check out:

  • Microsoft/dts-gen

    The official starting point Microsoft uses when creating types. It's meant to be a starting point only though and I didn't get a lot of luck depending just on it

  • dtsmake

    This one looks very promising. It depends on Ternjs which some editors use to provide autocomplete for JS code. Check Ternjs out also for other tool names and comparisons with them.

Update (2021): It's a good idea to check npmtrends and compare dts-generator, dts-gen, dtsmake, npm-dts, and alternatives.

Solution 3 - Typescript

For other people who find this post through google: there's a generator now by Microsoft itself: dts-gen.

Solution 4 - Typescript

If you're attempting to use a third-party JavaScript library in your TypeScript file, you can create a custom (and nearly blank) declaration file anywhere in your project.

For example, if you wanted to import:

import * as fooLibrary from 'foo-lib';

You would create a new file named 'foo-lib.d.ts' with the following contents:

declare module 'foo-lib' {
  var fooLibrary: any;
  export = fooLibrary;
}

Solution 5 - Typescript

For my particular situation, where I was working with obfuscated code from a third party, I found it useful to load the script in a page, and then use the console to log an instance of the obfuscated class. The console gives you a neat summary of the class methods and properties which you can copy and use as the starting point of a definition file.

> o = new ObfuscatedClass()
> console.log(o)
ObfuscatedClass
- methodA(a,b){some implementation}
- methodB(a,b){other implementation} etc

which you can copy paste and edit to

declare class ObfuscatedClass {
    
    methodA(a,b);
    methodB(a,b);

}

Solution 6 - Typescript

You might want to have a look at "npm-dts" NPM package. It is a tool for generating single index.d.ts file for your NPM package so that it could be consumed by other TypeScript packages out of the box.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGames BrainiacView Question on Stackoverflow
Solution 1 - TypescriptFentonView Answer on Stackoverflow
Solution 2 - TypescriptMeligyView Answer on Stackoverflow
Solution 3 - TypescriptJoost de VriesView Answer on Stackoverflow
Solution 4 - TypescriptSteve BrushView Answer on Stackoverflow
Solution 5 - TypescripttarlingView Answer on Stackoverflow
Solution 6 - TypescriptVytenis UrbonavičiusView Answer on Stackoverflow