[SAMPLE] TypeScript学習ログ
TypeScript学習ログ - 2025年1月
学習目標
- TypeScript Advanced Typesの完全理解
- 型システムを活用した堅牢なコード設計
- 実務で使える型テクニックの習得
Week 1: 基礎の復習
学習内容
基本的な型
- プリミティブ型（string, number, boolean）
- 配列型とタプル型
- オブジェクト型
- Union型とIntersection型
実践コード
// Union型
type Status = 'pending' | 'success' | 'error';
// Intersection型
type User = { name: string } & { age: number };
// タプル型
type Point = [number, number];気づき
- Union型は「または」、Intersection型は「かつ」
- タプル型は順序が重要
- 型エイリアスで複雑な型を整理できる
Week 2: 高度な型
Generics（ジェネリクス）
// 基本的なジェネリクス
function identity<T>(value: T): T {
return value;
}
// 配列のジェネリクス
function getFirst<T>(arr: T[]): T | undefined {
return arr[0];
}
// 制約付きジェネリクス
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}学んだこと:
- Genericsで型安全な汎用関数を作れる
extends keyofで型安全なプロパティアクセス- 型推論が効いて使いやすい
Week 3: Utility Types
Partial と Required
type User = {
id: string;
name: string;
email: string;
};
// すべてオプショナル
type PartialUser = Partial<User>;
// すべて必須
type RequiredUser = Required<User>;Pick と Omit
// 特定のプロパティだけ抽出
type UserBasic = Pick<User, 'id' | 'name'>;
// 特定のプロパティを除外
type UserWithoutEmail = Omit<User, 'email'>;Record
// キーと値の型を指定
type UserRole = Record<string, 'admin' | 'user' | 'guest'>;
const roles: UserRole = {
'user1': 'admin',
'user2': 'user',
};実務での活用例:
- API レスポンスの型定義に
Partialを使用 - フォームの入力値に
Pickで必要な項目だけ抽出 - 設定オブジェクトに
Recordを使用
Week 4: 条件付き型
Conditional Types
// T が string なら true、それ以外なら false
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // falseinfer キーワード
// 関数の戻り値の型を取得
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
function getUser() {
return { id: '1', name: 'Suzuki' };
}
type User = ReturnType<typeof getUser>;
// { id: string; name: string; }Mapped Types
// すべてのプロパティを readonly に
type Readonly<T> = {
readonly [K in keyof T]: T[K];
};
// すべてのプロパティをオプショナルに
type Partial<T> = {
[K in keyof T]?: T[K];
};難しかった点:
inferの使い方が最初は理解できなかった- Mapped Types の構文が複雑
- 何度も公式ドキュメントを読み返した
実践プロジェクト
Repository Pattern の型定義
// ベースとなるエンティティ型
type Entity = {
id: string;
createdAt: Date;
updatedAt: Date;
};
// リポジトリインターフェース
interface IRepository<T extends Entity> {
findById(id: string): Promise<T | null>;
findAll(): Promise<T[]>;
create(data: Omit<T, 'id' | 'createdAt' | 'updatedAt'>): Promise<T>;
update(id: string, data: Partial<Omit<T, 'id' | 'createdAt' | 'updatedAt'>>): Promise<T>;
delete(id: string): Promise<void>;
}
// ユーザーエンティティ
type User = Entity & {
name: string;
email: string;
};
// ユーザーリポジトリ
class UserRepository implements IRepository<User> {
async findById(id: string): Promise<User | null> {
// 実装
}
// ... 他のメソッド
}メリット:
- 型安全なCRUD操作
Omitで自動生成されるフィールドを除外Partialで部分更新を型安全に
学習リソース
公式ドキュメント
- TypeScript Handbook: https://www.typescriptlang.org/docs/
- TypeScript Deep Dive（日本語版）
- TypeScript Playground で実験
書籍
- 『プログラミングTypeScript』（オライリー）
- 『実践TypeScript』（技術評論社）
動画
- Udemy: TypeScript完全ガイド
- YouTube: Matt Pocock の TypeScript Tips
記事
- Qiita: TypeScript タグ
- Zenn: TypeScript トピック
今月の成果
定量的成果
- 学習時間: 32時間
- コード量: 500行以上
- Playground実験: 50回以上
定性的成果
- Genericsを自由に使えるようになった
- Utility Typesの使い分けができるようになった
- 条件付き型の基礎を理解
- 実務コードの型定義が改善された
来月の学習計画
学習テーマ
- Template Literal Types
- Branded Types（名目的型付け）
- Variance（共変・反変）
- Type Guards の高度な使い方
- Declaration Files（.d.ts）の作成
実践プロジェクト
- 型安全なフォームライブラリ作成
- Zodとの連携
- GraphQLの型定義
Tips & Tricks
1. typeof と keyof を組み合わせる
const config = {
apiUrl: 'https://api.example.com',
timeout: 3000,
} as const;
type ConfigKey = keyof typeof config; // 'apiUrl' | 'timeout'2. const assertion で厳密な型
const colors = ['red', 'green', 'blue'] as const;
type Color = typeof colors[number]; // 'red' | 'green' | 'blue'3. satisfies演算子（TypeScript 4.9+）
const config = {
apiUrl: 'https://api.example.com',
timeout: 3000,
} satisfies Record<string, string | number>;タグ: @学習 @TypeScript @プログラミング @記録
0
0
0
0
投稿0
フォロワー0
いいねプロパティ
ページ
セキュリティチェックリストNext.jsPCゲーム
オードリー・タン