typescript-skills

LlamaFarm 向け TypeScript スキル

Designer（React）と Electron App のサブシステムで共通して使える、TypeScript のベストプラクティスです。

概要

このスキルでは、LlamaFarm のフロントエンドアプリケーション向けに、慣用的な TypeScript のパターンを解説します。

• designer/：React 18 + TanStack Query + TailwindCSS + Radix UI
• electron-app/：Electron 28 + Electron Vite

技術スタック

サブシステム	フレームワーク	ビルド	主なライブラリ
designer	React 18	Vite	TanStack Query, Radix UI, axios, react-router-dom
electron-app	Electron 28	electron-vite	electron-updater, axios

設定

両方のプロジェクトで、厳格な TypeScript を使用しています。

{
  "strict": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "noFallthroughCasesInSwitch": true
}

基本原則

1. 常に strict モードを有効にする - 明示的な正当化なしに any を使用しない
2. interface を優先する - オブジェクトの形状には interface、ユニオン／交差型には type を使用する
3. 戻り値の型を明示する - 公開関数の戻り値には必ず型を指定する
4. 不変性 - 適用できる箇所では readonly と as const を使用する
5. null 安全性 - null／undefined を明示的に処理し、非 null アサーションを避ける

関連ドキュメント

• patterns.md - 慣用的な TypeScript パターン
• typing.md - 厳密な型付け、ジェネリクス、ユーティリティ型
• testing.md - Vitest とテストのパターン
• security.md - XSS の防止、入力検証

クイックリファレンス

React コンポーネントのパターン

interface Props {
  readonly title: string
  readonly onAction?: () => void
}

function MyComponent({ title, onAction }: Props): JSX.Element {
  return <button onClick={onAction}>{title}</button>
}

TanStack Query フックのパターン

export const projectKeys = {
  all: ['projects'] as const,
  lists: () => [...projectKeys.all, 'list'] as const,
  detail: (id: string) => [...projectKeys.all, 'detail', id] as const,
}

export function useProject(id: string) {
  return useQuery({
    queryKey: projectKeys.detail(id),
    queryFn: () => fetchProject(id),
    enabled: !!id,
  })
}

エラークラスのパターン

export class ApiError extends Error {
  constructor(
    message: string,
    public readonly status: number,
    public readonly response?: unknown
  ) {
    super(message)
    this.name = 'ApiError'
  }
}

チェックリストの概要

カテゴリ	重大	高	中	低
型付け	3	4	2	1
パターン	2	3	3	2
テスト	2	3	2	1
セキュリティ	4	2	1	0