TypeScript D3 v4 import not working

Question

Я пытаюсь построить крошечную библиотеку JS поверх D3, чтобы нарисовать линейную диаграмму. Я довольно новичок во всей сцене, но я думал, что лучше всего научусь прыгать в «глубоком конце».

Вот содержание моего package.json

{ 
    "name": "d3play02", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "d3-array": "^1.0.1", 
    "d3-axis": "^1.0.3", 
    "d3-request": "^1.0.2", 
    "d3-scale": "^1.0.3", 
    "d3-selection": "^1.0.2", 
    "d3-shape": "^1.0.3", 
    "d3-time-format": "^2.0.2", 
    "rollup": "^0.36.3", 
    "rollup-plugin-node-resolve": "^2.0.0", 
    "uglify-js": "^2.7.4" 
    }, 
    "dependencies": { 
    "@types/d3": "^4.2.37" 
    } 
} 

У меня есть файл с именем LineChart.ts и там у меня есть:

/// <reference path="node_modules/@types/d3/node_modules/@types/d3-request/index.d.ts" /> 
import csv from 'd3-request'; 

class LineChart { 
    data(url: string): DsvRequest { 
     // code to go here 
    } 
} 

Но это дает мне ошибку говоря это

Это жалоба что он не может найти модуль d3-request, но у меня есть тот, который установлен и основан на материале, который я прочитал, я правильно импортирую!

Answer 1

Ваш НПМ устанавливает связанным с d3 должен быть следующими:

Если вы собираетесь использовать только подмножество модулей, для каждого модуля необходимо установить сам модуль и файл соответствующего определения.

E-mail: npm install d3-array --save и npm install @types/d3-array --save Фактический модуль d3-array будет надлежащей зависимостью (а не devDependency, как показано в приведенном выше фрагменте). Определения из @types могут быть --save или --save-dev, что зависит от случая использования (для библиотеки, используемой другим кодом, правильная зависимость должна быть использована)

Если вы хотите использовать модули D3 с модулем погрузчиком, вам затем может импортировать стандартный синтаксис TypeScript:

import * as d3Array from 'd3-array'; 
import {select, Selection} from 'd3-selection'; 

Или аналогичный, в зависимости от ваших потребностей.

Для удобства можно создать модуль просто «пакетирование», так что вы можете получить доступ к пользовательскому свертку в более обобщенном виде:

// d3-bundle.ts 
export * from 'd3-array'; 
export * from 'd3-axis'; 
... 
export * from 'd3-time-format'; 

Вы можете адаптировать этот модуль для ваших потребностей, в том числе только реэкспортирующим подмножество членов отдельных модулей с использованием export {...} from 'd3-MODULE';

В любом модуле, который вы хотите использовать D3, вы должны импортировать «d3-bundle» с использованием соответствующего относительного пути, и у вас будет доступ к тому, что вы положили через комплект баррель:

// use-d3.ts 
import { csv, DsvRequest } from './d3-bundle'; // again, use the right relative path for your project 

class LineChart { 
    data(url: string): DsvRequest { 
     // code to go here 
    } 
}