Compile-time vs runtime prop validation across frameworks?

WHY IT EXISTS: Components are APIs. Callers must pass the right shape and type of data. Typos, wrong types, or missing required fields break things. Type systems (compile-time, runtime, or both) catch these early.

THE MENTAL MODEL: Two approaches to validation. Compile-time (TypeScript) checks at build: if you pass the wrong type, tsc fails and you fix before shipping. Runtime (Vue's props validator) checks when the component instantiates: invalid data triggers warnings and may skip rendering. Compile-time is stricter but requires all code to be typed. Runtime is more flexible but misses errors if callers use untyped code (dynamic templates, fetch responses).

HOW IT WORKS: In TypeScript (Angular, Svelte), declare interface Props { name: string; count: number; }. Assign it to the component's generic or class fields. tsc verifies all calls pass matching types. Vue allows both: you can write setup(props: { name: string }) for TS checking, or use props: { name: String, count: { type: Number, required: true, validator: (v) => v > 0 } } for runtime validation. The runtime validator runs when the component receives props; if validation fails, Vue warns (non-breaking). For truly dynamic data (API responses, form inputs), runtime validation is essential because TypeScript doesn't know the shape until runtime.

WHEN IT MATTERS: Large teams and refactor-heavy codebases benefit from compile-time type safety; it prevents regressions across 100+ call sites. Smaller projects or highly dynamic code (user-generated, API-driven) may favor runtime validation for flexibility. Production apps often combine both: strict TS in framework code, validators for external/untrusted data.

ONE CONCRETE EXAMPLE: A UserCard component. TypeScript: interface Props { user: { id: number; name: string; avatar: string } }; calling code must pass that shape or tsc fails. Vue runtime validator: props: { user: { type: Object, validator: (obj) => obj.id && obj.name && obj.avatar } }; if caller passes { id, name } (missing avatar), Vue warns but doesn't break. Blend: use TS for caller type-checking, add runtime validator as a safety net for edge cases.