Tips for type guarding in TypeScript when using instanceof, which only works with classes

Question

Tips for type guarding in TypeScript when using instanceof, which only works with classes

Looking for a way to type guard with TypeScript types without using instanceof:

type Letter = 'A' | 'B';
const isLetter = (c: any): c is Letter => c instanceof Letter; // Error: 'Letter' only refers to a type, but is being used as a value here.

// Desired functionality: Type guard filtering.
isLetter('a'); // Should return true
'foo bar'.split('').filter(c => isLetter(c)); // Should output 'a'

No luck in finding similar issues where instanceof works differently when used with classes:

class Car {}
const isCar = (c: any): c is Car => c instanceof Car; // No error
isCar('a'); // returns false

If it seems like instanceof only functions with classes, what alternative could be considered for types and how can we effectively type guard with a TypeScript type?

typescript filter types casting typeguards

Answer 1

Answer №1

Throughout the compilation phase, TS types are present but disappear during runtime.

When creating a user-defined type guard, it is important to establish appropriate checks based on the input and output types. It's easier to choose from a few options rather than assert the structure of an entirely unfamiliar object.

For a type like Letter (a union of 'A' and 'B'), simply checking whether the input is A or B will suffice

const isLetter = (c: any): c is Letter => c == 'A' || c == 'B';

If your union contains more elements and you prefer not to repeat them in both the union and the type guard:

const letters = ['A', 'B'] as const;
type Letter = typeof letters[number];
const isLetter = (c: any): c is Letter => letters.includes(c);

Playground link

Note: Classes persist at runtime through the prototype chain, allowing the use of the instanceof operator with classes.

Answer 2

Throughout the compilation phase, TS types are present but disappear during runtime.

When creating a user-defined type guard, it is important to establish appropriate checks based on the input and output types. It's easier to choose from a few options rather than assert the structure of an entirely unfamiliar object.

For a type like Letter (a union of 'A' and 'B'), simply checking whether the input is A or B will suffice

const isLetter = (c: any): c is Letter => c == 'A' || c == 'B';

If your union contains more elements and you prefer not to repeat them in both the union and the type guard:

const letters = ['A', 'B'] as const;
type Letter = typeof letters[number];
const isLetter = (c: any): c is Letter => letters.includes(c);

Playground link

Note: Classes persist at runtime through the prototype chain, allowing the use of the instanceof operator with classes.

Answer 3

Answer №2

One potential approach to type guarding a union of string types is to compare the input against a predefined list of strings:

const isValidString = (str: any): str is ValidString => ['apple', 'banana'].includes(str);
isValidString('apple'); // true
isValidString('cherry'); // false

This solution is not optimal as it includes duplication of the union strings within both the type and the guard function. Alternative suggestions are welcome!

Answer 4

One potential approach to type guarding a union of string types is to compare the input against a predefined list of strings:

const isValidString = (str: any): str is ValidString => ['apple', 'banana'].includes(str);
isValidString('apple'); // true
isValidString('cherry'); // false

This solution is not optimal as it includes duplication of the union strings within both the type and the guard function. Alternative suggestions are welcome!

Answer 5

Answer №3

Typescript operates at compile-time, introducing concepts that vanish once the code is running in the JavaScript runtime environment. Attempting to use a Typescript type for runtime checks within your functions will not be effective.

Instead of implementing a runtime check using Typescript, focus on substituting the any parameter type with a specific TypeScript type like Letter, which allows for compile-time validation.

The following example demonstrates this approach:

type Letter = 'A' | 'B';
const shouldBeLetter = (c: Letter) => {
  if (c !== 'A' && c !== 'B') throw "c should be either 'A' or 'B'";
  /* rest of the function */
}

shouldBeLetter('C'); // compile-time error
let couldBeC : Letter = 'ABC'[Math.floor(Math.random() * 3)] as Letter;
shouldBeLetter(couldBeC); // requires a runtime test

The distinction between the expression context and type context in TypeScript highlights how compile-time types are separate from the runtime execution environment. This separation allows for unique functionalities such as repurposing JavaScript keywords like typeof in the TypeScript type context.

Additionally, utilizing expressions like letters[number] in the type context can extract type information from variables, enhancing type safety in your code.

@Lesiak's response effectively demonstrates the utilization of these TypeScript features by leveraging enumerated-type arrays across different contexts in the code.

Answer 6

Typescript operates at compile-time, introducing concepts that vanish once the code is running in the JavaScript runtime environment. Attempting to use a Typescript type for runtime checks within your functions will not be effective.

Instead of implementing a runtime check using Typescript, focus on substituting the any parameter type with a specific TypeScript type like Letter, which allows for compile-time validation.

The following example demonstrates this approach:

type Letter = 'A' | 'B';
const shouldBeLetter = (c: Letter) => {
  if (c !== 'A' && c !== 'B') throw "c should be either 'A' or 'B'";
  /* rest of the function */
}

shouldBeLetter('C'); // compile-time error
let couldBeC : Letter = 'ABC'[Math.floor(Math.random() * 3)] as Letter;
shouldBeLetter(couldBeC); // requires a runtime test

The distinction between the expression context and type context in TypeScript highlights how compile-time types are separate from the runtime execution environment. This separation allows for unique functionalities such as repurposing JavaScript keywords like typeof in the TypeScript type context.

Additionally, utilizing expressions like letters[number] in the type context can extract type information from variables, enhancing type safety in your code.

@Lesiak's response effectively demonstrates the utilization of these TypeScript features by leveraging enumerated-type arrays across different contexts in the code.

Tips for type guarding in TypeScript when using instanceof, which only works with classes

Answer №1

Answer №2

Answer №3

Similar questions

When working with Typescript, you can declare an interface and split its definition across multiple files

When using React MUI Autocomplete, make sure to handle the error that occurs when trying to filter options using the

Is there a way to integrate the AuthState TypeScript Interface into the react-oidc-context Node package for testing in Next.js?

Comparing Angular global variables: when to use static readonly in service class versus const

Issue encountered when working with interface and Observable during the http parsing process

Checking React props in WebStorm using type definitions

What is the best way to limit the types of function parameters in TypeScript based on whether the parameter index is even or odd?

Is there a way to clear the selected date in a date picker while using MatDateRangeSelectionStrategy?

Invoke a function of a child component that resides within the <ng-content> tag of its parent component

Acessing files from Azure Blob within the Aurelia UI: Download or View now!

Utilizing movingMarker from leaflet-moving-marker in Angular: A Step-by-Step Guide

The PKIJS digital signature does not align with the verification process

After I deploy my Next.js code to Vercel, including Google Analytics added by @next/third-parties, I am encountering an error that does not appear in development mode

Resolving issues with Typescript declarations for React Component

Why does mapping only give me the last item when I try to map onto an object?

What are the steps to create a dynamic navigation menu in Angular 2?

Triggering ngSubmit function when button is clicked inside an Ionic alert

Angular Update Component on Input ChangeEnsuring that the component is automatically

Looking to compare two elements within different arrays? The method outlined below is specifically designed for comparing to individual values rather than entire arrays

The closeOnClickOutside feature seems to be malfunctioning in the angular-2-dropdown-multiselect plugin