Anyenv(nodeenv)でTypeScriptを動かす

2021年11月28日

TypeScriptをインストールする

noricgeographic@MacBook-Air ~ % node -v
v14.17.1

noricgeographic@MacBook-Air ~ % npm i -g typescript
/Users/noricgeographic/.anyenv/envs/nodenv/versions/14.17.1/bin/tsc -> /Users/noricgeographic/.anyenv/envs/nodenv/versions/14.17.1/lib/node_modules/typescript/bin/tsc
/Users/noricgeographic/.anyenv/envs/nodenv/versions/14.17.1/bin/tsserver -> /Users/noricgeographic/.anyenv/envs/nodenv/versions/14.17.1/lib/node_modules/typescript/bin/tsserver
+ typescript@4.5.2
added 1 package from 1 contributor in 1.361s

noricgeographic@MacBook-Air tsc-sample % tsc -v
Version 4.5.2

anyenvを使っている場合、tsc -v でtscコマンドが見つかりませんと出てくる可能性があります。

その時は、次のようにします。

noricgeographic@MacBook-Air tsc-sample % ls /Users/noricgeographic/.anyenv/envs/nodenv/shims
node	npm	npx
noricgeographic@MacBook-Air tsc-sample % nodenv rehash
noricgeographic@MacBook-Air tsc-sample % ls /Users/noricgeographic/.anyenv/envs/nodenv/shims
node		npm		npx		tsc		tsserver

~/.anyenv/envs/nodenv/shimsにtscがないと思います。
このディレクトリにパスが通ってるので、tscがないとコマンド実行できないのです。
そこで、nodenv rehash コマンドを叩くと、tscが出てくると思います。
それによってtscコマンドが使えるはずです。

TypeScriptを書く

適当なディレクトリを作り、Type Scriptを書き始める準備をします。

noricgeographic@MacBook-Air myapp % mkdir tsc-sample
noricgeographic@MacBook-Air myapp % cd tsc-sample 
noricgeographic@MacBook-Air tsc-sample % tsc --init

Created a new tsconfig.json with:                                               
                                                                             TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig.json
noricgeographic@MacBook-Air tsc-sample % ls
tsconfig.json

tsc --init により、tsconfig.jsonが作成されました。
このファイルに、TypeScriptに関する様々な設定が記述されています。

では、さっそく簡単なコードを書いてみましょう。

noricgeographic@MacBook-Air tsc-sample % vi sample.ts 
let message: string = "Hello World!"
console.log(message)

ファイル名は何でもいいのですが、拡張子は.tsとします。

TypeScriptをJavaScriptに変換する

.tsのままでは実行できませんので、.jsに変換します。

noricgeographic@MacBook-Air tsc-sample % tsc
noricgeographic@MacBook-Air tsc-sample % ls
sample.js	sample.ts	tsconfig.json
noricgeographic@MacBook-Air tsc-sample % cat sample.js 
"use strict";
let message = "Hello World!";
console.log(message);

tscコマンドにより、.tsから.jsが作成されています。
中身は型宣言のところがなくなっていますね。

JavaScriptを実行する

noricgeographic@MacBook-Air tsc-sample % node sample 
Hello World!

nodeコマンドにより実行することができます。

本記事は以上です。
tsc --initで初期化して、.tsファイルを書いて、tscコマンドでトランスパイルするという流れが掴めればOKです。