【TypeScript】公式サイト typescriptlang.org の使い方｜Playground・ハンドブック・TSConfigリファレンス・ブログの活かし方

　TypeScriptを学ぶとき、本や解説記事と一緒に使っておきたいのが、公式サイトのtypescriptlang.orgです。TypeScriptを開発しているMicrosoftのチームが運営しているので、仕様や新しいバージョンの情報を確かめるときのよりどころになります。

このブログのTypeScriptの記事でも、コードの動作はこのサイトの Playground で確かめています。この記事では、typescriptlang.org の主なページと、初心者がどう使うと役に立つかをまとめます。

typescriptlang.org の主なページ
Playground：ブラウザですぐに試せる
Docs：最初に読むページとハンドブック
TSConfigリファレンス：設定の意味を調べる
Blog：新しいバージョンの変更点を知る
私の使い方
まとめ

typescriptlang.org の主なページ

ページ	できること	使う場面
Playground	ブラウザでTypeScriptを書いて、型のエラーや変換後のJavaScriptを確かめる	書き方を試す、解説記事のコードを動かす
Docs（ドキュメント）	入門ガイド、ハンドブック、リファレンス	基礎から体系的に学ぶ、仕様を調べる
TSConfig リファレンス	tsconfig.json の設定項目の説明	設定の意味を調べる
Blog（ブログ）	新しいバージョンの発表と変更点	バージョンアップの前に確かめる

画面やドキュメントは基本的に英語です。日本語に翻訳されたページもありますが、全部ではないので、英語のページをブラウザの翻訳機能で読むこともあります。コードの部分は翻訳されると崩れることがあるので、コードは元の英語のページで確かめるのが安心です。

Playground：ブラウザですぐに試せる

Playgroundは、インストールなしでTypeScriptを試せるページです。左側にコードを書くと、右側で次のようなものを確かめられます。

.JS：
JavaScriptに変換した結果。型の書き方が消えて、ただのJavaScriptになるのが分かる
Errors：
型のエラーの一覧
Logs：
「Run」で実行したときの console.log の結果

たとえば、次のコードを貼ってみます。

TypeScript

type Member = {
  id: number;
  nickname?: string; // ? が付いたプロパティは省略できる
};

function greet(member: Member): string {
  return `こんにちは、${member.nickname ?? "ゲスト"}さん`;
}

console.log(greet({ id: 1, nickname: "たろう" })); // こんにちは、たろうさん
console.log(greet({ id: 2 }));                     // こんにちは、ゲストさん
console.log(greet({ id: "3" }));                   // エラー：id に文字列は入れられない

type Member = {
  id: number;
  nickname?: string; // ? が付いたプロパティは省略できる
};

function greet(member: Member): string {
  return `こんにちは、${member.nickname ?? "ゲスト"}さん`;
}

console.log(greet({ id: 1, nickname: "たろう" })); // こんにちは、たろうさん
console.log(greet({ id: 2 }));                     // こんにちは、ゲストさん
console.log(greet({ id: "3" }));                   // エラー：id に文字列は入れられない

3つ目の行に赤い波線が引かれ、Errors に理由が表示されます。.JS を開くと、type Member や : Member といった型の部分が消えたJavaScriptが確かめられます。?? の動きは「??（Null合体演算子）と三項演算子の違い」で紹介しています。

Playgroundには、ほかにも次のような機能があります。

バージョンの切り替え：
画面上のメニューでTypeScriptのバージョンを選べるので、新しいバージョンで動きが変わるかを確かめられる
設定（TS Config）：
strict などの設定を切り替えて、エラーの出方の違いを試せる
URLでの共有：
書いたコードはURLに含まれるので、URLを送れば同じコードを人に見せられる

URLにコードが入るということは、URLを送った相手にはコードが全部見えるということです。仕事のコードや、パスワードなどは書かないようにしましょう。HTMLやCSSと一緒に動かしたいときは、「CodePen」のようなオンラインエディタが向いています。

Docs：最初に読むページとハンドブック

Docs（ドキュメント）には、大きく分けて次のようなページがあります。

Get Started：
経験に合わせた入門ガイド。「プログラミングが初めての人」「JavaScriptを書いたことがある人」「JavaやC#を書いたことがある人」などに分かれている
Handbook（ハンドブック）：
型の基本から、型の絞り込み、関数、オブジェクト、ジェネリクスなどを順に説明した、公式の教科書
Reference（リファレンス）：
Partial や Pick のような組み込みの型など、特定の機能を調べるためのページ

私のようにC言語など別の言語の経験がある場合は、Get Started の自分に近いガイドを読んでから、Handbook を頭から読むと全体がつかめます。Handbookは1章ずつが長めなので、本で基礎を学んだあと、分かりにくかったところを確かめるのに使うのもおすすめです。

TSConfigリファレンス：設定の意味を調べる

TypeScriptのプロジェクトでは、tsconfig.json にコンパイルの設定を書きます。たとえば次のようなファイルです。

JSON

{
  "compilerOptions": {
    "target": "ES2022",
    "strict": true,
    "outDir": "dist"
  }
}

{
  "compilerOptions": {
    "target": "ES2022",
    "strict": true,
    "outDir": "dist"
  }
}

解説記事の設定を写しただけだと、それぞれの項目が何をしているのか分からないままになりがちです。TSConfigリファレンスでは、項目ごとに意味と初期値、例が載っています。ページ内で「strict」のように項目名で検索すると、すぐにたどり着けます。

Blog：新しいバージョンの変更点を知る

公式サイトの「Blog」からは、TypeScriptチームのブログを開けます。新しいバージョンが出るたびに、追加された機能や変更点が、コード例つきで発表されます。

たとえば2026年7月には、コンパイラをGo言語で作り直した TypeScript 7.0 が公開されました。ビルドが大幅に速くなった一方で、それまで非推奨だった設定がエラーになるなど、古い設定のままだと影響が出る変更もあります。本や解説記事と手元の動きが違うときは、使っているバージョンを確かめて、ブログのそのバージョンの記事を見ると原因が分かることがあります。

自分のパソコンに入っているTypeScriptのバージョンは、次のコマンドで確かめられます（プロジェクトのフォルダで実行）。

Bash