概要
今までJavaScriptは多少触ってきましたが、近年のTypeScriptの勢いを見て、そろそろ触らないといけないなぁ、と思ったエンジニアの備忘録です。
注意: 本記事は2026年3月25日時点の最新バージョンをベースに更新しています。
目的
何事もまずは動かしてみる、の精神で、まずは最低限TypeScriptが実行できる環境をvscode上で整え、簡単なコードを実行するまでを目的とします。
想定読者
・JavaScriptを触ったことがあり、TypeScriptはなんとなく聞いたことがあるがよくわからない方
・コマンド実行に苦手意識が無い方
そもそもTypeScriptって何？
本題に入る前に、TypeScriptについて簡単に触れておきます。
TypeScriptは、Microsoftが開発したプログラミング言語で、一言でいうとJavaScriptに「型」を追加した言語です。
ブラウザやNode.jsはTypeScriptを直接実行できないため、一度JavaScriptに変換（トランスパイル）してから実行します。
（※ただし後述の通り、Node.js v24以降ではTypeScriptを直接実行できるようになりました！）
みんな使ってるの？
「TypeScript気になるけど、マイナーな言語だったら学んでも…」と思う方もいるかもしれません。ご安心ください。
TypeScriptはGitHub上で最も使われている言語の一つで、React、Vue、Angular、Next.js等の主要フレームワークもTypeScriptを公式サポートしています。
また、企業の採用も年々増えており、新規プロジェクトでは「TypeScriptがデフォルト」という現場も珍しくありません。
学んで損はない、というよりも、今後のフロントエンド・バックエンド開発ではほぼ必須と言っていい存在です。
学習コストは高い？
これもよくある心配ですが、結論から言うとJavaScriptを触ったことがあるなら、学習コストはかなり低いです。
TypeScriptはJavaScriptの完全なスーパーセットです。つまり、既存のJavaScriptコードはそのままTypeScriptとして動きます。
「全部書き直さないといけないの？」ということはなく、.jsファイルを.tsに変えて、少しずつ型を足していく、という段階的な導入が可能です。
// これは有効なJavaScriptであり、同時に有効なTypeScriptでもある
const greeting = "Hello, World!"
console.log(greeting)
極端な話、型を一切書かなくてもTypeScriptとして動きます。まずは動かしてみて、慣れてきたら型を足していく、というアプローチで全く問題ありません。
TypeScriptを使うと具体的に何が嬉しいの？
先ほど「型チェックでバグを防げる」「補完が賢くなる」と書きましたが、もう少し具体的にイメージしてもらうと：
1. エディタの補完が劇的に賢くなる
例えば、ある関数の戻り値に.を打った瞬間、「この値にはこのメソッドとこのプロパティが使えますよ」と正確に候補を出してくれます。
JavaScriptだと「えーと、この変数って何が入ってるんだっけ…」とドキュメントやソースコードを見に行く必要がありましたが、TypeScriptではエディタが全部教えてくれます。
2. 「この関数、何を渡せばいいの？」が一目でわかる
チーム開発で他の人が書いた関数を使うとき、JavaScriptだと引数に何を渡せばいいのかソースコードやコメントを読まないとわからないことがあります。
TypeScriptなら型定義を見れば一発です。これはドキュメントの代わりにもなります。
3. リファクタリングが安心してできる
変数名や関数名を変更したいとき、TypeScriptなら影響範囲をコンパイラが全て教えてくれるので、「変更したけどどこか壊れてないかな…」という不安がなくなります。
最新トピック：TypeScript 6.0とGoへの移行
2026年3月23日にリリースされたTypeScript 6.0は、現行のJavaScriptベースのコードベースとしては最後のリリースです。
次のTypeScript 7.0では、コンパイラと言語サービスがGoで書き直され、最大10倍の高速化が見込まれています。
本記事ではTypeScript 6.0を使って進めますが、今後7.0がリリースされた際には使い方が変わる可能性があります。
JavaScriptとの違い
JavaScriptでは変数にどんな値でも入れられてしまいます。
// JavaScript
let message = "Hello"
message = 123 // エラーにならない！文字列だったのに数値を代入できてしまう
TypeScriptでは「この変数には文字列しか入れない」と宣言できるので、意図しない代入をコンパイル時に検出できます。
// TypeScript
let message: string = "Hello"
message = 123 // コンパイルエラー！ 型 'number' を型 'string' に割り当てることはできません
こうした型のチェックにより、実行する前にバグを発見できるのがTypeScriptの大きなメリットです。
他にも、エディタの補完が賢くなったり、コードの意図が明確になることでチーム開発がしやすくなる等のメリットがあります。
全体の流れ
環境構築
・Node.js、npmインストール
↓
JSONファイルの作成
├package.json
└tsconfig.json
↓
サンプルコード作成
↓
実行（3つの方法）
├従来のトランスパイル → 実行
├tsxを使ったワンコマンド実行
└Node.jsネイティブTypeScript実行
↓
デバッグ
└ブレイクポイントの設定
↓
ESLint設定
↓
TypeScriptの型についてもう少し詳しく
↓
感想
環境
・Windows 11
・Visual Studio Code(以下、「vscode」)
・Node.js v24.14.0 (LTS)
・Node Package Manager(以下、npm) 11.9.0
・TypeScript 6.0
環境構築
Node.jsのインストール
何はともあれ、まずはNode.jsをインストールします。
これがないと始まりません。
下記公式サイトからLTS版（v24.14.0）をダウンロードして、インストーラーに従って進めていきます。
最後に正常にインストールが完了したか、下記コマンドで確認します。
※npmはNode.jsインストーラーに同梱されています。
> node -v
v24.14.0
> npm -v
11.9.0
TypeScriptのインストール
無事npmがインストールされたので、下記コマンドを実行し、TypeScriptをプロジェクトローカルにインストールします。
> npm init -y
> npm install -D typescript
> npx tsc -v
Version 6.0.0
補足：グローバルインストール vs ローカルインストール
npm install -g typescriptでグローバルにインストールすることもできますが、
プロジェクトローカルにインストールする方が一般的です。ローカルインストールのメリットは以下の通りです。
・プロジェクトごとにTypeScriptのバージョンを変えられる
・チームメンバー全員が同じバージョンを使える（package.jsonで管理されるため）
・npx tscでローカルのTypeScriptコンパイラを実行できる
JSONファイルの作成
続いてTypeScriptを実行するために必要な設定ファイルを作成します。
package.jsonは先ほど npm init -y で作成済みなので、tsconfig.jsonを作成します。
// 「tsconfig.json」TypeScript 用のビルド設定ファイル
> npx tsc --init
生成された「tsconfig.jsonファイル」に下記を追記します。
// Visual Studio Codeのデバッガに必要
"sourceMap": true,
// コンパイラがトランスパイルしたファイルの保存場所
// デフォルトはプロジェクトのルートフォルダだが、ビルドファイルでいっぱいになるのを避けるため、別フォルダを指定
"outDir": "./build"
補足：strictモードについて
tsc --initで生成されるtsconfig.jsonには"strict": trueがデフォルトで含まれています。
これはTypeScriptの型チェックを厳しくするオプションで、以下のような設定がまとめて有効になります。・
strictNullChecks— nullやundefinedを厳密にチェック
・noImplicitAny— 型推論できない場合にany型を暗黙的に使うことを禁止
・strictFunctionTypes— 関数の引数の型チェックを厳しくする
等最初は厳しく感じるかもしれませんが、バグの早期発見に繋がるのでオンのままにしておくことをお勧めします。
サンプルコード作成
今回は、下記のサンプルコードを実行してみようと思います。
const message: string = "Hello, World!"
console.log(message)
実行
TypeScriptを実行する方法は複数あります。ここでは3つの方法を紹介します。
方法1：従来のトランスパイル → 実行
トランスパイル
下記コマンドで、プロジェクト内の全てのTypeScriptファイルがJavaScriptにトランスパイルされます。
> npx tsc -p .
-p .がカレントディレクトリにあるtsconfig.jsonファイルを使用するようコンパイラに指示する役割を果たします。
トランスパイルされた結果(出力ファイル: index.js、index.js.map)は、./buildディレクトリに配置されます。
実行
下記コマンドで、トランスパイルされたjsファイルを実行できます。
> node ./build/index.js
Hello, World!
方法2：tsxを使ったワンコマンド実行
「トランスパイル → 実行」の2ステップは開発中だと少し面倒ですよね。
tsx というツールを使うと、トランスパイルと実行を1コマンドでやってくれます。
> npm install -D tsx
> npx tsx index.ts
Hello, World!
内部的にはesbuildを使って高速にトランスパイルしてくれるので、開発時のちょっとした動作確認にとても便利です。
※あくまで開発時の実行用で、本番環境では通常通りトランスパイルしたJSファイルを実行します。
方法3：Node.jsネイティブTypeScript実行（おすすめ！）
Node.js v24.12.0以降では、TypeScriptの型ストリッピング（Type Stripping）機能がstableになりました。
これにより、追加ツールなしでNode.jsが直接TypeScriptファイルを実行できます。
> node index.ts
Hello, World!
たったこれだけです！Node.jsが型の記述部分を自動的に除去（ストリップ）してから実行してくれます。
ただし、いくつかの制約があります。
・enumやnamespaceなど、型の除去だけでは対応できない一部のTypeScript固有構文は使用できません（これらは「erasable」ではない構文と呼ばれます）
・tsconfig.jsonの設定は適用されません（outDir等は無視されます）
・型チェックは行われません（型チェックが必要な場合は別途 npx tsc --noEmit を実行します）
開発時のサクッとした動作確認には非常に便利で、今後はこの方法が主流になっていきそうです。
デバッグ
折角なので、vscode上でデバッグをしてみたいと思います。
vscodeサイドバーの「Run and Debug」→「create a launch.json file.」→「Node.js」とクリック。
すると、.vscodeフォルダ内に、「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」ファイルが作成されるので、このファイルにルールを記述できます。
※以前は「.eslintrc」系の設定ファイルが使われていましたが、ESLint v9.0.0で「flat config」が正式サポートされ、eslint.config.mjs 形式に変わりました。
では試しに怒られるコードを書いてみます。
しっかり仕事してくれていますね！
TypeScriptの型についてもう少し詳しく
せっかくTypeScriptの環境を整えたので、もう少しだけ型について触れておきます。
ここでは「こんなことができるんだ」という雰囲気を掴んでいただければ十分です。
プリミティブ型
JavaScriptでお馴染みの基本的な型です。
const name: string = "太郎"
const age: number = 25
const isActive: boolean = true
型推論
実は、TypeScriptは賢いので全ての変数に型を書く必要はありません。
代入する値から型を自動的に推論してくれます。
// 型を明示的に書いた場合
const message: string = "Hello"
// 型推論に任せた場合（"Hello"からstring型だと推論してくれる）
const message = "Hello"
// どちらも同じ結果になります。
// 推論で明らかな場合は省略した方がスッキリ書けます。
ただし、関数の引数など推論が効かない箇所では明示的に型を書く必要があります。
配列
配列の型は2通りの書き方があります。
const numbers: number[] = [1, 2, 3]
const names: Array<string> = ["太郎", "花子", "次郎"]
// どちらも同じ意味です。number[] の方がよく使われます。
オブジェクトの型定義（interface / type）
オブジェクトの形を定義するには interface か type を使います。
// interfaceで定義
interface User {
name: string
age: number
email?: string // 「?」をつけると省略可能（オプショナル）になる
}
// typeで定義（同じことができる）
type Product = {
id: number
name: string
price: number
}
// 使い方
const user: User = {
name: "太郎",
age: 25
// emailは省略可能なので書かなくてもOK
}
const product: Product = {
id: 1,
name: "TypeScript入門書",
price: 3000
}
interface と type はほぼ同じことができますが、一般的にはオブジェクトの形を定義する場合は interface、それ以外（ユニオン型など）は type を使うことが多いです。
関数の型
関数の引数と戻り値にも型を付けられます。
// 引数と戻り値に型を指定
function greet(name: string): string {
return `Hello, ${name}!`
}
// アロー関数の場合
const add = (a: number, b: number): number => {
return a + b
}
// 戻り値がない場合はvoid
function logMessage(message: string): void {
console.log(message)
}
ユニオン型
「この変数はstringかnumberのどちらかが入る」といった表現ができます。
// stringまたはnumberを受け取れる
let id: string | number
id = "abc" // OK
id = 123 // OK
id = true // コンパイルエラー！
ジェネリクス
型を引数のように受け取る仕組みです。
いきなり理解するのは難しいかもしれませんが、「こんなものがあるんだな」程度で大丈夫です。
// T は型の引数。呼び出し時に具体的な型が決まる
function getFirst<T>(items: T[]): T {
return items[0]
}
// number型の配列を渡すと、戻り値もnumber型になる
const firstNumber = getFirst([1, 2, 3]) // number型
const firstName = getFirst(["太郎", "花子"]) // string型
ここまでのまとめ
型の世界は奥が深いですが、まずは以下を押さえておけば十分です。
・変数、関数の引数・戻り値に型を付けられる
・型推論が効く場所では省略してOK
・interface / type でオブジェクトの形を定義できる
・困ったら公式ドキュメント（ https://www.typescriptlang.org/docs/handbook/ ）を見る
まとめ
触り始める前は、「トランスパイル」を実行しないといけないのは面倒くさそうだなぁ、と思ってたのですが、環境構築も詰まることなく、vscodeでのデバッグ設定もかなり簡単でした。
しかも、Node.js v24以降ではTypeScriptをネイティブ実行できるようになったので、ちょっとした動作確認なら node index.ts だけで済んでしまいます。
TypeScript 7.0ではGoベースのネイティブコンパイラで10倍速くなるという話もあり、TypeScriptの開発体験は今後ますます良くなっていきそうです。
今後、ちょっとしたJavaScriptのコードを書く際は、一旦TypeScriptで書くようにしてみても良いかなと思いました。
参考サイト