coding-typescript

coding-typescript

目的

このスキルは、厳格モード、ジェネリクス、デコレーター、マップ型と条件型、ユーティリティ型、tsconfig の設定などの高度な機能に重点を置き、TypeScript 5.x の開発を AI が支援できるようにします。TypeScript コードのリアルタイムでの生成、デバッグ、最適化に使用します。

使用する場面

React を使ったウェブアプリや Node.js バックエンドなど、型安全性が求められるプロジェクトで作業する際に、このスキルを使用してください。コードレビュー、レガシー JavaScript の TypeScript へのリファクタリング、厳格モード環境での複雑な型ロジックの実装に活用します。移行を予定していない限り、通常の JavaScript には使用しないでください。

主な機能

• tsconfig で厳格モードを有効にする：tsconfig.json に "strict": true を設定すると、暗黙的な any などのエラーを検出できます。
• ジェネリクスを扱う：function identity<T>(arg: T): T { return arg; } のような再利用可能な関数を定義できます。
• デコレーターを使用する：Angular などのフレームワークで、@Component のようなクラスデコレーターを適用できます。
• マップ型を扱う：type Partial<T> = { [P in keyof T]?: T[P]; } のような型を作成できます。
• 条件型を実装する：type IsString<T> = T extends string ? true : false; のような構文を使用できます。
• ユーティリティ型を活用する：型を操作するために Omit<T, K> や Pick<T, K> を適用できます。
• tsconfig を設定する：ビルド用に "target": "es2022" や "module": "esnext" などのオプションを指定できます。

使用パターン

タスクを実行するには、「Use coding-typescript to write a generic array filter function.」のように、スキル ID をクエリの先頭に付けてこのスキルを呼び出します。リクエストには TypeScript の具体的なバージョン（5.x）を必ず含めてください。コードを生成する場合は、「Generate a TypeScript class with decorators in strict mode.」のように、コンテキストを指定してください。デバッグする場合は、的確な修正のためにエラーメッセージとコードスニペットを提示してください。tsconfig のパスを参照するなどして IDE と連携し、AI による編集の前に tsc --project ./tsconfig.json を実行してください。

主なコマンド/API

タスクでは、次の TypeScript CLI コマンドを使用します。

• 厳格モードでコンパイルする：tsc --strict index.ts を実行して、すべての厳格オプションを適用します。
• 変更を監視する：tsc -w --noEmitOnError を実行してファイルを監視し、エラーがある場合は出力を停止します。
• 宣言ファイルを生成する：tsc --declaration を実行して、型用の .d.ts ファイルを出力します。 API のパターンについては、コード内で TypeScript のコンパイラー API を参照してください。'typescript' からインポートし、プログラムによるコンパイルには ts.createProgram() を使用します。ESLint などの外部ツールを使う場合は、カスタム設定用に $TSCONFIG_PATH などの環境変数を設定してください。ジェネリック関数のコードスニペット：

function reverse<T>(array: T[]): T[] {
  return array.reverse();
}

デコレーターは次のように適用します。

function logged(target: any) { console.log(target); }
@logged
class Example {}

統合に関する注意事項

Node.js プロジェクトにこのスキルを統合するには、npm install [email protected] を使って TypeScript がインストールされていることを確認してください。関連サービスで認証が必要な場合（たとえば、リモート API から型を取得する場合）は、スクリプトで $TYPESCRIPT_API_KEY などの環境変数を使用してください。tsconfig.json では、モジュール用のパスを追加します："paths": { "@app/*": ["src/*"] }。他のスキルと組み合わせる場合は、たとえば JavaScript の部分に先に「coding-javascript」を使い、その後で TypeScript への変換にこのスキルを適用するように、出力を連携させます。ES モジュールをターゲットにして互換性を確保してください："module": "esnext" を設定し、Webpack などのバンドラーを使用します。

エラー処理

TypeScript のエラーに対処するには、必ず厳格モードを有効にし、読みやすい出力を得るために tsc --pretty を使用してください。型エラーの場合は、「Type 'string' is not assignable to type 'number'」のような具体的な内容を確認し、コードスニペットで修正方法を提示してください。実行時のコードには、次のように try-catch を実装します。

try {
  const result = someFunction(); // Assume it might throw
} catch (error) {
  console.error(`Error: ${(error as Error).message}`);
}

ビルドエラーが発生した場合は、--diagnostics を付けて tsc を再実行し、詳細なレポートを取得してください。AI が生成したコードが失敗した場合は、たとえば「Fix this TypeScript error: 'TS2322: Type X is not assignable to type Y' in the following code: [snippet]」のように、正確なエラーメッセージを添えて再度問い合わせてください。

具体的な使用例

1. 例 1：汎用ユーティリティ型の生成
   クエリ：「coding-typescript を使って、インターフェースのすべてのプロパティをオプションにするマップ型を作成してください。」
   回答：type Optional<T> = { [K in keyof T]?: T[K]; } のようなコードを生成します。次に、これを適用します：interface User { name: string; age: number; } type PartialUser = Optional<User>;。

2. 例 2：strict モード用の tsconfig の設定
   クエリ：「strict モードとデコレーターを有効にしたプロジェクト用の tsconfig.json を設定してください。」
   次のようなファイルを作成します：{ "compilerOptions": { "strict": true, "experimentalDecorators": true, "target": "es2022" } }。次に、tsc --project tsconfig.json を実行して検証します。

グラフの関係

• 関連クラスター：「coding」（例：共通パターンを扱う「coding-javascript」へのリンク）。
• タグ：「typescript」、「ts」、「coding」（TypeScript ベースのフレームワークを扱う「coding-react」などのスキルとつながります）。
• 依存関係：基本的な構文には「general-coding」が必要で、パッケージ管理には「tooling-npm」と統合されます。