Qiita의 첫 투고입니다.
프런트 엔지니어로 데뷔한 지 딱 반년이 됐죠, 초보자예요.٩( 'ω' )و
이번에는 Angular, Cytoscape입니다.js로 어려울 때의 경험을 적어주세요!
겸사겸사,cytoscape.js는 도표를 잘 보여주는 것을 가리킨다
javascript의 라이브러리입니다.

cytoscape.js

표시할 차트 데모

npm 설치 후 import도 사용할 수 없습니다!?

이번 도표는cytoscape입니다.저는 js의 cose-bilkent라는 레이아웃을 사용하고 싶어요.
나는 실현해 보았지만, 문서에 따라
이 문서
https://github.com/cytoscape/cytoscape.js-cose-bilkent
hoge.component.ts

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없어!!!
인터넷을 발견한 신이 남긴 기사를 조사하기가 또 어려워졌다!
npmmodule에 typescript의 형식 정의가 없을 때 먼저 구축을 통해
이거, 이거, 이거!생각하면서 보면...
tsconfig.json에 추가 설정 (*'ω´)

1src/@types 디렉터리 만들기

2..d.ts를 1 폴더에 배치

이런 일φ(￣ー￣)
즉시 src 산하에서 @types 폴더,cytoscape-cose-bilkent를 만듭니다.d.ts 파일 제작!
안에 이런 느낌이에요.
src/@types/cytoscape-cose-bilkent.d.ts

declare module 'cytoscape-cose-bilkent';

그리고tsconfig には typeRoots というプロパティがあり、これは型定義を探し始める root のディレクトリを決めるオプションです。デフォルトが @types になっているので、 自分の typescriptプロジェクト内に @types を追加することで自動的に .d.ts を探しにいってくれます그래서 이것도 설치(☝︎ ՞ਊ ՞)☝︎
이 간신히 구축을 통해 이상적인 도표를 실현했다!

총결산

앞으로도 마주칠 @types 문제없는 비망록으로 남겼다.
비록 졸렬한 보도지만, 무슨 지적과 다른 방법이 있겠는가!하면, 만약, 만약...
메모 남겨주세요!
앞으로도 비망록,ionic,Angular 보도를 중심으로 프론트 엔지니어 업계의 밤순을 목표로 노력할 예정이다.