QTypeScript · Interview preparation
What is a user-defined type guard?
A type guard is a runtime check whose return type tells TypeScript which type was established.
The idea to remember.
A type guard is a runtime check whose return type tells TypeScript which type was established. Validate properties carefully; a type assertion without checks does not make untrusted input safe.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: choose a union
01 / BEGINNERA value may be one of a fixed set of types.
type Status = 'idle' | 'loading' | 'success' | 'error';
let status: Status = 'idle';Intermediate: narrow unknown input
02 / INTERMEDIATEDo not assume an API response already satisfies your type.
function isUser(value: unknown): value is { id: number; name: string } {
if (typeof value !== 'object' || value === null) return false;
const item = value as Record<string, unknown>;
return typeof item.id === 'number' && typeof item.name === 'string';
}Real scenario: exhaustive state rendering
03 / REAL SCENARIODiscriminated unions model loading, success, and failure explicitly.
type Result =
| { state: 'loading' }
| { state: 'success'; data: string[] }
| { state: 'error'; message: string };
function label(result: Result) {
switch (result.state) {
case 'loading': return 'Loading';
case 'success': return result.data.join(', ');
case 'error': return result.message;
}
}02Check your understanding
Try it in your own words.
Explain what is a user-defined type guard without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse TypeScript study guides ↗