Reputation: 8892
We have a TypeScript project where we need to uses Dojo's createSurface
. However, we unexpectedly need to include <reference path="..."/>
as shown below.
/// <reference path="node_modules/@types/dojo/dojox.gfx.d.ts"/>
import gfx1 = require("dojox/gfx");
import gfx2 from "dojox/gfx";
import * as gfx3 from "dojox/gfx";
import { createSurface } from "dojox/gfx";
const el = new HTMLElement();
gfx1.createSurface(el, 100, 100); // require
gfx2.createSurface(el, 100, 100); // from
gfx3.createSurface(el, 100, 100); // star
createSurface(el, 100, 100); // single method
I would have expected to not require <reference path="..."/>
but without it TypeScript complains that it cannot find the module for each require/import statement shown.
Our package.json is
{
"name": "react-dojo",
"version": "1.0.0",
"main": "index.ts",
"scripts": {
"build": "tsc"
},
"license": "MIT",
"devDependencies": {},
"dependencies": {
"@types/dojo": "1.9.40",
"@types/react": "^16.3.17",
"@types/react-dom": "^16.0.6",
"dojo": "^1.13.0",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"typescript": "2.9.1"
}
}
Our tsconfig.json is
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"jsx": "react",
"strict": true,
"esModuleInterop": true
},
"exclude": ["dist", "node_modules"]
}
How do (can) we import Dojox modules without <reference path=""/>
?
Upon further inspection of dojo's type definitions I found that I can dojox without the <reference path="..."/>
like so...
import * as dojox from "dojo/main.dojox";
dojox.gfx.createSurface(el, 100, 100);
// or
import { gfx } from "dojo/main.dojox";
gfx.createSurface(el, 100, 100);
This is because @types/dojo/index.d.ts
exports the following module.
declare module "dojo/main.dojox" {
var exp: dojo.main.dojox
export=exp;
}
However, the dojox interface in index.d.ts
defines gfx as an Object
. Typescript then warns that
Property 'createSurface' does not exist on type 'dojox'
As a test I created a new project with only the following dependencies.
"dependencies": {
"@types/dojo": "1.9.40",
"typescript": "2.9.1"
}
I then changed gfx: Object
to gfx: dojox.gfx;
within index.d.ts
. This seemed to resolve all issues for this test project.
I attempted to do the same to my original project but TypeScript warns that
node_modules/@types/dojo/index.d.ts(26014,24): error TS2694: Namespace 'dojox' has no exported member 'gfx'.
I have verified that the contents of node_modules/@types/dojo
are identical, and both projects use the same TypeScript version. The tsconfig.json files are the same as well.
Why would one project see the exported member and another not?
Upvotes: 2
Views: 92