Missing/incomplete typescript definitions

brct-james commented 1 year ago

I encountered the same issue as @joaorulff in #43 while integrating this with an existing Angular project. It seems the camera-2d-simple module does not have a type declaration file, which should be a relatively easy fix since you author both projects. Error:

Error: node_modules/regl-scatterplot/dist/types.d.ts:18:35 - error TS7016: Could not find a declaration file for module 'camera-2d-simple'. 'node_modules/camera-2d-simple/dist/camera-2d.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/camera-2d-simple` if it exists or add a new declaration (.d.ts) file containing `declare module 'camera-2d-simple';`

There is also an issue that I assume to be caused by the relative path import('./renderer') in types.d.ts#L126. Error:

Error: node_modules/regl-scatterplot/dist/types.d.ts:126:38 - error TS2307: Cannot find module './renderer' or its corresponding type declarations.

Finally, I also had this issue:

Error: node_modules/regl-scatterplot/dist/types.d.ts:19:21 - error TS2307: Cannot find module 'd3-scale' or its corresponding type declarations.

Which was easily resolved with npm install @types/d3 --save-dev. It's not clear to me why the necessary types aren't being installed with d3-scale itself, but perhaps adding @types/d3 to the dependencies would fix this.

For all of these issues, using the --skipLibCheck typescript option or including the following in tsconfig.json is a workaround.

{
  "compilerOptions": {
    "skipLibCheck": true,
  }
}

flekschas commented 1 year ago

Thanks for reporting. The type issues will be fixed with the next version.

flekschas commented 1 year ago

FYI, I am not adding @types/d3 as the types are automatically resolved for me. If you have a reproducible example, I can look into it.

flekschas commented 1 year ago

I've tested regl-scatterplot with the following simple Vite+TS setup and I don't see any type issues.

package.json

{
  "name": "regl-scatterplot-ts-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^4.9.3",
    "vite": "^4.0.0"
  },
  "dependencies": {
    "regl-scatterplot": "1.5.0"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

src/main.ts

import { setupScatter } from './scatter';

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
    <canvas
      id="canvas"
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    />
  </div>
`

setupScatter(document.querySelector('#canvas')!);

src/scatter.ts

import createScatterplot from 'regl-scatterplot';

const generatePoints = (length: number) => ({
  x: Array.from({ length }, () => -1 + Math.random() * 2),
  y: Array.from({ length }, () => -1 + Math.random() * 2),
  z: Array.from({ length }, () => Math.round(Math.random())), // category
  w: Array.from({ length }, () => Math.random()), // value
});

export function setupScatter(canvas: HTMLCanvasElement) {
  const scatter = createScatterplot({ canvas });
  scatter.draw(generatePoints(10000));
}

I am going to close this issue for now. But if you're still running into problem, please reopen the ticket and provide a reproducible example.

flekschas / regl-scatterplot

Missing/incomplete typescript definitions #98