Как импортировать d3 (v4) в typescript в ASP.NET MVC?

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

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

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

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

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

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

Крис, в 15:29 (источник)

1 ответ

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

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

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

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

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

    Обращайте внимание modulemoduleResolutionи выбирайте варианты, которые вам больше подходят. Также обратите внимание на typesпараметр, делающий TypeScript включать внешние объявления из @types/d3и @types/jquery. Кстати, эти опции предназначены для TypeScript 2.0.

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