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

# はじめに

初学者向けです。

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

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

の2種類を紹介します。

# 概要

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


# TypeScript とは

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

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

# 実行する方法

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

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

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

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

<br />

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

```
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`というものを使用しているそうです。

https://zenn.dev/ryoka419319/articles/d0a474a81efdbb

※JavaScriptのビルドについて

https://blog.tyspine.com/why-build-javascript/

https://www.slideshare.net/slideshow/javascriptjs2016/58845577


まずは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>
```

終わりです。簡単！


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

<br />

## 【参考記事】

https://qiita.com/jonakp/items/da5988b783cb28c03192

https://qiita.com/ssssota/items/115a906e960bcfabb46b