5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【TS】Typescriptで役に立つかもしれない物たち

Posted at

初書: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

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?