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=""/>
?
Update 04 JUN 2018
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?