初書：2021/05/24
mac : 11.2.3
vscode : 1.56.2

前書き

typescriptを触っている時に色々と小物を見つけたのでメモ。
随時追加する可能性あり。

import exportの関係を可視化する

ファイル数が大きくなると複雑になってくるimportとexportの連携を図で見れるようにする。

今回は「Madge」というライブラリを使用する。

madge - npm

インストール

madge本体と、図示化するためにgraphvizをインストールする

% npm -g install madge
% brew install graphviz

madgeのページにはbrew install graphviz || port install graphvizと書いているのだが、portコマンドらしきものはないので一旦無しでやる。

Error: Permission denied @ apply2files - /usr/local/lib/node_modules/npm/node_modules/.bin/is-ci
なぜかパーミッションエラー。でもインストールは完了しているらしい。よく分からん。（詳しい人教えてください）

画像生成

インストールが完了したら、基準となるtsファイル（例としてmain.ts）の相対座標をメモし、以下を実行

% madge --image dependencies.svg main.ts

dependencies.svgのファイル名は任意。出力先。main.tsが基準となるファイル。
dependencies.svgができたら、ブラウザ等で開くと表示される。

非常に簡単でみやすい。ありがたい。

参考サイト：

JSの依存関係を視覚化できる「Madge」が便利すぎる - GOOTA TECH

tsファイルをとりあえず実行する

デバッグとか。テストとか。わざわざコンパイルして動かしたくないけど動作確認したい時に使う用。

インストール

% npm install --save--dev ts-node

--save--devはnodejsで使ってるので。

実行

% npx ts-node main.ts

main.tsは実行したいファイル。

参考サイト：

tscコマンドを使わずに.tsファイルを実行する - Qiita