Pesquisa de site

javascript - Typescript não consegue encontrar tipo no arquivo de definição na pasta node_modules

Eu tenho um projeto que tem esta estrutura:

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

Eu tenho o seguinte ./package.json:

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

Meu ./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": [
        "./**/*"
    ]
}

Como você pode ver, estou incluindo também a pasta definitions, já que há algumas definições manuais que quero incluir em todos os arquivos TypeScript do meu projeto.

Problema

O seguinte falha na compilação:

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

Com erro:

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

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

interact não é encontrado, mesmo que no arquivo node_modules/interactjs o index.d.ts esteja presente com todas as definições.

Qual é o problema?

Resposta #1

Se você desejar manter a resolução de módulo como none, adicionar o arquivo de tipagem na seção "include" deve fornecer o resultado desejado.

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)

construído 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);

Resposta #2

Quando você importa um pacote, o Typescript (e o Node) determinam de qual arquivo/módulo importar desse pacote procurando um campo main no arquivo package.json incluído com o pacote. O arquivo package.json no interactjs inclui esta linha:

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

Isso significa que o módulo principal no pacote interactjs se chama interact.js e está no diretório dist/.

Se o arquivo package.json do pacote não especificar explicitamente a localização de um arquivo de definição de tipos, o Typescript assumirá que o arquivo de definição de tipos tem o mesmo nome base e localização que o módulo principal do pacote. Dada a localização do módulo principal no interactjs, o Typescript procurará definições de tipos no arquivo dist/interact.d.ts. Tente renomear o arquivo de definição de tipos de index.d.ts para interact.d.ts e certifique-se de que ele esteja no diretório dist/.

Se você está criando um pacote que inclui definições de Typescript, é útil tornar explícita a localização do arquivo de definição incluindo um campo types no seu campo package.json, como é descrito no guia de publicação

Artigos relacionados