Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing/incomplete typescript definitions #98

Closed
brct-james opened this issue Jan 2, 2023 · 3 comments
Closed

Missing/incomplete typescript definitions #98

brct-james opened this issue Jan 2, 2023 · 3 comments
Labels
bug Something isn't working

Comments

@brct-james
Copy link

brct-james commented Jan 2, 2023

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 flekschas added the bug Something isn't working label Jan 13, 2023
@flekschas
Copy link
Owner

flekschas commented Jan 13, 2023

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

@flekschas
Copy link
Owner

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
Copy link
Owner

flekschas commented Jan 13, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants