Typescript 在 node_modules 文件夹中的定义文件中找不到类型

Question

我有一个具有以下结构的项目：

project/
├── package.config
├── node_modules/
│   ├── interactjs/
│   ├── ├── index.d.ts
├── src/
│   ├── browser/
│   |   ├── tsconfig.json
│   |   ├── index.ts

我有以下

./package.json

：

{
    ...
    "dependencies": {
        "interactjs": "1.3.4"
    },
    "devDependencies": {
        "typescript": "3.2.2"
    }
}

我的

./src/browser/tsconfig.json

是：

{
    "compilerOptions": {
        "target": "es5",
        "module": "none",
        "declaration": true,
        "strict": true,
        "strictNullChecks": false,
        "outDir": "./out"
    },
    "typeRoots": [
        "../../node_modules",
        "../../node_modules/@types",
        "../definitions"
    ],
    "include": [
        "./**/*"
    ]
}

如您所见，我还包含文件夹

definitions

，因为我想将一些手动定义包含在项目的所有 Typescript 文件中。

问题

以下编译失败：

const p : interact.Position = { x: 1, y: 2 };

有错误：

index.ts:9:11 - error TS2503: Cannot find namespace 'interact'.

9 const s : interact.Position = { x: 1, y: 2 };
            ~~~~~~~~

即使在

interact

 文件中 

node_modules/interactjs

 包含所有定义，也找不到 

index.d.ts

。

有什么问题吗？

Answer 1

如果您希望将模块分辨率保持为无，请将键入文件添加到

"include"

部分应该会为您提供所需的输出。

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "none",
        "declaration": true,
        "strict": true,
        "strictNullChecks": false,
        "outDir": "./out",
        "noImplicitAny": false //<------ to ignore the errors in interactjs/index.d.ts
    },
    "typeRoots": [
        "../../node_modules",
        "../../node_modules/@types",
        "../definitions"
    ],
    "include": [
        "../../node_modules/interactjs/index.d.ts", //<----- include interact in the global scope
        "./**/*"
    ]
}

index.ts

const p : interact.Position = { x: 1, y: 2 };
const s : interact.SnapPosition = { x: 1, y: 2, range: 0 };

const listener : interact.Listener = (e: interact.InteractEvent)=>{
    console.log(e);
};

interact.on("cancel", listener)

构建index.js

"use strict";
var p = { x: 1, y: 2 };
var s = { x: 1, y: 2, range: 0 };
var listener = function (e) {
    console.log(e);
};
interact.on("cancel", listener);

Answer 2

导入包时，Typescript（和 Node）通过在包中包含的

main

文件中查找

package.json

字段来确定从该包导入哪个文件/模块。 Interactivejs 中的

package.json

文件包含这一行：

"main": "dist/interact.js",

这意味着interactjs包中的主模块名为

interact.js

，位于

dist/

目录中。

如果包的

package.json

文件没有显式指定类型定义文件的位置，Typescript 将假定类型定义文件与包的主模块具有相同的基本名称和位置。给定interactjs中主模块的位置，Typescript将在文件中查找类型定义

dist/interact.d.ts

。尝试将类型定义文件从

index.d.ts

重命名为

interact.d.ts

，并确保它位于

dist/

目录中。

如果您正在编写包含 Typescript 定义的包，则通过在

types

字段中包含

package.json

字段来明确定义文件的位置会很有帮助，如 发布指南

中所述

Answer 3

您的 tsconfig.json 中似乎缺少

"moduleResolution":"node",

行。

这就是我的 tsconfig.json 文件之一的样子。

{
  "compileOnSave": false,
  "compilerOptions": {
  "baseUrl": "./",
  "outDir": "./dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "module": "es2015",
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es5",
  "typeRoots": [
    "node_modules/@types"
  ],
  "lib": [
    "es2017",
    "dom"
   ]
  }
}

Answer 4

我通过在yarn项目根目录（不一定是git checkout目录，因为yarn根目录可以是git项目中的子目录）创建

.yarnrc

解决了类似的问题。我填写如下：

nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-4.1.1.cjs

这导致yarn在yarn项目根目录而不是其他地方创建目录

node_modules

。现在 VSCode 可以找到类型了。

我这样做是基于：Yarn v3.0.2 为什么不安装node_modules文件夹？需要在纱线命令之后运行 npm install 吗？