実行できるTypeScriptドキュメント: TypeScriptとは

Q: TypeScriptとは簡単に言うと何ですか？

TypeScriptは、型注釈を付けられるJavaScriptです。let count: number = 0 と書くと、コンパイラーは count が数値としてしか使われていないかをチェックします。そのあとコンパイラーは注釈を取り除いて普通のJavaScriptを出力するので、JavaScriptが動く場所ならどこでもその結果を実行できます。

TypeScriptとは、静的な型を持つJavaScriptです。変数、引数、戻り値に型注釈を付けると、TypeScriptのコンパイラーがプログラムの実行前にそれをチェックし、型を取り除いた普通のJavaScriptを出力します。そのJavaScriptはブラウザー、Node.js、Deno、Bunなど、JavaScriptが動く場所ならどこでも動きます。このページはTypeScript入門の最初の一歩として、仕組みと主な特徴をサンプルコードで解説します。

小さなTypeScriptのプログラムです。Run を押してください。

interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

出力:

Ada is 36 years old
82.33333333333333

コロンのあとの部分（: string、: User、: number[]）と interface を除けば、これはJavaScriptです。これらの追加部分は、それぞれの値が何であってよいかをコンパイラーに伝えます。total には注釈がないことに注目してください。TypeScriptは、それが数値であることを自分で判断します。TypeScriptのコードの多くは関数の境界に注釈を付け、残りはコンパイラーの推論に任せます。

型チェッカーが見つけるもの

注釈を付ける目的は、ミスがユーザーの手元で起きるのではなく、コードを書いている間に見つかるようにすることです。このブロックを実行して出力を読んでみてください。

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

プログラムは始まりません。代わりにコンパイラーが2つのエラーを表示します。

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

どちらのエラーにも、ファイル名、行と列、エラーコード（TS2322）、そして何が間違っているかが書かれています。1つ目の Type 'string' is not assignable to type 'number'. は「string型をnumber型に代入できない」、2つ目は User に必須の age が足りないという意味です。普通のJavaScriptなら両方の行が実行され、2行目は何の警告もなく Linus is undefined years old と表示します。VS Codeなどのエディターでは、同じエラーが入力中に赤い波線として表示され、user にはちょうど name と age があると知っている補完も使えます。

型チェッカーが見つける典型的なバグ:

プロパティ名やメソッド名のスペルミス（user.nmae、list.lenght）。
関数に渡す引数が少なすぎる、多すぎる、または型が違う。
null や undefined かもしれない値を、先にチェックせずに使う。
"loading" | "done" | "error" のようなユニオン型の1つのケースの処理漏れ（網羅性チェックを使っている場合）。
依存している関数のシグネチャが変わったときに壊れるコード。

型は実行時には消える

TypeScriptの型はコンパイル時にしか存在しません。コンパイラーは型をチェックしてから取り除きます。出力されるJavaScriptには注釈もインターフェースもなく、手で書いたJavaScriptとまったく同じように動きます。

この入力が:

function double(n: number): number {
    return n * 2;
}

この出力になります:

function double(n) {
    return n * 2;
}

そのため、TypeScriptはプログラムの実行中に届く値をチェックできません。次の例では、JSONのテキストが User だと主張しています。コンパイラーはその主張を信じるしかなく、実行時にも何も文句は出ません。

interface User {
    name: string;
    age: number;
}

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

出力:

string
thirty-six1

プログラムの外から来るデータ（APIのレスポンス、フォームの入力、ファイル）には、値を調べる型ガード関数のような実行時のチェックが必要です。そうすればTypeScriptはそのチェックを信頼し、型を絞り込んでくれます。

TypeScriptを作ったのは誰で、なぜ作られたのか

TypeScriptはMicrosoftで作られ、C#の設計者であるAnders Hejlsbergが設計を主導しました。2012年10月にバージョン0.8として公開され、2014年4月に1.0が続きました。Apache 2.0ライセンスのオープンソースで、GitHubで開発されています。GitHubの月間コントリビューター数の集計では、TypeScriptは2025年8月にPythonとJavaScriptを抜いて、GitHubで最も使われている言語になりました。

きっかけは大規模なJavaScriptのコードベースでした。JavaScriptには「この関数はユーザーのオブジェクトを受け取る」と書く方法がないので、プロパティ名を変えたり関数を変更したりするたびにコードベース全体を検索し、テストがすべての呼び出し元をカバーしていることを祈るしかありませんでした。TypeScriptは、JavaScriptとの完全な互換性を保ったままその情報を加えます。

スーパーセットである。 正しいJavaScriptはTypeScriptの構文としても正しいので、プロジェクトを1ファイルずつ移行できます。
JavaScriptに従う。 enum や namespace のような初期の追加機能を除いて、TypeScriptは独自の実行時機能を加えません。新しい構文はJavaScriptの標準から来ます。
型は実行時のコストがゼロ。 型は消去されるので、出力は手書きのJavaScriptと同じ速さです。

現在のメジャーバージョンはTypeScript 7です。そのコンパイラーはGoでネイティブプログラムとして書き直され、置き換えたJavaScript製のコンパイラーに比べて大規模なプロジェクトの型チェックがおよそ10倍速くなりました。何が変わったかはTypeScript 7のページで解説しています。

TypeScriptで何ができる？フロントエンドとバックエンド

TypeScriptは、JavaScriptと同じソフトウェアに、フロントエンドとバックエンドの両方で使われます。出力がJavaScriptなので、TypeScriptはJavaScriptが使えるところならどこでも使えます。

どこで	TypeScriptの動かし方
ブラウザーのフロントエンド	ビルドツール（Vite、webpack、esbuild）がJavaScriptにコンパイルします。React、Angular、Vue、Svelteはすべて対応しており、Angularのプロジェクトは標準でTypeScriptです。
Node.jsのサーバーとスクリプト	`tsc` でコンパイルして `.js` の出力を実行するか、`.ts` ファイルを直接実行します。現在のNode.jsは型を自分で取り除きます。
Deno	`.ts` ファイルを直接実行し、`deno check` で型チェックします。
Bun	`.ts` ファイルを型チェックなしで直接実行します。
デスクトップとモバイル	Electron、React Nativeなどのツールが TypeScript に対応しています。

Webアプリの両側を同じ言語で書けるので、多くのチームがサーバーとブラウザーのコードの間で型定義（たとえばAPIレスポンスの形）を共有しています。

TypeScriptのコードがJavaScriptになるまで

仕事は2つに分かれていて、それぞれ別のツールが担当します。

型チェック。 これを行うのはTypeScriptのコンパイラーだけで、ふつうは tsc コマンドとして使います（Denoの deno check は同じコンパイラーのコピーを実行します）。.ts ファイルを読み、エラーを報告し、標準では .js ファイルも書き出します。
型の除去。 tsc でもできますが、型チェックをまったく行わない、より速いツールでもできます。esbuild、SWC、Babel、そしてNode.js・Deno・Bunに組み込まれた型の除去です。

よくある構成は、速いツールでコードを実行し、エディターとCIでは tsc --noEmit（チェックだけで何も書き出さない）を使うものです。tsc のインストールと .ts ファイルの実行には、この章にそれぞれ専用のページがあります。

主な特徴を1つの例で

日々のTypeScriptで使う機能は多くありません。このブロックに主なものをまとめました。

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

出力:

Ada ada@example.com
Ada can log in
Linus is banned

型注釈（name: string）は、変数、引数、プロパティ、戻り値が何を持つかを示します。
型推論 は省略した型を埋めます。account の型は first が返すものから決まります。
インターフェースと型エイリアス（interface Account、type Status）は、データの形に名前を付けます。
ユニオン型（"active" | "banned"、T | undefined）は、いくつかのうちのどれかである値を表します。
型の絞り込み: account !== undefined のようなチェックのあと、コンパイラーはブロックの中でどのケースに当てはまるかを知っています。
省略可能なプロパティ（email?: string）はなくてもよいので、その型には undefined が含まれます。
ジェネリクス（first<T>）を使うと、1つの関数や型で多くの型を扱いつつ、型どうしのつながりを保てます。Account の配列を渡せば Account が返ります。

先にJavaScriptを学ぶ必要はある？

知っていると役に立ちますが、両方を同時に学ぶこともできます。TypeScriptのコードが実行時にどう動くか（変数、関数、オブジェクト、配列、Promise、クラス）はすべてJavaScriptで、TypeScriptはそうした値を表すレイヤーを加えます。すでにJavaScriptを知っているなら、新しく学ぶのは型システム、つまり型注釈、インターフェース、ユニオン型、ジェネリクス、型の絞り込みです。どちらも初めてなら、JavaScriptの値と関数の基本から始めて、進みながら型を加えていきましょう。コンパイラーのエラーメッセージは、値の使い方が間違っているまさにその行を指してくれるので、よい先生になります。

TypeScript入門の実践的な順番: インストールして最初のファイルを実行し、基本の型とオブジェクトの型を学び、次にユニオン型と型の絞り込み、そのあと関数とジェネリクスに進みます。これでアプリケーションのコードの大部分をカバーできます。

よくある質問

TypeScriptとは簡単に言うと何ですか？

TypeScriptは、型注釈を付けられるJavaScriptです。let count: number = 0 と書くと、コンパイラーは count が数値としてしか使われていないかをチェックします。そのあとコンパイラーは注釈を取り除いて普通のJavaScriptを出力するので、JavaScriptが動く場所ならどこでもその結果を実行できます。

TypeScriptはフロントエンドとバックエンドのどちらですか？

両方です。TypeScriptはJavaScriptにコンパイルされるので、JavaScriptが使えるところならどこでも使えます。ブラウザーのフロントエンド（React、Angular、Vue、Svelte）、Node.js・Deno・Bunのサーバー、コマンドラインツール、Electronで作るデスクトップアプリなどです。型チェックはどこでも同じように働きます。

TypeScriptはプログラミング言語ですか、フレームワークですか？

プログラミング言語です。JavaScriptのスーパーセットで、JavaScriptのプログラムはすべてTypeScriptの構文としても正しく、その上にTypeScriptが型システムを加えます。フレームワークやライブラリではありません。型注釈はコンパイル時に取り除かれ、プログラムにコードを一切追加しません。

TypeScriptを作ったのは誰ですか？

Microsoftです。C#の設計者でもあるAnders Hejlsbergが設計を主導しました。TypeScriptは2012年10月にバージョン0.8として公開され、Apache 2.0ライセンスのオープンソースです。

TypeScriptは実行時に型をチェックしますか？

しません。型チェックはすべてコンパイル時に行われ、型はJavaScriptの出力から消去されます。プログラムの外から来るデータ（APIのレスポンス、フォーム、JSONファイル）の形が間違っていても、TypeScriptは実行中に気づけません。そうしたデータは型ガードのような実行時のコードで検証してください。