TypeScriptを実行する2つの方法【トランスパイル／tsx】

はじめに

初学者向けです。

今回はTypeScriptを実行するための方法として、

• JavaScriptにトランスパイルしてから実行
• tsx（もしくは ts-node）を使用して直接実行

の2種類を紹介します。

概要

• TypeScriptとは
• 実行する方法
  1. 【手作業】JavaScriptにトランスパイルしてから実行
  2. 【簡単】tsxを使用して直接実行

TypeScript とは

かなり簡単に説明するとTypeScriptはJavaScriptに型がついたことで安全な開発ができるようになった言語で、AltJSの一種です。

そしてTypeScriptはそのままの状態では実行できず、基本的にはJavaScriptに変換（トランスパイル）してから実行します。

実行する方法

1. 【手作業】JavaScriptにトランスパイルしてから実行

まずはJavaScriptにトランスパイルして実行する方法です。

実際に簡単な動作環境を構築していきます。

※動作環境の構築にはnode.jsが必要ですが、今回node.jsの導入方法については省略します。

最終的にはこんな感じのフォルダ構成となります。

typescript_transpile    // 作業フォルダ
├── dist                // 変換されたJSファイルの置き場
│   ├── index.js
│   └── index.js.map
├── node_modules
├── package-lock.json
├── package.json
├── tsconfig.json       // 変換する際の設定ファイル
└── src
    └── index.ts        // 変換対象のTSファイル

作業フォルダ typescript_transpile を作成し、

その中で npm initを実行（質問の回答は全てエンターでOK）

するとpackage.jsonが生成されます

package.json

{
  "name": "typescript_transpile",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
  },
  "repository": {
    "type": "git",
    "url": "no"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@types/node": "^22.5.2",
    "typescript": "^5.5.4"
  }
}

次のコマンドでTypeScriptのインストール

npm i -D typescript @types/node

package.jsonに以下が追加されます

package.json

"devDependencies": {
   "@types/node": "^22.5.2",
   "typescript": "^5.5.4"
}

tsconfig.json の作成

tsconfig.json はTypeScriptからJavaScriptに変換するための設定を記載します

tsconfig.json

{
  "compilerOptions": {
    "lib": ["ESNext"],
    "module": "CommonJS",
    "outDir": "dist", // 変換後のJSファイルの置き場
    "sourceMap": true,
    "strict": true,
    "target": "ES2015"
  },
  "include": ["src"] // TSC（TypeScript Compiler）が変換する対象となるソースのパス
}

実行するTypeScriptのファイルを作成

srcフォルダを作成し、その中にindex.tsを作成

中身はなんでもOK

index.ts

const message: string = "Transpile succeed!";
console.log(message);

そしたら変換されたJavaScriptを配置するフォルダdistを作成します

その後、package.jsonにTypeScriptのトランスパイルコマンドを追加します（直接実行してもOK）

package.json

  "scripts": {
    "tsc": "tsc"
  }

ターミナルからnpm run tscを実行すると

PS \typescript_transpile> npm run tsc

> typescript_basic@1.0.0 tsc
> tsc

PS \typescript_transpile>

無事に成功すると、distにindex.jsとindex.js.mapが作成されているはずです

index.js

"use strict";
const message = "Transpile succeed!";
console.log(message);
//# sourceMappingURL=index.js.map

JavaScriptに変換されています

index.js.map

{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"****,****,..."}

index.js.mapには変換対象となったTSファイルやマッピング情報が記載されています

そして最後に生成されたJavaScriptを実行して完了です

PS \typescript_transpile> node dist/index.js
Transpile succeed!
PS \typescript_transpile>

これがJavaScriptに変換してから実行する方法です。

2. 【簡単】tsxを使用して直接実行

いちいちJavaScriptに変換しなくても実行できる方法があり、それがtsx や ts-nodeを使用する方法です。

今回はtsxを紹介します。

tsxを使用するとTypeScriptをJavaScriptへ変換せずに実行することができ、ts-nodeよりも若干速くTypeScriptファイルを実行できます。

もちろん上記のツールも内部的にはJavaScriptに変換（ビルド）しているわけですが、そのビルドツールにesbuildというものを使用しているそうです。

※JavaScriptのビルドについて

まずはtsxをインストール

npm i -D tsx

package.jsonのスクリプトに実行コマンドを追加

package.json

  "scripts": {
    "tsx": "npx tsx src/index.ts"
  }

実行

PS \typescript_transpile> npm run tsx
Transpile succeed!
PS \typescript_transpile>

終わりです。簡単！

最後まで読んでいただきありがとうございました！

【参考記事】