mcpField
T
typescript

typescript

github.com/dralgorhythm開発12962 回インストール15 週間前に更新
リポジトリ

typescript について

TypeScript 開発者向けのスキルで、プロジェクト設定、型パターン、エラー処理、テスト、ツールを扱います。厳格な型チェックと一般的な開発手順を支援します。

主な機能

  1. 01TypeScript プロジェクトのセットアップ
  2. 02厳格なコンパイラー設定
  3. 03判別可能なユニオンとブランド型
  4. 04Result パターンによるエラー処理
  5. 05Vitest テストと Biome ツール

活用シーン

  1. 01pnpm で TypeScript プロジェクトを初期化
  2. 02データ結果の型パターンを設計
  3. 03非同期エラーを処理
  4. 04Vitest テストを作成し Biome チェックを実行

インストール

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

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill typescript

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

README（原文）English

プロジェクトの README より

この README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。

TypeScript Development

Project Setup

# Initialize with pnpm
pnpm init
pnpm add -D typescript @types/node

# TypeScript config
npx tsc --init
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

Type Patterns

Discriminated Unions
type Result<T> =
  | { success: true; data: T }
  | { success: false; error: Error };

function handleResult(result: Result<User>) {
  if (result.success) {
    console.log(result.data); // User
  } else {
    console.error(result.error); // Error
  }
}
Branded Types
type UserId = string & { readonly brand: unique symbol };
type OrderId = string & { readonly brand: unique symbol };

function createUserId(id: string): UserId {
  return id as UserId;
}
Utility Types
// Make all properties optional
Partial<User>

// Make all properties required
Required<User>

// Pick specific properties
Pick<User, 'id' | 'email'>

// Omit specific properties
Omit<User, 'password'>

// Make properties readonly
Readonly<User>

Error Handling

// Result type pattern
type Result<T, E = Error> =
  | { ok: true; value: T }
  | { ok: false; error: E };

async function fetchUser(id: string): Promise<Result<User>> {
  try {
    const user = await db.users.findById(id);
    if (!user) {
      return { ok: false, error: new Error('User not found') };
    }
    return { ok: true, value: user };
  } catch (error) {
    return { ok: false, error: error as Error };
  }
}

Testing with Vitest

import { describe, test, expect, vi } from 'vitest';

describe('UserService', () => {
  test('creates user with valid email', async () => {
    const service = new UserService(mockRepo);
    const user = await service.create('[email protected]');
    expect(user.email).toBe('[email protected]');
  });

  test('throws on invalid email', async () => {
    const service = new UserService(mockRepo);
    await expect(service.create('invalid')).rejects.toThrow();
  });
});

Tooling

# Biome (linting + formatting)
pnpm add -D @biomejs/biome
pnpm biome check --apply .

# Vitest (testing)
pnpm add -D vitest
pnpm vitest

コメント

Markdown 対応