ответ разделён на две части:
- Можно ли включить подсказки кода в VSCode для сторонних библиотек?
- Можно ли включить подсказки кода в VSCode для svg.js
- Разбор svg.js
1. Можно ли включить подсказки кода в VSCode для сторонних библиотек?
да, можно.
если вам повезло - устанавливаете из npm пакет и всё.
если не повезло - ищите *.d.ts
npm
definitelytyped
то, что вам нужно гуглится так @types имя_библиотеки
ещё можно посмотреть тут http://microsoft.github.io/TypeSearch/
например для nodejs - https://www.npmjs.com/package/@types/node
установка происходит командой npm install --save @types/node
(!обратите внимание на версию типов и программы, могут отличаться)
после выполнения этой команды, скачиваются файлы содержащие только описание библиотеки, только типы, которые хранятся в файле с расширением *.d.ts
с недавнего времени, некоторые библиотеки при установке из npm уже содержат types и в этом случае не требуется выполнение npm install --save @types
2. Можно ли включить подсказки кода в VSCode для svg.js
Использую библиотеку svg.js
имеет .d.ts
не всё описано
и её плагины
неизвестно имеют ли .d.ts
сомнительно
3. Разбор svg.js
далее пример, взят отсюда:
var input = document.querySelector('input[type=text]')
var draw = SVG('drawing').viewbox(0, 0, 300, 140)
var text = draw.text(function(add) {
add.tspan( input.value )
})
text
.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
.animate(1000, '<>')
.plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
.loop(true, true)
input.addEventListener('keyup', updateText(text))
function updateText(textPath) {
return function() {
textPath.tspan(this.value)
}
}
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
#drawing {
width: 100%;
height: 300px;
}
tspan {
fill: #e5e5e5;
stroke: #f06;
stroke-width: 0.85;
font-family: 'Inconsolata';
}
input[type=text] {
width: 100%;
font-family: 'Inconsolata';
font-size: 14px;
outline: none;
color: #666;
}
<script src="https://cdn.rawgit.com/svgdotjs/svg.js/ceaf24d5/dist/svg.min.js">
/*! svg.js v2.4.0 MIT*/
</script>
<input type="text" value="Dragon----- - - - ->" placeholder="Type text here...">
<div id="drawing"></div>
разбор примера
создаём папку test
переходим в неё
создаём файл package.json
следующего содержания:
{
"author": "qwa",
"description": "",
"tags": [],
"name": "svg.js",
"private": true,
"main": "",
"version": "0.1.0",
"dependencies": {
"svg.js": "2.4.0" //<- библиотека такой же версии как в примере
},
"devDependencies": {
"reload": "2.2.2" //<- веб сервер для разработки
},
"scripts": {
"start": "reload"
}
}
выполнием npm install
создаётся директория node_modules
примерно такого содержания:
node_modules
├── ...
├── svg.js
│ ├── bench
│ ├── dist
│ │ ├── svg.js <-- скомпилированный файл библиотеки
│ │ └── svg.min.js
│ ├── spec
│ ├── src <-- исходики библиотеки
│ ├── ...
│ └──svg.js.d.ts <-- файл описания библиотеки
├── ...
└── ...
создаём и заполняем
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
и что мы видим
это не работает!
-->
<!-- <script src="/node_modules/svg.js/dist/svg.js"></script> -->
<!-- и это тоже -->
<!-- <script src="/node_modules/svg.js/dist/svg.min.js"></script> -->
<!-- зато это работает, чудеса, да и только -->
<script src="https://cdn.rawgit.com/svgdotjs/svg.js/ceaf24d5/dist/svg.min.js">
/*! svg.js v2.4.0 MIT*/
</script>
</head>
<body>
<input type="text" value="Dragon----- - - - ->" placeholder="Type text here...">
<div id="drawing"></div>
<script src="/index.js"></script>
</body>
</html>
index.css
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
#drawing {
width: 100%;
height: 300px;
}
tspan {
fill: #e5e5e5;
stroke: #f06;
stroke-width: 0.85;
font-family: 'Inconsolata';
}
input[type=text] {
width: 100%;
font-family: 'Inconsolata';
font-size: 14px;
outline: none;
color: #666;
}
index.js
//#region плохих советов
/// <reference path="./node_modules/svg.js/svg.js.d.ts" />
if(!SVG){//hack for intellisense
var SVG = svgjs
}
//#endregion плохих советов
var input = document.querySelector('input[type=text]')
var draw = SVG('drawing').viewbox(0, 0, 300, 140)
var text = draw.text(function(add) {
add.tspan( input.value )
})
text
.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
.animate(1000, '<>')
.plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
.loop(true, true)
input.addEventListener('keyup', updateText(text))
function updateText(textPath) {
return function() {
textPath.tspan(this.value)
}
}
выполняем npm start
смотрим http://127.0.0.1:8080/
найденные с ходу ошибки:
как мы видим, в функцию viewbox
передано 4 элемента, в то время как в types принимается всего один
https://github.com/svgdotjs/svg.js/blob/ceaf24d5/svg.js.d.ts#L143
далее, в чэйнинге
text
.path()
.animate()
.plot()
.loop()
функция animate
возвращает объект Animation
из которого вызывается функция plot
в то время как в types она отсутствует
https://github.com/svgdotjs/svg.js/blob/ceaf24d5/svg.js.d.ts#L930
резюмируя
у вас есть два пути:
- использовать как есть/ писать на гитхаб/ допиливать типы
- создать новый вопрос 'какие библиотеки для svg поддерживаются typescript' с меткой svg typescript
var draw = SVG('drawing'); draw. после точки, VS Code должна предлагать варианты
.*.d.ts
это частьtypescript
@types
но обо всём подробнее завтра.