Как импортировать библиотеки js в модуль Typescript / VS Code, используя Intellisense

Question

Я читал другие посты и учебные пособия о том, как добавить (популярные).js-библиотеки с его файлами d.ts в файл модуля Typescript, но я заперт в замкнутом круге сообщений об ошибках. Я довольно новичок в Typescript, поэтому, пожалуйста, дайте мне знать, если что-то не так с моей настройкой.

Я создаю модуль.ts, который использует (среди прочего) наборы данных vis.js или функции moment.js.

Задача VS Code компилирует мой файл модуля.ts в.js. Конечно, я хотел бы использовать IntelliSense для используемых библиотек js.

Файлы.d.ts для vis.js взяты из проекта DefiniteTyped.

Структура файла:

/projectdir
    /.vscode
        tasks.json
    /lib
        vis.js
        moment.js
    /src
        myModule.ts
        -> myModule.js
        -> myModule.js.map
    /types
        /vis/index.d.ts...
        /jquery/index.d.ts...
    index.html
    tsconfig.json

Содержание файла tsconfig.json:

{
    "compilerOptions": {
        "module": "system",
        "moduleResolution": "classic",
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "target": "es5",
        "sourceMap": true,
        "watch": true,
        "rootDir": "src",
        "lib": ["es2015", "dom", "dom.iterable"],
        "baseUrl": "types",
        "typeRoots": ["types"]
    },
    "exclude": [
        "./lib",
        "**/*.js",
        "**/*.js.map"
    ],
    "include": [
        "src/**/*.ts"
    ]
}

Содержание моего VSCode tasks.json:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "command": "tsc",
    "problemMatcher": "$tsc",
    "tasks": [{
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }]
}

Наконец это myModule.ts:

export module datacore {
    export var myDataSet = new vis.DataSet([]);
}

Я установил и использовал ссылки на файлы.d.ts для vis и других библиотек js в файле tsconfig.json. В основном это работает, но я получаю эту ошибку:

src/datacore.ts(2,33): error TS2686: 'vis' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Итак, я подумал о добавлении импорта поверх моего модуля:

import * as vis from "../lib/vis";
//also tried: import vis = require("../lib/vis");

export module datacore {
    export var myDataSet = new vis.DataSet([]);
}

Когда я сейчас запускаю задачу компиляции в файле myModule.ts, это занимает довольно много времени, поскольку он, очевидно, тоже пытается компилировать vis.js. Через некоторое время я получаю эту ошибку:

Cannot write file '/Users/username/Desktop/timecore/lib/vis.js' because it would overwrite input file.

Хорошо, он не может писать vis.js, но я все равно этого не хочу. Чтобы он не компилировал файлы.js, я устанавливаю "allowJs": false в tsconfig.json.

Компиляция теперь намного быстрее, но это приводит к этой ошибке:

src/datacore.ts(3,22): error TS6143: Module '../lib/vis' was resolved to '/Users/username/Desktop/timecore/lib/vis.js', but '--allowJs' is not set.

Это где замкнутый круг замкнулся.

Что не так с моей настройкой?

Что мне нужно сделать, чтобы правильно импортировать библиотеку js в мой модуль Typescript (чтобы я мог также использовать IntelliSense для проверки типов в VS Code)?

Answer 1

Что не так с моей настройкой?

Ну, я не могу выяснить, что не так с вашей настройкой, потому что она выглядит очень странно для меня.

Если бы мне нужно было создать проект TypeScript с использованием vis.js и moment.js, это был бы мой процесс установки (с использованием npm):

npm install --save vis moment
npm install --save-dev @types/vis @types/moment

Тогда ваш код должен выглядеть так:

import * as vis from "vis";

export module datacore {
    export var myDataSet = new vis.DataSet([]);
}

Я не буду использовать систему в качестве решателя модулей в вашем файле tsconfig.json. Вместо этого я предлагаю вам создать начальный tsconfig.json файл с помощью tsc --init а затем настроить его под свои нужды.

Наконец, если вы ориентируетесь на веб-браузеры, вам также следует поискать информацию о веб-решениях (таких как веб-пакет или RequireJS).

Answer 2

В результате обсуждения в комментариях, в вашем случае вы должны использовать import * as vis from "../types/vis/index"; вместо "../lib/vis",