Why is <reference path="..." /> required when Importing dojox/gfx with TypeScript?

101 Views Asked by At

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?

0

There are 0 best solutions below