Uncertainty surrounding refinement in Typescript

Question

Uncertainty surrounding refinement in Typescript

I've been diving into the book Programming TypeScript, and I'm currently stuck on understanding the concept of refinement as shown in this example:

type UserTextEvent = { value: string; target: HTMLInputElement };
type UserMouseEvent = { value: [number, number]; target: HTMLElement };

type UserEvent = UserTextEvent | UserMouseEvent;

function handle(event: UserEvent) {
  if (typeof event.value === "string") {
    event.value; // string
    event.target; // HTMLInputElement | HTMLElement (1)
    // ...
    return;
  }
  event.value; // [number, number]
  event.target; // HTMLInputElement | HTMLElement (2)
}

In my interpretation, the type of event.target should be HTMLInputElement for (1) and HTMLElement for (2). I believe that if the type of event.value is specific, then the type of event.target should also be specific. However, it appears to be HTMLInputElement | HTMLElement instead. Can someone provide a clearer explanation than what's given in the book? Your help is much appreciated.

typescript union-types

Answer 1

Answer №1

By only checking the type of the property, TypeScript will not automatically assume the class type. To achieve this, you must use a method to infer the type yourself.

type UserTextEvent = { value: string; target: HTMLInputElement };
type UserMouseEvent = { value: [number, number]; target: HTMLElement };

type UserEvent = UserTextEvent | UserMouseEvent;

function isUserTextEvent(event: UserEvent): event is UserTextEvent {
  return typeof event.value === "string";
}

function handle(event: UserEvent) {
  if (isUserTextEvent(event)) {
    event.value; // string
    event.target; // HTMLInputElement  (1)
    // ...
    return;
  }
  event.value; // [number, number]
  event.target; // HTMLElement (2)
}

You can test this in the playground

when you verify

typeof event.value === "string"

TypeScript will recognize that the value is indeed a string, and else it can only be a [number, number].

However, it cannot automatically infer that value is of type HTMLInputElement or HTMLElement, so it still considers it as HTMLInputElement | HTMLElement. You need to specify with a method that the event is actually of type UserTextEvent.

Answer 2

By only checking the type of the property, TypeScript will not automatically assume the class type. To achieve this, you must use a method to infer the type yourself.

type UserTextEvent = { value: string; target: HTMLInputElement };
type UserMouseEvent = { value: [number, number]; target: HTMLElement };

type UserEvent = UserTextEvent | UserMouseEvent;

function isUserTextEvent(event: UserEvent): event is UserTextEvent {
  return typeof event.value === "string";
}

function handle(event: UserEvent) {
  if (isUserTextEvent(event)) {
    event.value; // string
    event.target; // HTMLInputElement  (1)
    // ...
    return;
  }
  event.value; // [number, number]
  event.target; // HTMLElement (2)
}

You can test this in the playground

when you verify

typeof event.value === "string"

TypeScript will recognize that the value is indeed a string, and else it can only be a [number, number].

However, it cannot automatically infer that value is of type HTMLInputElement or HTMLElement, so it still considers it as HTMLInputElement | HTMLElement. You need to specify with a method that the event is actually of type UserTextEvent.

Uncertainty surrounding refinement in Typescript

Answer №1

Similar questions

Leveraging TypeScript for defining intricate tree manipulation guidelines

Displaying personalized message 'Loading...' while waiting for the data to be retrieved from the API

Retrieve information from various MongoDB collections

Tips for effectively highlighting search text within HTML content without causing any issues

Transfer text between Angular components

Error: The template is unable to parse due to unrecognized element 'mat-label'

What causes inability for JavaScript to access a property?

Retrieve the predetermined value from the dropdown menu option

A feature that retrieves specific attributes from a type based on user-defined criteria

Is there a way to access a specific tab index in Ionic 3.20 from a child page using a function call?

Angular 6 component experiencing issues with animation functionality

Volta alert: Temporary directory creation failed

When using Angular, a service can be declared in the viewProviders of the parent component and then accessed in the viewProviders of the child

Exploring the depths of useDispatch and dispatch in React-Redux

What is the reason behind TypeScript rejecting the syntax of checkbox input elements?

Display Nested Data in Angular Material Table: A Step-by-Step Guide

Guide on making a Mapped Type in TypeScript using dynamic generic parameters

Leveraging functionality from an imported module - NestJS

Need at least one of two methods, or both, in an abstract class

Having difficulty constructing a full stack application using Express