What could be causing the TypeScript exhaustive switch check to malfunction?

How come the default case in the switch statement below does not result in an exhaustive check where 'item' is correctly identified as of type 'never'?

enum Type {
    First,
    Second
}

interface ObjectWithType {
    type: Type;
}

const array: ObjectWithType[] = [];

for (const item of array) {
    switch (item.type) {
        case Type.First:
            break;
        case Type.Second:
            break;
        default: {
          const unhandledItem: never = item;
          throw new Error(`Unhandled type for item: ${unhandledItem}`);
        }
    }
}

Typescript playground link

Answer №1

According to @thedude, the issue lies in using item instead of item.type.

To simplify the code and address the problem, you can extract the value of type from item early on and then proceed with the switch statement; by default, the type of type will be narrowed down to never:

for (const item of array) {
    const {type} = item;
    switch (type) {
        case Type.First:
            break;
        case Type.Second:
            break;
        default: {
            throw new Error(`Unhandled type for item: ${type}`);
            // The type here is automatically narrowed  ^^^^  to `never`
        }
    }
}

Access Playground

Answer №2

The reason it's not functioning correctly is because the item does not have a type of never, instead it's the item.type that lacks a type.

To fix this issue, you can adjust your code as follows:

const unhandledItem: never = item.type;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a 'No overload matches this call.' error when using ApexCharts with Typescript and ReactJS

As a newcomer to Typescript, I am gradually familiarizing myself with this powerful tool. After fetching the OHLCV data from coinpaprika and passing it to ApexCharts, I encountered an issue while trying to map the raw data: ERROR in src/routes/Chart.tsx:3 ...

Creating a Checkbox-enabled Muiv5 TreeView for an array of objects: Step-by-step guide

Currently, I am utilizing the muiv5 treeview component to construct a treeview dropdown. Unfortunately, the component does not have built-in checkbox support for selection/deselection. However, after conducting some research, I managed to find a somewhat s ...

What does Angular 5 offer in terms of functionality that is equivalent to?

I am working on my AngularJS 1.5 application where I have controllers directly calling service functions. What is the recommended approach to achieve this in Angular? $scope.permissions = ClockingMenuService.permissions; $scope.data = ClockingMenuService ...

Implementing Angular - Injecting a component dynamically into another component

Currently, I am working on developing a small UI components framework for my personal use and enjoyment. One of the components I'm working on is a Tab component. To test this component, I need to dynamically inject another component (TabContainerCompo ...

"Manipulating values in an array with a union type: a guide to setting and

I am currently working on creating an array that can have two different value types: type Loading = { loading: true } type Loaded = { loading: false, date: string, value: number, } type Items = Loading | Loaded const items: Items[] = ...

Is it a good idea to separate TypeScript types into their own package?

In my React/TypeScript application, I have approximately 100 files where various types are declared. I am looking for a simpler and more automated approach to extract all these types into a separate package. Is there a method other than manually copying ...

`Angular2 Reactively-shaped Form Elements with BehaviorSubject`

As a newcomer to Angular, I am struggling with updating reactive forms after making asynchronous calls. My specific challenge involves having a reactive form linked to an object model. Whenever there is a change in the form, it triggers an HTTP request th ...

Sinon - observing a spy that remains inactive, yet the test proceeds to enter the function

Having some trouble with a test function that uses two stubs. The stubs seem to be working fine, as I can see the spy objects inside when I console.log res.json or next. However, the spy is not being called when I make the assertion. The error message read ...

Using ngFor to connect input with the Algolia Places feature

I have implemented an Algolia Places input within an ngFor loop using Angular8. The issue I am facing is that the (change) event only works properly after typing in the input for the second time. While this is functional, it's not exactly the behavior ...

Is there any way I can verify the invocation of signOut in this Jest test case?

I am attempting to perform testing on my home page within a next app. However, I have encountered an issue with a button in the Home component that triggers a logout firebase function. Despite my attempts to mock this function and verify whether or not i ...

Express displays html instead of json when error handling occurs

I recently followed a tutorial on Express.js to create a simple error handler. function clientErrorHandler(err, req, res, next) { if (req.xhr) { console.log('clienterrorhandler', err); res.status(500).send({ error: 'Something faile ...

Error in InversifyJs exclusively occurring in Internet Explorer

I'm currently utilizing Typescript with webpack for the development of a web application. Recently, I made the transition to using the inversifyJs DI library. However, I am encountering a specific error only when testing on Internet Explorer (version ...

Model Mongoose TypeScript Interface Type

I am working with 2 models in my project import {model, Schema, Types} from 'mongoose' interface IResource { user : Types.ObjectId | IUsers, type : Types.ObjectId | IResourceData, value : number, lastUpdate : number | Date, ...

Using i18next to efficiently map an array of objects in TypeScript

I am currently converting a React project to TypeScript and using Packages like Next.js, next-i18next, and styled-components. EDIT: The information provided here may be outdated due to current versions of next-i18next. Please check out: Typescript i18ne ...

Setting state dynamically in Typescript with ReactJS

Within my state, I have defined this interface: interface State { id: string; name: string; description: string; dimensionID: string; file: File | null; operator: string; isFormValid: boolean; filename: string; }; To handle changes, I&apo ...

Utilizing Dynamic Components and the Event Emitter Feature in Angular Version 5

As a newcomer to Angular, I am currently grappling with the concept of dynamic components within my project. Specifically, I am working on implementing functionality where a user can select a row in a component and then click a button to open a modal (cont ...

A comprehensive guide on enabling visibility of a variable within the confines of a function scope

In the code snippet shown below, I am facing an issue with accessing the variable AoC in the scope of the function VectorTileLayer. The variable is declared but not defined within that scope. How can I access the variable AoC within the scope of VectorTile ...

Configuring Typescript target and library to utilize Promise.allSettled on outdated web browsers

I am currently using TypeScript version 4.3.5 and Node.js version 14.18.1 in my project. The code I am working on is compiled to target both old and new browsers by setting target=es5 in the tsconfig file. I make use of both Promise.all and Promise.allSett ...

Accessing Nested Arrays in Angular 8: Retrieving Data in HTML Template from Multiple Layers of Arrays

Hello there. I'm using an API that gives me the following data: (4) [{…}, {…}, {…}, {…}] 0: dueDate: "2018-03-26T00:00:00" priority: {priorityId: 1, priorityName: "Critical", priorityColor: "red"} statuses: Array(1) 0: ...

Extract TypeScript classes and interfaces from a consolidated file

I am seeking a way to consolidate the export of my classes, interfaces, and enums from multiple files into a single file. In JavaScript, I achieved this using the following method: module.exports = { Something = require("./src/something").default, ...