Issue with the `instanceof` operator not functioning properly when used with Immutable.js

We've encountered an issue while upgrading our project from typescript2.4 to typescript3.2 specifically with immutable.js.

Prior to the update, simply using 

if(x instanceof Immutable.Iterable)
would result in the type of x being 
Immutable.Iterable<any, any>
within the if block. However, post-update, the inferred type of x is {}.

Check out this code snippet here: https://i.sstatic.net/So3re.png

Here's an example of the wrong type inference: https://i.sstatic.net/RGzCp.png

It seems cumbersome to resolve all the errors by explicitly casting 

x as Immutable.Iterable<any, any>
.

Our suspicion is that the issue lies within immutable.js, as other types are inferred correctly within the if block.

P.S. We are aware that instanceof may not always be reliable (https://github.com/facebook/immutable-js/issues/450#issuecomment-107238770), and using Immutable.Iterable.isIterable() does not provide the necessary type support, as the variable remains of type any.

typescriptimmutable.js

Answer №1

Implement a custom type guard:

const checkIfIterable = (arg: any): arg is Iterable<any> =>
  Symbol.iterator in arg

Example of usage:

declare const bar: number | Iterable<number>;

if (checkIfIterable(bar)) {
  console.log(...bar);
}

The version of immutable that I am using is 4.0.0-rc.12. It does not have a class named Iterable. Instead, it utilizes the Iterable interface provided by the standard JavaScript library.

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

Exporting a constant as a default in TypeScript

We are currently developing a TypeScript library that will be published to our private NPM environment. The goal is for this library to be usable in TS, ES6, or ES5 projects. Let's call the npm package foo. The main file of the library serves as an e ...

typescripttypescript1.8typescript-typings

Error encountered when importing a function in Typescript causes a compiler issue

When working with Typescript, I am utilizing the import function following the instructions provided at: https://github.com/Microsoft/TypeScript/issues/12933 My implementation looks like this: import("../myScriptToBeImported").then((module) => { ...

typescriptvisual-studio-2017

What is the best way to execute TypeScript programs on an Android device?

Is there a way to execute TypeScript programs on an Android phone? Are there any offline apps specifically designed for running TypeScript programs on Android devices? ...

androidtypescripttermux

Are npm @types packages causing issues in Visual Studio?

Nowadays, TypeScript's type packages are typically found in node packages with the format @types/packagename. Strangely, Visual Studio, despite its support for npm packages, appears to be unable to locate them: https://i.sstatic.net/7tOK1.png The s ...

visual-studiotypescriptnpmvisual-studio-2017

Retrieve the template parameter from a generic type

While I have experience extracting string from string[], this particular scenario is proving to be quite challenging: type example<T = boolean> = true; // with just "example", how can I retrieve the template parameter "boolean" in this case? type T ...

typescript

limitation on pairings of two generic types

How can I specify in TypeScript that "You can pass in any two objects, as long as their combination satisfies type X"? For example, consider the following function: function myFunction(options: {x: number, y: string}){ } Now, let's say we have anot ...

typescript

Challenges encountered when assigning values in a form with Material UI, Formik, and Typescript

When attempting to set the 'role' and 'active' values on a form, I encountered a couple of issues. The first problem arises from the fact that the selectors' original values are not being properly set. These values are fetched in ...

reactjstypescriptmaterial-uiformikyup

An issue has been encountered: No NgModule metadata was discovered for 'AppModule' in the ngx-rocket Metronic theme

Task List [ ] Initialize [x] Build [x] Serve [ ] Test [ ] End-to-End test [ ] Generate [ ] Add [ ] Update [ ] Lint [ ] Internationalization [ ] Run [ ] Configure [ ] Help [ ] Version [ ] Documentation Is this a regression? This issue started occurring ...

angulartypescriptnpmangular8metronic

What is the procedure for cancelling a file upload in the FileUpload component of PrimeNG?

1. Issue Overview Looking to terminate file upload in PrimeNG's FileUpload component when certain filename patterns are detected. Using Angular 6.0.7 and PrimeNG 6.0.2. 2. Initial Strategy 2.1. HTML Code <p-fileUpload #fileUploader name="file" ...

angulartypescriptfile-uploaduploadprimeng

Is there a way to enhance the functional purity by creating a single function that subscribes and returns a

I'm currently developing a project that involves receiving humidity data from a raspberry pi sensor connected to a backend. Within my Angular Component, I am aiming to display this data in a functional and pure manner. However, I have some doubts rega ...

javascriptangulartypescriptrxjs

Encountering a problem with Typescript and eslint while utilizing styled-components and Material UI: "Warning: React does not identify the `showText` prop on a DOM element."

While using a styled component to return a material ui Fab component, an error appears in the console: React does not recognize the `showText` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as low ...

reactjstypescriptmaterial-uieslintstyled-components

Angular - The argument provided is not compatible with the parameter

I encountered the following TypeScript errors in app.component.ts: Issue: Argument of type '(events: Event[]) => void' is not assignable to parameter of type '(value: Event[]) => void'. Description: Types of parameters 'e ...

javascriptangulartypescript

Creating an interactive questionnaire

Looking for insights on the following situation: I'm working with a survey structure that consists of questions and answers: questions: Question[]; answer: Answer[]; Where Question is defined as: export class Question { idQuestion: string; ...

angulartypescript

How can I store unique and only selected checkbox values in an array using Angular?

I need assistance with creating an array from three checkboxes. The array should only contain the values of the checked checkboxes and should not include duplicates. I have attempted to achieve this functionality, but the values are still being added rega ...

arraysangulartypescriptcheckboxevent-handling

The type 'string[]' is missing the required property 'label', resulting in a typescript error

Within my codebase, I've defined a type called Person that looks like this : type Person = { value?: string[]; label?: string[]; }; Additionally, there is a promise function in my project: async function main(): Promise<Person> { const fo ...

reactjstypescript

Utilizing separately generated elements from ngFor

I am currently working with an angular2 component that generates a list of chapters using an *ngFor= tag. However, I am facing an issue where I am unable to individually target these chapters in my ng2 component to highlight the selected chapter. I expecte ...

domangulartypescript

Struggling with setting up the onChange function in a Next.js application

After successfully writing and testing the code here, I encountered an error preventing me from building it. Please review the code for any issues. I am attempting to set onChange to handle user input in a text field. Currently using onChange={onChange}, ...

reactjstypescriptnext.js

The npm build command is triggering an error message that reads "Allocation failed due to ineffective mark-compacts near heap limit."

I'm currently working on a ReactJS/TypeScript project on Windows 10. I've been running into issues when trying to build my TypeScript scripts using the following command: "rimraf ../wwwroot/* && react-scripts-ts build && copyfi ...

node.jsreactjstypescriptnpm

A guide to implementing angularjs app.service and $q in typescript

I am fairly new to TypeScript and AngularJS and I am struggling to find the correct answer for my issue. Below is the relevant code snippet: export class SidenavController { static $inject = ['$scope', '$mdSidenav']; constructor(p ...

angularjstypescriptangular-material

What is the most effective approach for revealing AngularJS controller methods in TypeScript?

I have been exploring a way to attach the controller object to the scope in a different manner. Here is an example of how it can be achieved. interface IAppCtrlScope extends ng.IScope { info: any; } class InfoCtrl { header: string; name: strin ...

angularjstypescript