📚

Cloud9(linux2023)をTypeScriptが実行できる環境にする

2024/05/19に公開

やること

Cloud9を、TypeScriptが実行できる環境にするセットアップ手順です。

用意したCloud9の情報です。

項目	設定値
プラットフォーム	Amazon Linux 2023
インスタンスタイプ	t3.small

パブリックサブネットに構築しました。

セットアップは簡単。以下のコマンドを実行するだけです。

nvm install node
nvm use node
npm install -g typescript

セットアップコマンド実行後の各モジュールのバージョンはこれでした。

$ npm --version
10.8.0
$ node --version
v22.2.0
$ tsc --version
Version 5.4.5

本当にTypeScriptのスクリプトが実行できるか確認します。
用意したサンプルスクリプトはこれです。

example.ts

// example.ts
let message: string = "Hello, TypeScript!";
console.log(message);

このexample.tsを実行するのですが、実行にはひと手間必要です。このtsファイルからjsファイルを作成しそのjsファイルを実行します。

では、ここから検証になります。まずは、TypeScriptプロジェクトを作成します。

mkdir my-typescript-project
cd my-typescript-project
tsc --init

my-typescript-project ディレクトリ配下にexample.tsファイルを格納します。するとファイル構成は以下のようになります。

$ pwd
/home/ec2-user/environment/my-typescript-project
$ ls
example.ts  tsconfig.json

TypeScriptファイルをJavaScriptにコンパイルします。

tsc example.ts

コンパイルすると example.js ファイルが作成されます。

$ ls
example.js  example.ts  tsconfig.json

作成されたjsファイルを実行します。

node example.js

以下が実行結果です。期待した通りに動いてくれました。

$ node example.js 
Hello, TypeScript!

コンパイルとjs実行を行うシェルスクリプト書いてみました。

exets.sh

#!/bin/bash

# TypeScriptファイルをコンパイル
tsc example.ts

# コンパイルされたJavaScriptファイルを実行
node example.js

以下はシェルを使ってスクリプトを実行したときの実行結果です。

$ ./exets.sh 
Hello, TypeScript!

ちょっと改良して、シェルスクリプト実行時に、tsファイル名を引数として渡せるようにしました。

exets.sh

#!/bin/bash

# 引数として渡されたファイル名を使用してTypeScriptファイルをコンパイル
tsc $1.ts

# コンパイルされたJavaScriptファイルを実行
node $1.js

echo "$1.tsがコンパイルされ、$1.jsが実行されました。"

改良版シェルスクリプトの実行結果です。

$ ./exets.sh example
Hello, TypeScript!
example.tsがコンパイルされ、example.jsが実行されました

TypeScriptファイルをJavaScriptにコンパイルしたときのjsファイルはこのようになっていました。

example.js

// example.ts
var message = "Hello, TypeScript!";
console.log(message);