Typescript generic function and indexed argument

Question

I have following package.json:

{
    "name": "browserify-test",
    "version": "1.0.0",
    "description": "",
    "main": "dist/index.js",
    "typings": "dist/index.d.ts",
    "scripts": {
        "build:tsc": "tsc --outDir dist",
        "build:browser": "browserify src/index.ts -p tsify --standalone MyLib > dist/myLib.js"
    },
    "devDependencies": {
        "browserify": "^14.0.0",
        "tsify": "^3.0.0",
        "typescript": "^2.1.5"
    }
}

Following tsconfig.json:

{
    "compilerOptions": {
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "ES5",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "declaration": true
    }
}

File src/evets.d.ts:

export interface MyEvent {
    name: string
}

And finally entry point src/index.js:

import * as events from './events';

export class MyLibrary {
    public test(eventInstance: events.MyEvent) {
        console.log(eventInstance);
        console.log(events);
    }
}

Building pure typescript version works. So command npm run build:tsc works perfectly but trying to build with browserify, so invoking npm run build:browser i get following error:

> browserify-test@1.0.0 build /home/aszmyd/tmp/browserify-test
> browserify src/index.ts -p tsify --standalone MyLib > dist/myLib.js

Error: Cannot find module './events' from '/home/aszmyd/tmp/browserify-test/src'

It seems that browserify cannot properly consume type definition files with d.ts extension.

The above example WORKS in two cases:

When in index.ts i import like this: import * as events from './events.d; (note the ending .d)
When i remove the console.log(events); line (?!) - how it can use events.*** types but cannot use the whole set (alias) ?

I think im missing something dummy here but im lack of ideas.

Bruno Grieder · Accepted Answer · 2017-02-28T11:18:08.067

1

Running

import * as events from './events';

attempts to import a typescript file called 'events.ts' located in the same directory as the importing file. That is because it is a relative path.

(importing ./events.d will import events.d.ts in the same directory, explaining why "it works")

To import an external module, the import statement is made using the module name (not a path). Hence for a module called 'events', the import statement would be

import * as events from 'events'

When importing an external module, the compiler will look for a definition file, "typing" the module. Depending on how the module is structured this file could be an internal module definition looking like your 'event.d.ts' or an external module definition file which would more likely look like

declare module 'events' {
    export interface MyEvent {
        name: string
    }
}

edited Feb 28 '17 at 11:18

answered Feb 28 '17 at 10:31

Bruno Grieder

28,128
8
69
101

Thanks! This makes some sense. But can You please tell me if its possible to use internal module definition from another folder. I.e. can i make `import * as sth from 'module'` when the `module.d.ts` file is not in the same folder? I assume compiler looks for `module.d.ts` and then `node_modules/module`, `../node_modules/module` etc until it finds it – Adam Szmyd Feb 28 '17 at 11:27
Sure. Create a `typings` directory with sub-folders named with the module names. Stick the module definition file in that subfolder. In `tsconfig.json`, make sure that `typings` is not excluded from the compilation path (i.e. is included). That is it – Bruno Grieder Feb 28 '17 at 11:30

Typescript generic function and indexed argument

1 Answers1