【2026年版】TypeScriptの始め方 — 型安全なJavaScript開発の第一歩
- 型アノテーションの基本的な書き方
- TypeScript環境のセットアップ
- インターフェースと型エイリアスの違い
- JavaScriptとの違いと移行方法
セットアップ早見表
# TypeScriptのインストール
npm install -g typescript
# バージョン確認
tsc --version
# TypeScriptファイルをJavaScriptにコンパイル
tsc ファイル名.ts
# ts-nodeで直接実行（開発中に便利）
npm install -g ts-node
ts-node ファイル名.tsはじめてのコード
// 型アノテーション
const name: string = "ひよこ";
const age: number = 0;
const isStudent: boolean = true;
// インターフェース
interface User {
name: string;
age: number;
email?: string; // ? は省略可能を意味する
}
// 関数の型定義
function greet(user: User): string {
return `こんにちは、${user.name}さん！`;
}
// ジェネリクス
function identity<T>(arg: T): T {
return arg;
}よくある詰まりポイント
Q: any 型を使ってもいい？
→ any を使うと型チェックが無効になります。型不明の場合は unknown を使い、適切な型ガードを書くのがベストプラクティスです。
Q: .ts ファイルがブラウザで動かない
→ TypeScriptはそのままブラウザで動きません。tsc でJavaScriptにコンパイルするか、ViteやWebpackなどのバンドラーを使いましょう。
Q: tsconfig.json の設定が難しい
→ 最初は tsc --init で生成されたデフォルト設定で十分です。strict: true は有効にしておくと良いでしょう。
ひよこ TypeScriptってよく聞くけど、JavaScriptとどう違うの？わざわざ使う意味あるの？
ペンギン先生 一番の違いは「型」があることだよ。たとえばJavaScriptだと変数に数値を入れたつもりが文字列だった…なんてバグが実行するまで分からないけど、TypeScriptならコードを書いてる時点でエディタが「ここ型が違うよ」って教えてくれるんだ。VSCodeの補完も劇的に賢くなるから、開発スピードも上がるよ
ひよこ へえ！じゃあまずどうやってインストールするの？
ペンギン先生 ペンギン先生 ひよこ tsconfig.jsonって何を設定するファイルなの？
ペンギン先生 コンパイルのルールを決めるファイルだよ。たとえば「strict」をtrueにすると厳密な型チェックが有効になるし、「target」でどのバージョンのJavaScriptに変換するか指定できる。最初は自動生成されたものをそのまま使って、慣れてきたら少しずつカスタマイズしていくのがいいね
ひよこ 基本的な型ってどんな種類があるの？
ペンギン先生 ひよこ interfaceとtype aliasっていうのも見かけるけど、何が違うの？
ペンギン先生 ひよこ ユニオン型って「AまたはB」ってこと？どんなときに便利なの？
ペンギン先生 たとえばAPIのレスポンスが成功と失敗で構造が違うとき、「type Result = Success または Error」のように書ける。TypeScriptはif文で分岐すると自動的に型を絞り込んでくれる「型ガード」という仕組みがあるから、分岐後は正しいプロパティだけが補完されるようになるよ。これが本当に便利なんだ
ひよこ ジェネリクスっていうのも難しそう…どういう意味なの？
ペンギン先生 ひよこ 既存のJavaScriptプロジェクトをTypeScriptに移行するのって大変そう…
ペンギン先生 ひよこ もっと上級者向けのテクニックってあるの？
ペンギン先生 ひよこ コンパイルが遅いって聞いたことあるけど、対策はあるの？
ペンギン先生 大規模プロジェクトだとtscが遅くなることはあるね。最近はesbuildやswcといった高速なトランスパイラで型チェックなしの変換だけ行い、型チェックは別途tscで走らせるのが主流だよ。Viteもこの方式を採用してる。TypeScript 5.8以降はコンパイラ自体もかなり高速化されてるから、まずは普通に使ってみて遅いと感じたら検討するくらいでいいね