LoginSignup
1
1

More than 1 year has passed since last update.

TypeScript環境構築

Posted at

Node.jsを入れる

公式サイト(https://nodejs.org) で推奨版を
ダウンロードするやり方もあるが、
node.jsはバージョンを切り替えることが割とあるので、
最初からバージョンマネージャーを入れてしまったほうが早い。

Node.jsバージョンマネージャーは色々あるが、
ここでは、nvmを使う。

公式サイト(https://github.com/nvm-sh/nvm) を見ると、
下記のコマンドでインストールできる模様。

terminal
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

インストールしただけだとPATHが通っていないので、
PATHも公式に従って通してみる

terminal
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

ちゃんとインストールされたか確認

terminal
nvm -v

インストールされたversionが返ってくれば問題なし。

早速、nvm経由でnode.jsをインストールしたいので、
まずはインストール可能なversionの一覧を見てみたい。

terminal
nvm ls-remote

Screenshot 2022-12-03 at 18.19.37.png

たくさん出てくる。
LTSと横に書いているやつは、
Long Term Supportの略なので、
メンテンスがしっかりしている。

なので、基本的にはこのLTS系を
インストールすることが望ましい。
(あえて不安定なversionでバグを見つけたりしたい人を除く)

とりあえず、LTSで一番最新の
v18.12.1をインストールしてみる。

terminal
nvm install v18.12.1

ちゃんとインストールできたか確認

terminal
nvm ls

Screenshot 2022-12-03 at 18.24.27.png

こんなふうに、
システムの上らへんに、
今インストールしたversionが出ていれば、
インストールされている。

ちなみに、->で指しているところが、
現在のNode.jsのversionになる。

terminal
node -v

を実行すると、同じversionになっているはずである。

使うversionを切り替えたいときは、

terminal
nvm use v18.12.1
nvm use system

のようにuseを使えばいい。

TypeScript導入

まずは、pacage.jsonを作ってしまおう。

terminal
npm init –yes

早速、TypeScriptをインストールしてみる。

terminal
npm install --save-dev typescript @types/node

※なぜかはわからないが、コピペしたやつをそのまま実行しても上手く行かないときがあるので、
その際は、直打ちして試してほしい。

TypeScriptがインストールできたら、
コンパイラに関する設定ファイルである、
tsconfig.jsonを作成したい。

terminal
npx tsc –init

tsconfig.jsonの設定の詳細はさておき、
一旦これでもうTypeScriptを動かすことはできる。

適当なTypeScriptのファイルを作ってみる

index.ts
const hello: string = "Hello world"
console.log(hello)

このファイルをコンパイルする

terminal
npx tsc

index.jsというファイルがあれば、
それがコンパイルされたファイルになるので、

terminal
node index.js

とすれば、Hello Worldと表示されるはず。

ちなみに、いきなりtsファイルを実行するには、
ts-nodeを使う。

terminal
npm install --save ts-node

インストールできたら、

terminal
 ./node_modules/.bin/ts-node index.ts

でHello Worldと表示される。

1
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
1
1