typescript 36 lines · 8 steps

Validating API data with TypeScript type guards

Composable type guards turn untrusted JSON into a fully typed User the compiler trusts.

Explained by highlit

Intermediate type-guards runtime-validation type-narrowing unknown api-parsing

1type User = {
2  id: number;
3  email: string;
4  roles: string[];
5  displayName?: string;
6};
7 
8function isRecord(value: unknown): value is Record<string, unknown> {
9  return typeof value === "object" && value !== null && !Array.isArray(value);
10}
11 
12function isStringArray(value: unknown): value is string[] {
13  return Array.isArray(value) && value.every((item) => typeof item === "string");
14}
15 
16function isUser(value: unknown): value is User {
17  if (!isRecord(value)) return false;
18 
19  if (typeof value.id !== "number") return false;
20  if (typeof value.email !== "string") return false;
21  if (!isStringArray(value.roles)) return false;
22  if ("displayName" in value && typeof value.displayName !== "string") return false;
23 
24  return true;
25}
26 
27async function fetchUser(id: number): Promise<User> {
28  const response = await fetch(`/api/users/${id}`);
29  const payload: unknown = await response.json();
30 
31  if (!isUser(payload)) {
32    throw new TypeError(`Malformed user payload for id ${id}`);
33  }
34 
35  return payload;
36}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1A function returning `value is T` teaches the compiler to narrow a type after a runtime check passes.
2Small single-purpose guards compose into larger ones, keeping each validation step readable and reusable.
3Treating external data as `unknown` forces you to validate before the type system will let you use it.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';