Cannot use types when imported into TypeScript (5.1.6)

[drzony]

When importing iro.js in TypeScript:

import iro from "@jaames/iro";
class Test {
    test: iro.ColorPicker; // this line says: "semantic error TS2503: Cannot find namespace 'iro'"
}
function test(): void {
    const b = document.createElement("div");
    const a = new iro.ColorPicker(b, {}); // this line says: "Only a void function can be called with the 'new'"
    // which is easily fixed by changing type of ColorPicker in export from "any" to "void"
}

For some reason exported object is not treated as a namespace, I tried to find out what is wrong, but came up empty.
When using the same code with 5.1.5 I get a warning about missing declaration, but everything works.
My tsconfig:

{
    "compilerOptions": {
        "target": "es2017",
        "module": "esnext",
        "moduleResolution": "node",
        "lib": ["es2017", "dom", "dom.iterable"],
        "noEmit": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "strict": true,
        "noImplicitAny": false,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "types": []
    }
}

My rollup.js:

import nodeResolve from "@rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";

const plugins = [
    nodeResolve(),
    typescript({
        typescript: require("typescript"),
        objectHashIgnoreUnknownHack: true
    }),
];

export default [
    {
        input: "src_www/js/index.ts",
        output: {
            dir: "data/www/js",
            format: "es"
        },
        plugins: [...plugins]
    }
];

Are there any special options I need to use to compile it?

[jaames]

Not really sure what's wrong here; I can reproduce the problem, although even when I try exporting a namespace from iro.js I get similar errors

I'm super busy at the moment so I'm afraid I don't really have time to dive into it fully, but hopefully someone more knowledgable than me when it comes to Typescript could help shed some light here

[Mocha--]

Hi,

I've checked this issue out.

There is nothing wrong with the typescript declarations.

When constructing the ColorPicker, we shouldnt call new iro.ColorPicker(b, {});

Instead, just use iro.ColorPicker(b, {}) as iro.ColorPicker is a function rather than a newable 'function'.

[drzony]

@Mocha-- Thanks for looking into it, however you missed the first part of my code where I cannot use iro.ColorPicker and iro.Color as types. I've found a workaround for it:

import { IroColorPicker } from "@jaames/iro/dist/colorPicker";
import { IroColor } from "@irojs/iro-core";
import iro from "@jaames/iro";

class IroTest {
  picker: IroColorPicker;
  color: IroColor;

  constructor() {
    this.picker = iro.ColorPicker("#picker", {});
    this.color = picker.color;
  }
}

But I don't think that is the intended usage.
The code below still fails:

import iro from "@jaames/iro";
class Test {
    test: iro.Color; // this line says: "semantic error TS2503: Cannot find namespace 'iro'"
}

[Mocha--]

@drzony , sorry I missed the first issue that you cannot get the correct types.

I guess two ways to fix it.

1. If typescript version >= 2.7, add the below to your tsconfig.json.

"esModuleInterop": true,
"allowSyntheticDefaultImports": true

2. Or simply import * as iro from '@jaames/iro'

Option 1 is preferable personally.

[drzony]

@Mocha-- Unfortunatelly that does not help, still getting "Cannot find namespace iro"

[Mocha--]

Shouldn't be.

Could you please check your node_modules/@jaames/iro/dist has index.d.ts?
and also relaunch your editor.

[drzony]

Yes, I've verified everything. I've created a new project and did a fresh "npm install" inside.
It contains only:

src/index.ts
package.json
rollup.config.js
tsconfig.json

src/index.ts:

import iro from "@jaames/iro";

export class Test {
    picker: iro.ColorPicker;
    color: iro.Color;

    constructor() {
        const div = document.createElement("div");
        this.picker = iro.ColorPicker(div, {});
    }
}

package.json:

{
    "name": "iro_test",
    "version": "1.0.0",
    "description": "Test",
    "main": "index.js",
    "license": "MIT",
    "dependencies": {
        "@jaames/iro": "^5.1.6"
    },
    "devDependencies": {
        "@rollup/plugin-commonjs": "^11.0.2",
        "@rollup/plugin-json": "^4.0.2",
        "@rollup/plugin-node-resolve": "^7.1.1",
        "@typescript-eslint/eslint-plugin": "^2.27.0",
        "@typescript-eslint/parser": "^2.27.0",
        "eslint": "^6.8.0",
        "eslint-config-airbnb-base": "^14.1.0",
        "eslint-config-prettier": "^6.10.1",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-prettier": "^3.1.2",
        "prettier": "^1.19.1",
        "rollup": "^1.32.1",
        "rollup-plugin-serve": "^1.0.1",
        "rollup-plugin-terser": "^5.3.0",
        "rollup-plugin-typescript2": "^0.24.3",
        "tldrlegal": "^1.0.11",
        "typescript": "^3.8.3"
    },
    "scripts": {
        "build": "rollup -c"
    }
}

tsconfig.json:

{
    "compilerOptions": {
        "target": "es2017",
        "module": "esnext",
        "moduleResolution": "node",
        "lib": ["es2017", "dom", "dom.iterable"],
        "noEmit": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "strict": true,
        "noImplicitAny": false,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true
    }
}

rollup.config.js:

import typescript from "rollup-plugin-typescript2";
import nodeResolve from "@rollup/plugin-node-resolve";

const plugins = [nodeResolve(), typescript()];

export default [
    {
        input: "src/index.ts",
        output: {
            dir: "dist",
            format: "es"
        },
        plugins: [...plugins]
    }
];

Doing:

npm install
npm build

results in:

[!] (plugin rpt2) Error: /mnt/d/Source/projects/web/iro_test/src/index.ts(4,13): semantic error TS2503: Cannot find namespace 'iro'.
src/index.ts
Error: /mnt/d/Source/projects/web/iro_test/src/index.ts(4,13): semantic error TS2503: Cannot find namespace 'iro'.
    at error (/mnt/d/Source/projects/web/iro_test/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at throwPluginError (/mnt/d/Source/projects/web/iro_test/node_modules/rollup/dist/shared/node-entry.js:11878:12)
    at Object.error (/mnt/d/Source/projects/web/iro_test/node_modules/rollup/dist/shared/node-entry.js:12912:24)
    at Object.error (/mnt/d/Source/projects/web/iro_test/node_modules/rollup/dist/shared/node-entry.js:12081:38)
    at RollupContext.error (/mnt/d/Source/projects/web/iro_test/node_modules/rollup-plugin-typescript2/src/rollupcontext.ts:37:18)
    at /mnt/d/Source/projects/web/iro_test/node_modules/rollup-plugin-typescript2/src/print-diagnostics.ts:41:11
    at arrayEach (/mnt/d/Source/projects/web/iro_test/node_modules/rollup-plugin-typescript2/node_modules/lodash/lodash.js:516:11)
    at _.each (/mnt/d/Source/projects/web/iro_test/node_modules/rollup-plugin-typescript2/node_modules/lodash/lodash.js:9342:14)
    at printDiagnostics (/mnt/d/Source/projects/web/iro_test/node_modules/rollup-plugin-typescript2/src/print-diagnostics.ts:9:2)
    at Object.transform (/mnt/d/Source/projects/web/iro_test/node_modules/rollup-plugin-typescript2/src/index.ts:234:5)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `rollup -c`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/drzony/.npm/_logs/2020-04-22T14_04_24_917Z-debug.log

[drzony]

After reading up on exporting namespaces in TypeScript:
https://dev.to/loilo/typescript-s-secret-parallel-universe-54i6
microsoft/TypeScript#10058

I created a pull request that allows using exports as types.

[jaames]

Rad, thanks @Mocha-- and @drzony! I'll try to test that PR over the weekend and hopefully push the fix then :)