js模块声明中的“文件不是模块”

Question

https://github.com/mgumerov/angular

Please have a look at src/mock-data/mock-data.js - it's big but very simple.

System.register([], function (exports) {
  mockdata = {......};
  exports("MockData", mockdata);
});

I chose to consume it in my TS module src/app/table-view.ts:

import { MockData } from 'mockdata/mock-data';

but TSC gave me an error message because importing a JS module results in implicit 'any' object, unless the module has a TS typed declaration handy. And, as Angular 2 quickstart suggests, "implicit any" are treated as errors.

My initial impulse was to use require() to import the module instead, as some sources propose. However that leads to error "cannot find name: require".

All right, let's supply a declaration: src/mock-data/mock-data.d.ts

declare module 'MockData' {
  var mockdata: any;
  export = mockdata;
}

It looks perfectly like other similar declarations ( https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/adal/index.d.ts ), except of course it's very simple because I only declare a single untyped object. And maybe I even don't do that properly, but that not the whole story! Problem is, TSC now says TS2306: File ...mock-data.d.ts is not a module! And even when I tried to replace the file with the one mentioned before (from DefinitelyTyped), the message remained the same. What is going on?

And where am I supposed to find a proper explanation of how to consume a JS module in TS? A module with no classes, no interfaces, just a single object?

Answer 1

Here is the proper declaration:

export const MockData: any;

That's the whole mock-data.d.ts The MockData here is the identifier under which the export is made in my mock-data.js

This is devised from https://www.typescriptlang.org/docs/handbook/modules.html - unfortunately the hint is hidden in a section "UMD modules", because in other examples there exist that "declare" thing which is not needed in my case.