Can't see interfaces in namespaces

Question

This question is not directly related to Kendo UI but more about TypeScript namespace declarations.

I'm trying to import some interfaces from Kendo UI library. Structure of index.d.ts of Kendo UI is like below:

declare namespace kendo.ui {
    class Draggable extends kendo.ui.Widget { ... }
    interface DraggableEvent { ... }
    // ... other declarations
}

Now I import this declaration in my TypeScript file as below:

import '@progress/kendo-ui';

Strangely, in my TypeScript file, I can only see the class and function declarations, none of the interfaces are visible from outside of the namespace.

This is how my tsconfig.json is configured:

{
  "compilerOptions": {
    "lib": [
      "dom",
      "es5",
      "es2015",
      "es2015.promise"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "strict": false,
    "target": "es2015",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true
  }
}

I tried adding export keyword before some of the interface declarations to no avail.

Can someone please explain what's going on here?

Aaaah remains from the old age. Namespaces are the old module syntax used before the age of "ES6" also known as "external" modules in TS. You generally don't import/export namespaces in TS since they have no meaning to JavaScript. So what you get from one of thoose files are just the types. typescriptlang.org/docs/handbook/namespaces-and-modules.html — Per Svensson
@PerSvensson So how do I use those interfaces? By adding <reference path> to the top of the file? — Élodie Petit
Well, the lines are a bit blurry here between the old and new. In the newer compilers you don't have to ///ref but you just import the "external module". If you run in "project mode" (e.g. you have a tsconfig.json, like you do) then it should pick up all of the .d.ts files in that module. — Per Svensson
This question is a little bit to generic to answer. I think that the kendo team uses global. So when you import your kendo.js files it patches the window object and/or the jQuery object if your using that version. The .d.ts files in this version just represents that global defined object. (E.g. you dont need to import it, its no external module). Thats the old school (vero old school) way of doing things. But, again depends on the entire index.d.ts file you were using and what kendo ui version you using. docs.telerik.com/kendo-ui/third-party/typescript — Per Svensson

Kokodoko Kokodoko · Accepted Answer · 2017-10-18T16:00:39

A namespace in Typescript is just an object wrapper. It places your classes and interfaces inside an object with the name that you declare. This is an example of a Typescript namespace with the name kendo.ui. By the way, you don't have to import .d.ts files.

declare namespace kendo.ui {
    class Draggable {}
    interface DraggableEvent {}
}

class Test{
    constructor() { 
        let d = new kendo.ui.Draggable();
    }
}

Can't see interfaces in namespaces

1 Answers