TechBlog masa

  • Top
  • Posts
  • Profile
2025-01-30
SWE
TypeScriptの開発環境と実行TypeScriptの開発環境と実行
TS / NodeJS

likes: 0

Unsupported Block: table_of_contents
Unsupported Block: heading_2

typescriptの実行には、.tsファイルを.jsファイルに変換するコンパイラが必要なのでインストール。

npm i -D typescript @types/node

さらに、その他開発用パッケージもインストール。

npm i -D tsx prettier eslint jest ts-jest @types/jest

 

※ ここでは、グローバルインストール(-g)ではなくローカルインストールしている。基本はローカルインストールをお勧め。

 

Unsupported Block: heading_2
npx tsc --init

 

Unsupported Block: heading_2

 

Unsupported Block: heading_2

 

Unsupported Block: heading_2

 

 

 

Unsupported Block: heading_2

tsxまたはts-nodeを使えば.tsファイルを直接実行できる。

npx tsx <filename>
Unsupported Block: heading_2

.tsファイルをコンパイルすることで.jsファイルが生成される。

npx tsc <filename>

※ npxは、npmでインストールしたパッケージを実行するツール。node package executer。

実行するのは.tsファイルではなく.jsファイル。

node <filename>

 

 

 

Unsupported Block: heading_2

エイリアス(省略コマンド)を作成することで作業効率up

# .zshrcファイルなどをvimやviで開く
vim ~/.zshrc

# .zshrcに以下を追記して保存(vimなどの操作は省略)
alias ntx='npx tsx'

# sourceするのを忘れずに
source ~/.zshrc

 

実際にエイリアスを使ってみて、.jsファイルが生成されずに.tsファイルが実行されたらOK。

# コンパイルしたいtsファイルがあるディレクトリで、
ntx <filename>

 

breadcrumb予定地
profileCard予定地

SideBarPage

共有ボタン予定地
他ボタン予定地