TypeScript 11 実務パターン・よくあるエラー・AI 開発

import { z } from 'zod'
 
const UserSchema = z.object({
  id: z.string(),
  name: z.string().min(1),
  email: z.email().optional(),
})
type User = z.infer<typeof UserSchema>     // 型はスキーマから導出(二重管理しない)
 
const res = await fetch('/api/user')
const parsed = UserSchema.safeParse(await res.json())
if (!parsed.success) throw new Error('不正なレスポンス')
parsed.data.name   // 型安全

type UserId = string & { readonly __brand: 'UserId' }
type OrderId = string & { readonly __brand: 'OrderId' }
const toUserId = (s: string) => s as UserId   // 検証した場所でだけ作る
 
function getOrder(id: OrderId) {}
getOrder(toUserId('u1'))   // ❌ UserId は OrderId に入らない

async function findUser(id: UserId): Promise<User | Error> {
  const row = await db.find(id)
  if (!row) return new Error('ユーザーが見つかりません')
  return row
}
const user = await findUser(id)
if (user instanceof Error) return showError(user.message)   // 処理しないと User として使えない
user.name

type State =
  | { type: 'idle' }
  | { type: 'loading' }
  | { type: 'success'; data: User }
  | { type: 'error'; error: string }
// ❌ { isLoading: boolean; data?: User; error?: string } は「loading かつ error」のような矛盾を許す

type Props = { title: string; children: React.ReactNode; onClick?: () => void }
export function Card({ title, children }: Props) { /* ... */ }
 
// HTML 要素の props を継承
type ButtonProps = React.ComponentProps<'button'> & { variant?: 'primary' | 'ghost' }
 
// イベント
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => e.preventDefault()
 
// Next.js App Router(16 系): params / searchParams は Promise
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
}