mcpField
T
typescript

typescript

github.com/alicoder001開発54 回インストール
リポジトリ

typescript について

TypeScript 開発で厳密な型付けと一貫したコーディング規約を適用するためのスキルです。設定、型設計、関数、ジェネリクス、ユーティリティ型を扱います。

主な機能

  1. 01厳密な TypeScript 設定
  2. 02命名規則
  3. 03type と interface の使い分け
  4. 04unknown による any の回避
  5. 05ユーティリティ型とジェネリクス

活用シーン

  1. 01tsconfig.json の厳密な設定
  2. 02オブジェクト形状やユニオン型の型選択
  3. 03公開関数やジェネリクスの型付け

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/alicoder001/agent-skills --skill typescript

インストール後、Claude Code で/typescriptを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yaml

詳細

TypeScript プロフェッショナル

プロフェッショナルな開発のための厳格な TypeScript パターンです。

手順

1. 厳格モードの設定

tsconfig.json では常に厳格モードを有効にしてください。

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}
2. 命名規則
種類規則例
インターフェースPascalCase、先頭に I を付ける（任意）User、IUserService
型PascalCaseUserRole、ApiResponse
列挙型PascalCaseStatus、Direction
関数camelCasegetUserById、calculateTotal
変数camelCaseuserName、isLoading
定数UPPER_SNAKE_CASEMAX_RETRY_COUNT、API_URL
3. Type と Interface の使い分け
// ✅ Interface for object shapes
interface User {
  id: string;
  name: string;
  email: string;
}

// ✅ Type for unions, intersections, primitives
type Status = 'pending' | 'active' | 'inactive';
type ApiResponse<T> = { data: T; error: null } | { data: null; error: string };
4. any は使わない
// ❌ Bad
function process(data: any) { ... }

// ✅ Good - use unknown and narrow
function process(data: unknown) {
  if (typeof data === 'string') {
    return data.toUpperCase();
  }
}

// ✅ Good - use generics
function process<T>(data: T): T { ... }
5. ユーティリティ型
// Partial - all optional
type PartialUser = Partial<User>;

// Required - all required
type RequiredUser = Required<User>;

// Pick - select specific
type UserName = Pick<User, 'name'>;

// Omit - exclude specific
type UserWithoutId = Omit<User, 'id'>;

// Record - key-value mapping
type UserMap = Record<string, User>;
6. 関数型
// ✅ Explicit return types for public APIs
function getUser(id: string): Promise<User | null> {
  // ...
}

// ✅ Arrow function with types
const add = (a: number, b: number): number => a + b;
7. ジェネリクス
// ✅ Constrained generics
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

// ✅ Default generic types
interface ApiResponse<T = unknown> {
  data: T;
  status: number;
}

参考資料

コメント

Markdown 対応