Как правильно импортировать версию SVG.js 3.0.x в проект Typescript Create-React-App - PullRequest
Новая
       36

Как правильно импортировать версию SVG.js 3.0.x в проект Typescript Create-React-App

0 голосов
/ 03 октября 2019

Поскольку на тему моих проблем не было дано подробного ответа ни в одной другой ветке, и на официальном сайте Svg.js нет хорошего ответа, я выкладываю его в новой ветке с подробным описанием проблемы.

1. Мой стек разработчика:

a.) CRA (create-Reaction-app) - "response-scripts": "3.1.2"

b.) Typescript - "typcript":" 3.6.3 "

c.) SVG.js -" @ svgdotjs / svg.js ":" ^ 3.0.13 "

2. Чего я хочу добиться:

Я хочу правильно импортировать SVG.js, чтобы использовать его в моем элементе с id = "drawing" для рисования форм SVG внутри элемента.

3. Моя проблема:

Если я импортирую свою библиотеку Svg.js следующим образом: 

import * as SVG from "@svgdotjs/svg.js";

или таким образом: 

import SVG from "@svgdotjs/svg.js/src/svg";

Тогда я могупозже не использовать SVG ни в каком случае в моем проекте.

Выполнение этого, например, не работает: 

let draw = SVG().addTo('#drawing').viewbox(0, 0, 300, 140)
let rect = draw.rect(100, 100).attr({fill: "#f06"})

Я получаю сообщения о "не удалось найти файл объявления дляmodule @ svgdotjs / svg.js / src / svg " при использовании второго импорта, который я показал выше

и

при использовании первого импорта, представленного мной выше, внезапно IntellijИдея показывает типы в коде, но не распознает SVG () и говорит «Это выражение не может быть вызвано. Тип 'typeof import (" @ svgdotjs / svg.js ")' не имеет сигнатур вызовов."

В любом случае я не могу заставить его работать так, как должен.

Мой тестовый код здесь: 

import React from 'react';
import * as SVG from "@svgdotjs/svg.js";
//import SVG from "@svgdotjs/svg.js/src/svg";
import './App.css';
const App: React.FC = () => {
  let draw = SVG().addTo('#drawing').viewbox(0, 0, 300, 140)
  let rect = draw.rect(100, 100).attr({fill: "#f06"})
  return (
    <div className="App">
    SVG.js test :)
      <div id="drawing">
      </div>
    </div>
  );
}
export default App;

4. Мой вопрос:

Как успешно импортировать и использовать Svg.js в create-реагировать-приложение с машинопись ?

Приветствуются только ответы с реальными решениями, а не с предположениями.

С наилучшими пожеланиями!

...