【TypeScript】ローカルで.tsファイルを実行する

課題でTypeScriptで入出力結果をテストしたかったため、ローカルに実行環境を整備しました。
細かい設定や型定義までは追っていませんが、「.ts ファイルを作って実行できる」レベルまでは対応できたので、記録します。

一部、以下の記事を参考にさせていただきました。

TypeScriptでAtCoderをやってみよう!

細かいところまでは追えず、とりあえず入出力結果が確認できるところまでやりたかったのであくまでメモ書き程度で残します。

package.json の作成

C:\Users\xxxxxxxxx\nextjs-io-practice>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nextjs-io-practice)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\xxxxxxxxx\nextjs-io-practice\package.json:

{
  "name": "nextjs-io-practice",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}


Is this OK? (yes)

C:\Users\xxxxxxxxx\nextjs-io-practice>

対話形式で入力すると、カレントディレクトリに package.json が作成されます。すべてデフォルトで進めるなら npm init -y でもOKです。

tsconfig.json の作成

C:\Users\xxxxxxxxx\nextjs-io-practice>npx 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

C:\Users\xxxxxxxxx\nextjs-io-practice>

カレントディレクトリにTypeScript の設定ファイル tsconfig.json が生成されます。

tsconfig.json を一部編集

以下のオプションを編集（コメント解除・変更）しました：

{
  "incremental": true,
  "target": "esnext",
  "lib": ["esnext"],
  "outDir": "./dist"
}

上記変更が終わったら保存して閉じます。

Node.js 型定義の追加

C:\Users\xxxxxxxxx\nextjs-io-practice>npm i -D @types/node

added 2 packages, and audited 3 packages in 3s

found 0 vulnerabilities

C:\Users\xxxxxxxxx\nextjs-io-practice>

これにより、Node.js の標準ライブラリ（console, process, fs など）が型安全に使えるようになります。

ディレクトリ構成の準備

カレントディレクトリに手動で以下のフォルダを作成します。

./src      ← TypeScriptファイルを配置する場所
./dist     ← コンパイル後のJavaScriptを出力する場所

ts-node / typescript のグローバルインストール

C:\Users\xxxxxxxxx\nextjs-io-practice>npm install -g ts-node typescript

changed 20 packages in 8s

C:\Users\xxxxxxxxx\nextjs-io-practice>

※今回は手軽な確認用なのでグローバルに入れましたが、ローカルに入れる場合は -g を外してもOKです。

これで一旦.tsの実行環境が整備されました。

動作確認

1. ./src/sample.ts を作成し、以下のコードを記述：

sample.ts

const sampleFunction = (input: number[]): number[] => {
  let output: number[] = [];

  for(let i = 0; i < input.length; i++){
    output[i] = input[i] * 2;
  }

  return output;
}

console.log(sampleFunction([1, 2, 3]));

2. カレントディレクトリを src に移動し、以下を実行：

C:\Users\xxxxxxxxx\nextjs-io-practice\src>npx ts-node sample.ts

3. 出力結果

[ 2, 4, 6 ]

おわりに

このように設定しておくと、毎回ビルドせずに .ts ファイルをそのまま実行できて非常に快適です。
今後、標準入力を扱う場合や、競技プログラミング用に readline を使う方法なども試していきたいと思います。

以上です。