Как импортировать d3 (v4) в машинописный текст в приложении ASP.NET MVC?

Question

Я создал приложение ASP.NET MVC в Visual Studio 2015 и включил несколько javascript-библиотек. Наиболее важным рядом с jquery является d3 (v4 и частично v3 на некоторых страницах). Теперь я копаю в Typcript (это для меня очень ново).

Прежде чем я углубится в подробности, вот мой вопрос: какой самый простой способ переключиться с JS на TS и как я могу работать с моментами .js, d3.js и другими зависимостями?

К сожалению, я не могу включить модуль d3 в свой файл .ts. Он говорит «Не могу найти модуль d3», если попытаться включить его в import * as d3 from 'd3';

Я также пытался использовать файлы определения типов, загружая их вручную в проект и загружая их через npm (npm install @types/d3 --save-dev). Ни один из них не работал. Возможно, я не понимаю, как это работает или должно работать.

Сразу после устранения этой проблемы мне придется иметь дело с AMD или CommonJS. Не могли бы вы предложить простое решение, которое не требует нескольких дополнительных установок для моего проекта?

Большое спасибо и извините, если я не был достаточно точным (это мой первый вопрос о SO).

Answer 1

Когда вам нужен import * as d3 from 'd3';, вам нужен пакет d3, который доступен только локально в вашем node_modules и поэтому не будет работать в браузере. Это были ошибки, связанные с зависимостью (например, webpack), они считывали все необходимые пакеты по вашему коду и включали их в вывод сборки. Однако, поскольку вы сказали, что новичок в Node.js и TypeScript, я должен предупредить вас, что настройка проекта с использованием этих инструментов может быть довольно сложной, а кривая обучения довольно крутой. Проведите исследование ваших потребностей проекта, и если вы увидите, что вам это понадобится в какой-то момент, начните изучать, как использовать webpack ASAP, поскольку адаптация вашего кода позже может быть еще более болезненной.

Другим вариантом будет включение jQuery и D3.js по старинке (с обычными тегами сценария). В этом случае, чтобы распознавать TypeScript JQuery и D3, даже когда они загружаются отдельно, мы используем то, что мы называем «эмбиентными объявлениями». Эти объявления раскрывают определения под глобальными переменными этих библиотек, поэтому TypeScript предполагает, что во время выполнения будет доступна глобальная переменная d3 или $ и будет содержать API библиотек, которые мы хотим. Поэтому нет import.

К счастью, оба «@ types/jquery» и «@ types/d3» уже включают эти глобальные объявления. Для D3 убедитесь, что вы устанавливаете определения для v4 с помощью npm i --save-dev @types/d3@4.x

Другие шаги, которые могут потребоваться для использования зависимостей от ванили, - это некоторые настройки в файле tsconfig.json. Вот пример:

{ 
    "compileOnSave": false, 
    "buildOnSave": false, 
    "compilerOptions": { 
    "target": "es5", 
    "module": "amd", 
    "moduleResolution": "classic", 
    "sourceMap": true, 
    "baseUrl": ".", 
    "types": [ 
     "d3", 
     "jquery" 
    ] 
    } 
} 

Обратите внимание на module и moduleResolution и pick the options, что лучше всего подходит вам. Также обратите внимание на параметр types, в котором TypeScript включает в себя эмбиентные объявления от @types/d3 и @types/jquery. Эти опции, кстати, относятся к TypeScript 2.0.

Честно говоря, мне трудно сказать, что именно вам нужно сделать, чтобы все работало, поскольку каждый контекст требует разных настроек. Но я надеюсь, что я, по крайней мере, привел вас в правильном направлении, чтобы выяснить остальное самостоятельно. Удачи!