TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post.

These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in a simple syntax.

({} as Expect>);

Here are the type aliases.

export type Expect = T;

export type Equal = (() => T extends A ? 1 : 2) extends <
  T
>() => T extends B ? 1 : 2
  ? true
  : false;

export type NotEqual = Equal extends true ? false : true;

The expression export type Equal = (() => T extends A ? 1 : 2) extends () => T extends B ? 1 : 2 ? true : false; defines a type alias called Equal.

The type alias Equal is used to compare two types A and B and determine if they are equal.

The comparison is performed using conditional type inference in TypeScript. The expression () => T extends A ? 1 : 2 creates a function that checks if a generic type T extends A. If it does, the function returns 1; otherwise, it returns 2.

Similarly, () => T extends B ? 1 : 2 creates another function that checks if the same generic type T extends B.

The overall expression (() => T extends A ? 1 : 2) extends () => T extends B ? 1 : 2 ? true : false compares the two functions. If the function checking A extends the function checking B, it means that type A and type B are equal. In this case, the expression evaluates to true; otherwise, it evaluates to false.

Therefore, the Equal type is true if types A and B are equal, and false otherwise.

Here is the unit test example asserting different types.

import { type Equal, type Expect } from './testHelpers';

describe('testHelpers', () => {
  describe('Equal, Expect type alias', () => {
    it('should assert never type', () => {
      type Value = never;
      type Expected = never;
      ({} as Expect>);
    });

    it('should assert unknown type', () => {
      type Value = unknown;
      type Expected = unknown;
      ({} as Expect>);
    });

    it('should assert literal types', () => {
      type Value = 'hello';
      type Expected = 'hello';
      ({} as Expect>);
    });

    it('should assert union types', () => {
      type Value = string | number;
      type Expected = string | number;
      ({} as Expect>);
    });

    it('should assert intersection types', () => {
      type Value = { a: number } & { b: string };
      type Expected = { a: number } & { b: string };
      ({} as Expect>);
    });

    it('should assert tuple types', () => {
      type Value = [number, string];
      type Expected = [number, string];
      ({} as Expect>);
    });

    it('should assert function types', () => {
      type Value = (x: number) => string;
      type Expected = (x: number) => string;
      ({} as Expect>);
    });

    it('should assert array types', () => {
      type Value = number[];
      type Expected = number[];
      ({} as Expect>);
    });

    it('should assert object types', () => {
      type Value = { a: number; b: string };
      type Expected = { a: number; b: string };
      ({} as Expect>);
    });
  });
});
Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …

Front-End
How to set up auto-fix on save by using the project’s Eslint config with VS Code

This is a quick instruction to set up auto-fix on save by using the project’s eslint config with VS Code. It works for both TS and JS. 1. Install ESLint plugin for VS Code. 2. Add config to VS code Go to Code -> Preference -> Settings (or press cmd …