Type checking npm compat import without types errors via `deno check`, but not in the lsp

[itsdouges]

Hi! As mentioned in https://github.com/denoland/deno/issues/15960 I'm opening a new issue to talk about this issue I'm having.

Is the task "[ ] automatic acquisition of @types package for type checking" related to type checking npm specifier imports? I'm getting errors such as:

TS2305 [ERROR]: Module '"deno:///missing_dependency.d.ts"' has no exported member 'Box3'.
import { Box3, Layers, PerspectiveCamera as PC, Vector3, Vector3Tuple } from 'three';
         ~~~~
    at file:///Users/douges/projects/FAZE/packages/editor-frontend/src/canvas.tsx:4:10

It type checks fine in VSCode, just not with deno check. Is there anything on my end to do for a fix?

My deno.json:

{
  "importMap": "./import_map.json",
  "tasks": {
    "editor": "deno run --allow-run packages/editor-cli/mod.ts",
    "check": "deno run --allow-read --allow-write --allow-run scripts/check.ts"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "lib": ["dom", "dom.iterable", "dom.asynciterable", "deno.ns"],
    "types": ["vite/client", "./types/vite.d.ts"]
  }
}

My import_map.json:

{
  "imports": {
    "@faze/editor-backend": "./packages/editor-backend/mod.ts",
    "@faze/editor-cli": "./packages/editor-cli/mod.ts",
    "@faze/editor-frontend": "./packages/editor-frontend/mod.ts",
    "@react-three/drei": "npm:@react-three/drei@9.45.0",
    "@react-three/fiber": "npm:@react-three/fiber@8.9.1",
    "react-dom": "npm:react-dom@18.2.0",
    "react-dom/client": "npm:react-dom@18.2.0/client",
    "react-router-dom": "npm:react-router-dom@6.4.4",
    "react": "npm:react@18.2.0",
    "react/jsx-runtime": "npm:react@18.2.0/jsx-runtime",
    "three": "npm:three@0.144.0",
    "three-stdlib": "npm:three-stdlib@2.20.4"
  }
}

[dsherret]

Sorry, what I'm about to say wasn't in the manual until today. You can make this work by adding a @deno-types above the import to tell Deno where to get the types (you might want to map the @types package in an import map):

// @deno-types="npm:@types/three@0.144.0"
import { Box3, Layers, PerspectiveCamera as PC, Vector3, Vector3Tuple } from 'three';

If it gets annoying to add a @deno-types above each entry, then you can create a module that re-exports the module with the types applied to it (or just put this in a deps.ts file):

// deps/three.ts
// @deno-types="npm:@types/three@0.1440"
export * from "npm:three@0.144.0";

Then update your import map like so:

{
  "imports": {
    // etc...
    "three": "./deps/three.ts"
  }
}

That said, I'm confused about why deno check errors in your original example. It should consider all the named imports as any types when the npm package doesn't have any types.

[dsherret]

I changed the title and marked this as a bug because those original named imports shouldn't have be erroring when running deno check.

[sant123]

Sorry, what I'm about to say wasn't in the manual until today. You can make this work by adding a @deno-types above the import to tell Deno where to get the types (you might want to map the @types package in an import map):

// @deno-types="npm:@types/three@0.144.0"
import { Box3, Layers, PerspectiveCamera as PC, Vector3, Vector3Tuple } from 'three';

If it gets annoying to add a @deno-types above each entry, then you can create a module that re-exports the module with the types applied to it (or just put this in a deps.ts file):

// deps/three.ts
// @deno-types="npm:@types/three@0.1440"
export * from "npm:three@0.144.0";

Then update your import map like so:

{
  "imports": {
    // etc...
    "three": "./deps/three.ts"
  }
}

That said, I'm confused about why deno check errors in your original example. It should consider all the named imports as any types when the npm package doesn't have any types.

I'm curious how would be this for React? Currently I'm getting this error:

[dsherret]

Hmmm... I feel like that should just work considering it works at runtime in Node and export = matches the runtime code. I'm going to open or look to see if there's an existing typescript bug. I'll report back in a bit.

As a workaround, you'd have to do either:

import React from "npm:react";
export default React;

...then import and use React, or re-export each named import individually, which will get annoying:

// @deno-types="npm:@types/react"
import React, { useState, useCallback } from "npm:react";

export default React;
export { useState, useCallback }; // etc...

[dsherret]

I opened https://github.com/microsoft/TypeScript/issues/51923

[sant123]

Thanks @dsherret