typescript-devlisted
Install: claude install-skill iamtatsuki05/dotfiles
# TypeScript開発スキル
TypeScriptコードの実装、テスト、デバッグ、リファクタリングを効率的に行うためのガイド。
## 実装前の必須確認
**tsconfig.json/package.jsonを必ず確認する。** プロジェクトの設定に従う。
確認項目:
- `tsconfig.json`: target, module, strict, paths, baseUrl
- `package.json`: type（"module"/"commonjs"）, scripts
- `.eslintrc`/`eslint.config.js`: ESLint設定
- `.prettierrc`: フォーマット設定
- `biome.json`: Biome使用時の設定
- 既存のテストランナー（Jest / Vitest / Playwright 等）と `package.json` scripts
- React / Node / library / CLI など実行環境
- 既存の型設計、validation、DI、エラー処理のパターン
ESLint、Biome、Prettier が併存する場合は、`package.json` scripts と既存CIで使われるものを優先する。`any` や型アサーションは既存方針に従い、必要な場合は理由を明確にする。
## 型定義
### 基本的な型
```typescript
// プリミティブ
const name: string = 'example';
const count: number = 42;
const isActive: boolean = true;
// 配列
const items: string[] = [];
const numbers: Array<number> = [];
// タプル
const point: [number, number] = [0, 0];
// Union型
type Status = 'pending' | 'success' | 'error';
let value: string | null = null;
// オブジェクト型
interface User {
id: number;
name: string;
email?: string; // オプショナル
readonly createdAt: Date; // 読み取り専用
}
// Type Alias
type Point = { x: number; y: number };
type Handler = (event: Event) => void;
```
### ジェネリクス
```typescript
// 関数のジェネリクス
function first<T>(items: T[]): T | undefined {
return items[0];
}
// 制約付きジェネリクス
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
// クラスのジェネリクス
class Container<T> {
constructor(private value: T) {}
getValue(): T {
return this.value;
}
}