Qiita初投稿になります。
フロントエンジニアとしてデビューしてちょうど半年経ったかなー位の初心者です٩( 'ω' )و
今回はAngularでCytoscape.jsを使って困った時の経験を書いていきます!
因みにcytoscape.jsとはグラフを良い感じに表示してくれる(と信じている)
javascriptのライブラリです。
cytoscape.js
表示したいグラフデモ
npmインストールしてimportしても使えない!?
今回はグラフを描くのにcytoscape.jsのcose-bilkentとというレイアウトを使いたくて
実装しようとしたんですけどドキュメント通りに
これドキュメント
https://github.com/cytoscape/cytoscape.js-cose-bilkent
import cytoscape from 'cytoscape';
import coseBilkent from 'cytoscape-cose-bilkent';
cytoscape.use( coseBilkent );
と書いてもCannot resolve definitions for module 'cytoscape-cose-bilkent' って怒られる!
神々からの助言
んでなんでだろーってなったところで@typesが無いんじゃない?と神(職場の先輩)の声が
取り敢えず@types探してみようとコマンド打ってみるも
npm install --save-dev @types/cytoscape-cose-bilkent
無い!!!
また困って調べたらネットの神が残したであろう記事を発見!
npm module に typescript の型定義がない時に、とりあえずビルドが通るようにする
これこれーーー!と思いつつ見てみたら
tsconfig.jsonに設定を追加するって書いてある( *`ω´)
- 1src/@types ディレクトリを作成
- 2..d.ts を1のフォルダ内に配置
との事_φ( ̄ー ̄ )
早速src配下に@typesフォルダ作成してcytoscape-cose-bilkent.d.tsファイル作成!
中身はこんな感じ
declare module 'cytoscape-cose-bilkent';
そして
tsconfig には typeRoots というプロパティがあり、これは型定義を探し始める root のディレクトリを決めるオプションです。デフォルトが @types になっているので、 自分の typescriptプロジェクト内に @types を追加することで自動的に .d.ts を探しにいってくれます
との事なのでこれも実装(☝︎ ՞ਊ ՞)☝︎
これでなんとかむりくりビルド通して理想のグラフを実装出来ました!
まとめ
これからも出会って行くであろう@types無い問題の備忘録として残しました。
拙い記事ですが何かご指摘や他にもこんなやり方あるよ!等がありましたら
コメントお願いします!
これからも備忘録やionic,Angular記事を中心にフロントエンジニア業界の小栗旬を目指して頑張っていきます。