---
title: TypeScript原理原則_完全ガイド_うさうさ研修工房
tags:  #typescript  
author: [Yukiko](https://image.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GE8DQ845ED.jpg?width=480
description: TypeScript原理原則_完全ガイド_うさうさ研修工房 by Yukiko
published: June 27, 26
canonical: https://image.docswell.com/s/yukiko_it/56NN18-2026-06-27-231713
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GE8DQ845ED.jpg)

TypeScript
TS
原理原則・公式仕様・ライブラリ完全ガイド
型理論
構造的部分型
公式仕様書
型推論エンジン
うさうさ研修工房 | うさうさ先生
Spec: TypeScript Language Specification | typescriptlang.org | GitHub: microsoft/TypeScript
エコシステム


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LELMXR637R.jpg)

TypeScript 公式設計目標（Design Goals）
G1 JavaScript のスーパーセット
全ての有効なJSコードは有効なTS。
既存資産を100%活用可能。
G2 静的型検査（オプション）
型アノテーションは任意。
段階的型付け（Gradual Typing）採用。
G4 大規模開発向けの言語
G5 型消去（Type Erasure）
モジュール・名前空間・クラスで
巨大コードベースを管理可能に。
実行時に型情報は消える。
ランタイムオーバーヘッドゼロ。
出典: microsoft/TypeScript — Design Goals (GitHub Wiki)
G3 最新JS機能のサポート
TC39 提案をいち早く実装。
ES2015〜最新まで対応。
G6 優れた開発者体験
LSP対応・IDEサポートが設計の中心。
補完・リファクタリング・エラー表示。


# Page. 3

![Page Image](https://bcdn.docswell.com/page/4JMYLR5MJW.jpg)

型理論の核心：構造的部分型（Structural Subtyping）
構造的型付け（Duck Typing）
「同じ形＝同じ型」
名前でなく構造で互換性を判定。
Javaのような nominal typing とは別物。
部分型関係
型Aが型Bのすべてのプロパティを
持つなら A は B のサブタイプ。
幅（width）・深さ（depth）の両方向で成立。
Excess Property Checks
オブジェクトリテラル直接代入時のみ
余分なプロパティを検出。
変数経由なら検査されない（設計上の意図）。
参考: TypeScript Handbook — Type Compatibility
// 構造的部分型の例
interface Point2D {
x: number; y: number;
}
interface Point3D {
x: number;
y: number;
z: number; // 余分なプロパティ
}
const p3: Point3D = {x:1, y:2, z:3};
//
OK: Point3D は Point2D のサブタイプ
const p2: Point2D = p3;
//
NG: オブジェクトリテラル直接代入
const p2b: Point2D = {x:1,y:2,z:3};
// → Object literal may only specify
//
known properties


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PJR9KR3L79.jpg)

型推論エンジンの仕組み（Type Inference）
① 変数初期化推論
② 関数戻り値推論
let x = 42;
// number
let s = "hello";
// string
let b = true;
// boolean
let arr = [1, 2, 3]; // number[]
function add(a: number, b: number) {
return a + b; // 戻り値: number
}
// → (a: number, b: number) => number
③ コンテキスト型推論
④ Best Common Type
const nums = [1, 2, 3];
nums.forEach(n => {
// n は自動的に number 型
console.log(n.toFixed(2));
});
出典: TypeScript Handbook — Type Inference
// 異なる型の配列→共通型を推定
let mixed = [1, "two", true];
// → (number | string | boolean)[]
let items = [new Dog(), new Cat()];
// → (Dog | Cat)[]


# Page. 5

![Page Image](https://bcdn.docswell.com/page/PEXQLR96JX.jpg)

型の合成：Union / Intersection / Conditional Types
Union Type ( A | B )
type ID = string | number;
type Result = "ok" | "error" | "pending";
最も多用される型合成。Discriminated
Union はTSのイディオム中のイディオム
。
// Discriminated Union（判別共用体）
type Shape =
| { kind: "circle"; radius: number }
| { kind: "rect";
w: number; h: number };
Intersection Type ( A & B )
type Admin = User & { permissions: string[] };
型を「掛け合わせる」。Mixin設計や
APIレスポンスの拡張に頻出。
// Mixin パターン
type Serializable = { serialize(): string };
type Printable = { print(): void };
type Document = Serializable & Printable;
Conditional Type ( T extends U
?X:Y)
// 標準ライブラリも多用
type NonNullable<T> = T extends null | undefined ? never : T;
type ReturnType<T> = T extends (...args: any) => infer R ? R : never;
TypeScript最大の特徴。型レベルのifthen-else。inferキーワードで型を「抽出
」する。
// 分配条件型（Distributive）
type ToArray<T> = T extends any ? T[] : never;
type Res = ToArray<string | number>; // string[] | number[]
出典: TypeScript Handbook — Unions, Intersections, Conditional Types


# Page. 6

![Page Image](https://bcdn.docswell.com/page/3EK9LRPGED.jpg)

Generics（ジェネリクス）詳解
Generics とは？
型パラメータ化
型を「変数」として扱う。
コードの再利用性を最大化。
制約（Constraints）
extends で型パラメータに
条件を追加できる。
デフォルト型
T = string のように
デフォルト値を設定可能。
複数型パラメータ
<K, V> のように複数指定。
MapやDictionaryで多用。
出典: TypeScript Handbook — Generics
// 基本的なジェネリック関数
function identity<T>(arg: T): T {
return arg;
}
// 制約付きジェネリクス
function getLength<T extends { length: number }>(
arg: T
): number {
return arg.length;
}
// ジェネリッククラス
class Stack<T> {
private items: T[] = [];
push(item: T): void { this.items.push(item); }
pop(): T | undefined { return this.items.pop(); }
}
// keyof 制約（プロパティアクセス安全化）
function getProperty<T, K extends keyof T>(
obj: T, key: K
): T[K] {
return obj[key];
}


# Page. 7

![Page Image](https://bcdn.docswell.com/page/L73W38X575.jpg)

組み込み Utility Types（標準ライブラリ）
Partial<T>
Required<T>
Readonly<T>
Pick<T, K>
全プロパティをOptionalに
全Optionalを必須に
全プロパティを読み取り専用に
指定プロパティのみ抽出
Partial<User>
が?
→
全フィールド
Required<Config>
→
?を除去
Readonly<Point>
→
代入不可
Pick<User, 'id'|'name'>
Omit<T, K>
Record<K, V>
Exclude<T, U>
Extract<T, U>
指定プロパティを除外
KeyとValueでオブジェクト型を構
築
Union型からUを除外
Union型のうちUに代入可能なもの
だけ
Omit<User, 'password'>
Record<string, number>
Exclude<'a'|'b'|'c', 'a'>
'b'|'c'
NonNullable<T>
ReturnType<T>
Parameters<T>
Awaited<T>
null / undefined を除外
関数の戻り値型を取得
関数の引数タプル型を取得
Promise の解決型を取得
ReturnType<typeof fetch>
Parameters<typeof
console.log>
Awaited<Promise<string>>
string
NonNullable<string|null>
string
→
出典: TypeScript Handbook — Utility Types | lib.es5.d.ts / lib.es2015.d.ts
→
Extract<string|number,
number> → number
→


# Page. 8

![Page Image](https://bcdn.docswell.com/page/87DK4M2YJG.jpg)

tsconfig.json 重要オプション解説
tsconfig.json — 推奨設定
{
strict: true
"compilerOptions": {
// 出力ターゲット
"target": "ES2022",
"module": "NodeNext",
"lib": ["ES2022", "DOM"],
7つの厳格チェックを一括有効化。
必ずONにすること。
target
// 厳格チェック（全部 ON）
"strict": true,
// noImplicitAny は strict: true に含まれる
// モジュール解決
"moduleResolution": "NodeNext",
"esModuleInterop": true,
// 出力先
"outDir": "./dist",
"rootDir": "./src",
"declaration": true,
"declarationMap": true,
"sourceMap": true,
設定の意味
コンパイル後のJS バージョン。
Node.js 18+ → ES2022推奨。
module
モジュール形式。
NodeNext でESM/CJS自動判別。
declaration: true
型定義ファイル(.d.ts)を生成。
ライブラリ公開時は必須。
sourceMap: true
// .d.ts生成
}
}
出典: TSConfig Reference — typescriptlang.org/tsconfig
デバッグ用マップを生成。
本番でもエラー追跡が容易に。
moduleResolution
NodeNext はpackage.json
exports フィールド対応。


# Page. 9

![Page Image](https://bcdn.docswell.com/page/VJPKMR12E8.jpg)

TypeScript エコシステム主要ライブラリ
フレームワーク
Next.js
バリデーション
Zod
React+TS公式推奨。App Router完全対応。
スキーマ定義から型を自動生成。z.infer<typeof
Schema>が強力。
NestJS
Yup
Node.js バックエンドフレームワーク。デコレータ多
用。
フォームバリデーション定番。Formikと組み合わせ
多い。
状態管理
Zustand
軽量でTS型安全。Reactとの相性○。
Redux Toolkit
RTKはTS前提設計。createSliceで型推論。
Angular
class-validator
TanStack Query
TSファースト設計の老舗フレームワーク。
デコレータベース。NestJSと相性抜群。
非同期状態管理。型安全なAPI通信。
テスト
ビルドツール
型定義
Vitest
ts-node / tsx
DefinitelyTyped
Vite連携・Jest互換。TS対応が最速。
TSファイルを直接実行（開発時）。
@types/xxx で型定義を追加。Github最大規模。
Jest + ts-jest
esbuild
type-fest
最も普及。設定は多いが安定。
超高速バンドラー。TSトランスパイルも爆速。
便利なユーティリティ型コレクション。
Playwright
swc
ts-toolbelt
E2EテストのデファクトスタンダードTS対応。
Rustで書かれた爆速TSコンパイラ。
型レベル操作の高度ライブラリ。


# Page. 10

![Page Image](https://bcdn.docswell.com/page/2EVV9RYXEQ.jpg)

型定義ファイル（.d.ts）と Declaration Merging
.d.ts ファイルとは
型情報のみを含む宣言ファイル。JSライブラリに型情報を後付けできる。コンパイル後のJSには含まれない（型消去）。
@types/* パッケージはDefinitelyTypedリポジトリで管理されOSSコミュニティが保守。
// math.d.ts（型定義ファイル）
declare module 'my-math' {
export function add(
a: number, b: number
): number;
export const PI: number;
export interface Vector {
x: number; y: number;
}
}
// global宣言の拡張
declare global {
interface Window {
myPlugin: Plugin;
}
}
出典: TypeScript Handbook — Declaration Merging, .d.ts Files
Declaration Merging
インターフェースのマージ
同名interfaceは自動的にマージされる。
型の段階的拡張が可能。
モジュール拡張
既存ライブラリの型定義を
プロジェクト内で拡張できる。
namespaceとクラスの合体
classに同名namespaceを追加し
静的メソッドの型を分離管理。


# Page. 11

![Page Image](https://bcdn.docswell.com/page/57GLZM9REL.jpg)

型ガード（Type Guards）と Narrowing
typeof ガード
instanceof ガード
function pad(x: string | number) {
if (typeof x === "string") {
return x.toUpperCase(); // ← string確定
}
return x.toFixed(2); // ← number確定
}
function handle(e: Error | MyError) {
if (e instanceof MyError) {
e.customMethod(); // MyError確定
} else {
console.error(e.message);
}
}
in 演算子ガード
ユーザー定義型ガード（is）
type Cat = { meow(): void };
type Dog = { bark(): void };
function isString(x: unknown): x is string {
return typeof x === "string";
}
function speak(pet: Cat | Dog) {
if ("meow" in pet) {
pet.meow(); // Cat確定
} else pet.bark();
}
出典: TypeScript Handbook — Narrowing
// Assertionガード
function assertDefined<T>(
x: T | undefined
): asserts x is T {
if (!x) throw new Error();
}


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4EQYLRWYJP.jpg)

公式リファレンス・参考文献一覧
公式ドキュメント（必
読）
深掘りリソース
学術・仕様系
TypeScript Handbook
typescriptlang.org/docs/handbook/intro.html — 全機能の公式ガイド
TSConfig Reference
typescriptlang.org/tsconfig — 全コンパイルオプション網羅
TS Language Specification
github.com/microsoft/TypeScript/blob/main/doc/spec-ARCHIVED.md
What's New in TS
typescriptlang.org/docs/handbook/release-notes/overview.html
Type Challenges
github.com/type-challenges/type-challenges — 型パズル500問以上
TypeScript Deep Dive
basarat.gitbook.io/typescript — 無料・高品質・英語
Total TypeScript
totaltypescript.com — Matt Pocock のTS上級コース
ts-pattern
github.com/gvergnaud/ts-pattern — Pattern Matching ライブラリ
Bierman et al. (2014)
"Understanding TypeScript" — ECOOP 2014 論文。型システムの理論的背景
Gao et al. (2017)
"To Type or Not to Type" — MSR 2017。JSバグの15%予防を実証
TC39 Proposals
github.com/tc39/proposals — TS先行実装の元となるJS提案一覧
DefinitelyTyped
github.com/DefinitelyTyped/DefinitelyTyped — @types の源泉
うさうさ研修工房 — TypeScript 原理原則・公式仕様・ライブラリ完全ガイド