DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on

sniptt/guards, a comprehensive collection of type guards for TypeScript.

#opensource #guard #typescript #snippt

In this article, we review snippt/guards. You will learn the following:

  1. What is sniptt/guards?

  2. Guards usage in Twenty codebase.

What is sniptt/guards?

Sniptt/guards is a comprehensive collection of type guards for JavaScript and TypeScript; Inspired by Elixir. Has zero dependencies. 

Foreword on JavaScript data types and data structures

The latest ECMAScript standard defines nine types:

  • Six Data Types that are primitives, checked by typeof operator: 
undefined: typeof instance === "undefined"
Boolean: typeof instance === "boolean"
Number: typeof instance === "number"
String: typeof instance === "string"
BigInt: typeof instance === "bigint"
Symbol: typeof instance === "symbol"
Enter fullscreen mode Exit fullscreen mode

  • Structural Types:

  • Object: typeof instance === "object". Special non-data but structural type for any constructed object instance also used as data structures: new Object, new Array, new Map, new Set, new WeakMap, new WeakSet, new Date and almost everything made with new keyword;

  • Function non data structure, though it also answers for typeof operator: typeof instance === "function". This answer is done as a special shorthand for Functions, though every Function constructor is derived from Object constructor.

  • Structural Root Primitive

  • null: typeof instance === "object". Special primitive type having additional usage for it's value: if object is not inherited, then null is shown;

Source: Guards Readme

Below is a simple example usage from the docs:

import { primitives } from '@sniptt/guards';

primitives.isNumber(val);
Enter fullscreen mode Exit fullscreen mode

Guards usage in Twenty codebase.

I found the below code in Twenty codebase.

import { isNull, isUndefined } from '@sniptt/guards';

export const isDefined = <T>(
  value: T | null | undefined,
): value is NonNullable<T> => !isUndefined(value) && !isNull(value);
Enter fullscreen mode Exit fullscreen mode

isUndefined is defined as shown below in the Guards docs.

import { isUndefined } from '@sniptt/guards';

let val: undefined | null;

if (isUndefined(val)) {
  // TypeScript will infer val: undefined
} else {
  // TypeScript will infer val: null
}
Enter fullscreen mode Exit fullscreen mode

and this isDefined is used in usePlan hook as shown below:

import { isDefined } from 'twenty-shared/utils';

export const usePlans = () => {
  const { data, loading, error } = useListPlansQuery();

  const isPlansLoaded = isDefined(data?.listPlans);
Enter fullscreen mode Exit fullscreen mode

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI-generated code that works but nobody understands?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References:

  1. twenty/packages/twenty-shared/…/isDefined.ts#L1C1-L5C69

  2. https://github.com/sniptt-official/guards

  3. sniptt-official/guards?tab=…-data-structures

  4. sniptt-official/guards?tab=readme-ov-file#isundefined

Top comments (0)