Generated definition file (.d.ts) by typescript not working with package.json typings

Question

I have created a definition file (d.ts) from my typescript project using the --declaration argument from the tsc compiler.

But this generated definition file apparently not work when i try to publish the package with the property typings at the npm package.json. I have created another project to test it.

It complains with the message: "Exported external package file typings file '...d.ts' is not a module. Please contact the package author to update the package definition".

This are my source files:

MyInterface.ts

export interface MyInterface
{
    MyProperty: string;
}

MyClass.ts

import {MyInterface} from './MyInterface';

export class MyClass implements MyInterface
{
    get MyProperty(): string
    {
        return "MyString";
    }
}

MyInheritedClass.ts

import {MyClass} from './MyClass';

export class MyInheritedClass extends MyClass
{
    public MyMethod(): number
    {
        return 1;
    }
}

The tsc command is this:

tsc MyClass.ts MyInterface.ts MyInheritedClass.ts --declaration -t es5 -outFile "mydefinition.js" --module "system"

This is the generated definition:

mydefinition.d.ts

declare module "MyInterface" {
    export interface MyInterface {
        MyProperty: string;
    }
}
declare module "MyClass" {
    import { MyInterface } from "MyInterface";
    export class MyClass implements MyInterface {
        MyProperty: string;
    }
}
declare module "MyInheritedClass" {
    import { MyClass } from "MyClass";
    export class MyInheritedClass extends MyClass {
        MyMethod(): number;
    }
}

Is there another thing i have to do or the generated definition supposedly not work in the package.json typings ??

Update for more details:

The scenario is that i have 2 projects:

• The First project is where i generate the library where i will publish to npm, and the package.json is where i put the typings property linking to the mydefinition.d.ts file generated by the tsc -d command.

• The Second project i create to test the first one by adding the package (with typings) generated.

A link with the 2 projects and another links for the scenario :

https://github.com/jvitor83/typings-packagejson

I think the problem is with the "Your definition files should be written as external modules" at the first link. But i want to know if there is a way to get those definitions generated to put at the typings property of the package.json.

To reproduce the problem:

• Clone this repo: https://github.com/jvitor83/test-typings-packagejson

• Do 'npm install', open with VSCode and go to the file 'src/test.ts'.

Answer 1

The solution was:

1 - add a single file 'index.ts' that exports all others files.

export * from "./MyInterface"
export * from "./MyClass"
export * from "./MyInheritedClass"

2 - add at build process two compilation/transpilation of the files (one for declarations and another for the single js file [with out property in tsc compiler])

let tsConfigDeclaration = gulp_typescript({module: 'system', target: 'es5', declaration: true, removeComments: true });
let tsConfigOneFile = gulp_typescript({module: 'system', target: 'es5', declaration: true, removeComments: true, out: 'typings-packagejson.js'});

More info at build process: https://github.com/jvitor83/typings-packagejson/blob/master/gulpfile.js

and index file: https://github.com/jvitor83/typings-packagejson/blob/master/app/src/typings-packagejson.ts

Answer 2

When are you getting this error?

I used the generated d.ts file in another project and is working fine.

   /// <reference path="mydefinition.d.ts" />

  import { MyInterface } from "MyInterface";
  import { MyClass } from "MyClass";
  import { MyInheritedClass } from "MyInheritedClass";

  let x: MyInterface = { MyProperty: "hello!!" };
  let y: MyClass = new MyClass();
  let z: MyInheritedClass = new MyInheritedClass();

And on compiling it is generating JS file,

 /// <reference path="mydefinition.d.ts" />
 "use strict";
 var MyClass_1 = require("MyClass");
 var MyInheritedClass_1 = require("MyInheritedClass");
 var x = { MyProperty: "hello!!" };
 var y = new MyClass_1.MyClass();
 var z = new MyInheritedClass_1.MyInheritedClass();

Are you getting this error when using this in some HTML file? Have you included the mydefinition.js file in the HTML?

Update

Based upon your more details, Here is the solution I may propose, Add another file named index.ts and export all your modules from there,

index.ts

    export * from "./MyInterface"
    export * from "./MyClass"
    export * from "./MyInheritedClass"

Add a tsconfig.json file for easy building,

tsconfig.json

    {
     "version": "1.0.0",
     "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": false,
        "declaration": true,
        "outDir": "lib/"
    }       
   }

Note I have made it a commonjs module (not sure if it works for your need), generate build using tsc command. It will generate files like below note it has added js files for all ts files and d.ts is also for all module, But since we have exported all module from single file it will be easier to use in package.json file for npm module.

Then add package.json in the npm module you want to publish like below, let us consider module name is foo

package.json

    {
     "name": "foo",
     "author": "author name",
     "version": "1.0.0",
     "main": "lib/index.js",
     "typings": "lib/index.d.ts"
    }

Now add the foo folder inside node_module, final structure for the second project will be something like below,

Finally in your test.ts file import and use,

test.ts

    import { MyInterface, MyClass, MyInheritedClass } from "foo";

    let x: MyInterface = { MyProperty: "hello!!" };
    let y: MyClass = new MyClass();
    let z: MyInheritedClass = new MyInheritedClass();