TypeScriptを初めて触ってみた

概要

今までJavaScriptは多少触ってきましたが、近年のTypeScriptの勢いを見て、そろそろ触らないといけないなぁ、と思ったエンジニアの備忘録です。

目的

何事もまずは動かしてみる、の精神で、まずは最低限TypeScriptが実行できる環境をvscode上で整え、簡単なコードを実行するまでを目的とします。

想定読者

・JavaScriptを触ったことがあり、TypeScriptはなんとなく聞いたことがあるがよくわからない方
・コマンド実行に苦手意識が無い方

全体の流れ

環境構築
・Node.js、npmインストール
↓
JSONファイルの作成
├package.json
└tsconfig.json
↓
サンプルコード作成
↓
実行
↓
デバッグ
└ブレイクポイントの設定
↓
ESLint設定
↓
感想

環境

・Windows 11
・Visual Studio Code(以下、「vscode」)
・Node.js v20.16.00
・Node Package Manager(以下、npm) 10.8.2

環境構築

Node.jsのインストール

何はともあれ、まずはNode.jsをインストールします。
これがないと始まりません。
下記公式サイトからダウンロード(v20.16.00)して、インストーラーに従って進めていきます。

最後に正常にインストールが完了したか、下記コマンドで確認します。
※npmはNode.jsインストーラーに同梱されています。

> node -v
v20.16.0

> npm -v
10.8.1

npmの最新バージョンは10.8.2なので、下記コマンドでアップデートしておきます。

> npm install -g npm@10.8.2
> npm -v
10.8.2

TypeSriptのインストール

無事npmがインストールされたので、下記コマンドを実行し、TypeScriptをインストールし、結果を確認します。

> npm install -g typescript
> tsc -v
Version 5.5.4

JSONファイルの作成

環境構築が完了したので、続いてTypeScriptを実行するために必要な下記2つのJSONファイルを作成していきます。

// 「package.json」プロジェクトのパッケージ依存関係やビルドスクリプトのためのファイル
> npm init -y

// 「tsconfig.json」TypeScript 用のビルド設定ファイル
> tsc --init

生成された「tsconfig.jsonファイル」に下記を追記します。

tsconfig.json

// Visuao Studio Codeコンパイラに必要
"sourceMap": true,

// コンパイラがトランスパイルしたファイルの保存場所
// デフォルトはプロジェクトのルートフォルダだが、ビルドファイルでいっぱいになるのを避けるため、別フォルダを指定
"outDir": "./build"

サンプルコード作成

今回は、下記のサンプルコードを実行してみようと思います。

index.ts

const message: string = "Hello, World!"
console.log(message)

実行

トランスパイル

下記コマンドで、プロジェクト内の全てのTypeScriptファイルがJavaScriptにトランスパイルされます。

> tsc -p .

-p .がカレントディレクトリにあるtsconfig.jsonファイルを使用するようコンパイラに指示する役割を果たします。
トランスパイルされた結果(出力ファイル: index.js、index.js.map)は、./buildディレクトリに配置されます。

実行

下記コマンドで、トランスパイルされたjsファイルを実行できます。

> node ./build/index.js
Hello, World!

デバッグ

折角なので、vscode上でデバッグをしてみたいと思います。

vscodeサイドバーの「Run and Debug」→「create a launch.json file.」→「Node.js」とクリック。

すると、.vscodeフォルダ内に、「launch.json」ファイルが作成されるので、下記のように変更します。

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],

            // 今回は変更しませんが、vscodeでデバッグボタン押下時に実行するtsファイルを指定します。
            "program": "${workspaceFolder}\\index.ts",

            // アプリケーションを起動する前に実行するvscodeのビルドタスクの名前を指定します。
            "preLaunchTask": "tsc: build - tsconfig.json",

            // トランスパイルによって生成されるjsファイルのパスを指定します。
            // "sourceMap": trueにより生成されたソースマップファイルを使用して、TypeScriptソースコードと生成されたJavaScriptコードのマッピングが行われます。
            // この仕組みによりTypeScriptのコードを直接デバッグできるようになります。
            "outFiles": [
                "${workspaceFolder}/build/**/*.js"
            ]
        }
    ]
}

上記設定が完了後、vscode上でブレークポイントを設定し、「F5」で実行すると、
下記画像のように、ブレークポイントを設定した行でプログラムが一時停止するので、使い慣れたいつものデバッグが可能です。

ESLint設定

折角なのでESLintも設定してみます。

ESLint拡張機能インストール

vscodeにESLint拡張機能をインストールします。

eslint.config.mjs作成

以下コマンドでプロジェクトのESLintを初期化します。

> npm init @eslint/config

いくつか質問されるので、以下のように回答しました。

√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · typescript
√ Where does your code run? · browser
√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · npm

すると、「eslint.config.mjs」ファイルが作成されるので、このファイルにルールを記述できます。
※以前は「esling.config」だったようですが、2024年5月に「ESLing version 9.0.0」がリリースされ、「flat config」が正式サポートされた影響で変わったようです。

では試しに怒られるコードを書いてみます。

しっかり仕事してくれていますね！

まとめ

触り始める前は、「トランスパイル」を実行しないといけないのは面倒くさそうだなぁ、と思ってたのですが、環境構築も詰まることなく、vscodeでのデバッグ設定もかなり簡単でした。
今後、ちょっとしたJavaScriptのコードを書く際は、一旦TypeScriptで書くようにしてみても良いかなと思いました。

参考サイト