TypeScript issue with importing declarations

Question

I am having an issue with importing declarations from an extended file (I am using this typing). According to example, I should put this into my code:

import * as SockJS from 'sockjs-client';
import BaseEvent = __SockJSClient.BaseEvent;
import SockJSClass = __SockJSClient.SockJSClass;

However, when I try to do this as following:

module Test {
    import * as SockJS from 'sockjs-client';
    import BaseEvent = __SockJSClient.BaseEvent;
    import SockJSClass = __SockJSClient.SockJSClass;

    export class Example {
        constructor() {......
}}}

I get the following error from the compiler:

error TS1147: Import declarations in a namespace cannot reference a module.

Am I doing something wrong? Or is there any issue with the typing itself?

Thanks
uksz

Answer 1

You should use your import statements outside your module

import * as SockJS from 'sockjs-client';
import BaseEvent = __SockJSClient.BaseEvent;
import SockJSClass = __SockJSClient.SockJSClass;

module Test {
    export class Example {
        constructor(){}
    }
}

Answer 2

I succeeded to use imported typings in my customizing Cypress code using the same syntax as them :

declare global {
    namespace Cypress {

https://github.com/cypress-io/cypress/blob/3e8b52f3deb82b5d29b959cbbe01917010fa5f92/packages/net-stubbing/lib/external-types.ts#L368

So it works at least in a namespace, not tested in a ts module but I hope it does too.

It seems to only work in this certain context because if I comment out my imports it throws: Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.ts(2669). But if you are there, that's you want to import/export something.

Answer 3

I believe this is due to a mix of the typescript module options.

Your class uses internal modules and the typing file uses external modules. See the Working with other JavaScript libraries section here: http://www.typescriptlang.org/docs/handbook/modules.html

Answer 4

I have faced the same issue when trying to import moment.d.ts type definition file in one of my typescript file.

I'm also wrapping my whole class inside a module. The solution that I did to solve the issue was, in my typescript file - Scheduler.ts, I put the line import * as moment from "../definitions/moment/moment"; just before the module declaration (refer to image below).

I didn't include the whole class definition for brevity reason.

As you can see, I have reference path explicitly define in the typescript file for external libraries (jquery, kendo ui and moment).

The folder structure where type definitions are saved.

Below is also my tsconfig.json, not quite sure setting this allowSyntheticDefaultImports: true ease the problem. I just followed the notes written on this link when importing and using in typescript file.

    {
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "strictNullChecks": false,
    "allowSyntheticDefaultImports": true
  }
}