chartjs / chartjs/Chart.js

using TypeScript type definitions in code without modules

Open
#9,965 11 comments 9 reactions 0 assignees View on GitHub
type: bug type: types
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

Do the TS type definitions in Chart.js 3.0 support code written old-school web way, without modules, with the library included in HTML using ``?

I have a file that uses Chart.js this way, written in TypeScript, and it worked fine with Chart.js 2.x, with the types from DefinitelyTyped. I'm trying to upgrade to 3.0 now, and the TypeScript compiler doesn't seem to recognize the name `Chart`. I can see it's going through the type files, but in the end it somehow doesn't make this declaration available to my script (`error TS2304: Cannot find name 'Chart'.`).

I suspect this may be because (as I understand?) the objects are now exported there using the CommonJS way, but I'm not actually importing any modules in my script, since it relies on the `Chart` object being imported into `window` earlier. But I have a pretty poor understanding of how JS modules work in general, so I'm not sure.

Based on some simple tests, I can see that a class declared like this (which is how type declarations for Chart.js 2.x looked like) works when used without an `import`:

```ts
declare class Chart {
id: string;
}
```

But a class declared like this (which is how type declarations for Chart.js 3.x look like) doesn't:

```ts
export declare class Chart {
id: string;
}
```

I've found some suggestions on the web that adding a wrapper script that `import`s the contents of the module and then re-exports everything using `declare global` could fix this, but I've tried a few different ways and nothing seems to give the results I want.

Given that Chart.js 2.x could be used this way, and Chart.js 3.x supports being used this way in plain JS (using the non-ESM variant of the build from a CDN), is this something you could possibly add? Or at least, can you provide tips on how to work around this on the user side, if that's actually possible?

## Steps to Reproduce

- have a `.ts` file that references the `Chart` class from the global namespace without using `import`
- add type declaration files from the `types` folder into the project, or install `chart.js` to `node_modules` using `npm`
- run the TypeScript compiler with `npx tsc` on that TypeScript file

## Expected Behavior

The TypeScript compiler should load all type definitions for Chart.js. When parsing a TS file that uses Chart.js 2.x, it should only print errors for the parts of code that call APIs that have been removed in 3.x.

## Current Behavior

The TypeScript compiler seems to load type definitions (`npx tsc --traceResolution` shows it's going through the files), but it still doesn't recognize any APIs from Chart.js:

```
error TS2304: Cannot find name 'Chart'.
error TS2503: Cannot find namespace 'Chart'.
```

## Environment

* Chart.js version: 3.6.1
* TypeScript compiler version: 4.4.3

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.