Dexie.js: Dexie Type definitions seem to be broken

[bennycode]

Today I wanted to use Dexie.d.ts to get the type definitions for Dexie. I grabbed Dexie.d.ts using the TypeScript Definition Manager (typings):

typings install github:dfahlander/Dexie.js/src/Dexie.d.ts#d271a952f2fed858bd6a25bfb2c4f5e8a55eaba3 --save

After that I referenced Dexie.d.ts:

/// <reference path="/typings/modules/Dexie/index.d.ts" />

But my editor (WebStorm 2016) complains that Dexie is an unresolved type. I then checked the Dexie.d.ts file in my editor and noticed that it looks broken. Might this cause the issue that Dexie cannot be resolved?

Screenshot:

[dfahlander]

typings tool is the one inserting the first lines (https://github.com/typings/typings/blob/master/docs/faq.md#types-of-typings). I don't know why webstorm complains about it and whether the format of Dexie.d.ts has to change in order for typings to invoke its lines there.

So, either this is a webstorm/typings issue, or it's something that I should do something about, but it's typing's lines that it complains about.

If someone could advice me of how to properly deliver the typings file for today's best practice, I would be very happy ;)

[bennycode]

There are some Best practices here but I also pinged the typings team: https://github.com/typings/typings/issues/563 — Let's see where it gets us. :smiley:

[dfahlander]

Thanks for that! As I've understood, DefinitelyTyped is going away in favour of typings, right? Would be nice to get some feedback from the typings team about this.

[bennycode]

Looks like it works when I use:

/// <reference path="../../typings/modules/Dexie/index.d.ts" />
import Dexie from "Dexie";

function testTypings() {
  var db = new Dexie('MyDatabase');
  ...
}

But WebStorm still shows an error for the declare module 'Dexie'declaration in Dexie\index.d.ts.

[dfahlander]

Seems to be a jungle on how to deliver a d.ts file with a library that just works, or I am doing some trivial thing wrong.

I followed the angular2 quickstart sample and tried to use dexie with it. Typescript compiler actually picks up dexie out-of-the-box. No need for typings or tsd to make that work, because dexie.d.ts is delivered with the dexie package and referenced in package.json through the typings property. But the runtime systemjs loader does NOT pick it up. Maybe that's why a tool like typings would be needed?

According to https://github.com/typings/typings/issues/142, typings tool SHOULD be used also when having the d.ts file delivered with the package, which surprises me. I feel the typings team knows some secrets that I would need to know as well so I made a comment on that issue about this. Hope to hear back from them soon.

[dfahlander]

Ok, so I got my sample working perfectly well without any typings or tsd tool. I've tested with Visual Studio Code (the simple JS and TS code editor from Microsoft) and also in WebStorm 11. It just picks up Dexie as is after npm install dexie. I started with the angular2 quickstart guide and then installed dexie and started using it in the component. I had problems first, getting it to work runtime, but I found out that it was only to configure systemjs properly in systemjs.config.js:

• maps: Add 'dexie': 'node_modules/dexie/dist/dexie.js'
• packages: Add 'dexie': { format: 'amd'}

So, basically, you wont need to use typings at all. But maybe I'm just lucky?

[dfahlander]

Got it confirmed that we shall not use typings or tsd or any other tool to make use of dexie's d.ts files and that they are in the correct shape, without define module clause.

Conclusions:

• Dexie's type definitions do not need any CLI tool like typings or tsd. Just make sure to have "moduleResolution": "node"in your tsconfig.js. Typescript will find the correct d.ts file automatically (located at dist/dexie.d.ts), and so does WebStorm and vscode at least.
• If using AMD (requirejs) or SystemJS, you need to configure them to find dexie.js from node_modules/dexie/dist/dexie.js.
• If using System.js, your systemjs.config.js file must include dexie in map and packages to tell it that dexie is an 'amd' or 'cjs' module (both will work because it's an UMD module):

System.config({
    ...
    map: {
        ...,
        'dexie': 'node_modules/dexie/dist/dexie.js',
    },
    packages: {
        ...,
        'dexie': { format: 'amd' }
    }
});

[bennycode]

Thank you for clarification. It's worth a lot to know that. Maybe you should add this info to Dexie's wiki (if not already done)? Thank's a lot, David!