An example of using quards in React.

_README.md

Type guards are used to obtain information about the type of a variable.

BlogItemPreview.tsx

import React from "react";
import { BlogItem, isLongPostBody } from "./types";

const BlogItemPreview = (blogItem: BlogItem) => {
  const { body, author, title } = blogItem;

  const image = isLongPostBody(body) && body.image;
  const previewText = isLongPostBody(body) ? body.lead : body.summary;

  return (
    <div>
      <h2>{title}</h2>
      <i>{author}</i>
      {image && <image src={image} />}
      <p>{previewText}</p>
    </div>
  );
};

export default BlogItemPreview;

types.ts

export interface LongPost {
  lead: string;
  content: string;
  image: string;
}

export interface ShortPost {
  summary: string;
}

export type BlogBody = ShortPost | LongPost;

export interface BlogItem {
  title: string;
  author: string;
  body: BlogBody;
}

export const isShortPostBody = (body: BlogBody): body is ShortPost =>
  'summary' in body;

export const isLongPostBody = (body: BlogBody): body is LongPost =>
  'lead' in body;