As the creator of this code
interface Foo {
abcdef: number;
}
let x: Foo | string;
if (x instanceof Foo) {
// ...
}
Upon running this code, I encountered an error in TypeScript:
'Foo' is recognized only as a type and cannot be used as a value in this context.
I am puzzled by this issue. I thought that instanceof was designed to verify if a value matches a specified type. However, TypeScript seems to have different thoughts on this matter.
The instanceof operator is designed to work with classes in JavaScript, not interfaces or type aliases.
The problem arises from the fact that instanceof is a JavaScript feature that expects a concrete value on the right side. When you use x instanceof Foo, JavaScript checks if Foo.prototype is in the prototype chain of x at runtime.
However, in TypeScript, interfaces and type aliases do not have a runtime representation. Therefore, trying to use instanceof with these constructs will result in failure, as they are purely types and not values.
TypeScript is essentially warning that this approach will never succeed, as Foo is a type and not an actual value.
If you intended to use a class instead, as seen in other languages, classes do create runtime values. Further information on this topic is available below.
instanceof with Types and InterfacesConsider exploring type guards and user-defined type guards as alternatives.
While switching from an interface to a class may seem appealing, it's important to note that in TypeScript's structural type system, where types are primarily based on shapes, you can create objects with the same structure as a given class, as demonstrated in the code snippet below:
class C {
a: number = 10;
b: boolean = true;
c: string = "hello";
}
let x = new C()
let y: C = {
a: 10, b: true, c: "hello",
}
// Works!
x = y; // No issues
y = x; // No issues
In this scenario, x and y have the same type. However, applying instanceof on either object will yield opposite results, highlighting how the use of structural types in TypeScript can affect type checking via instanceof.
If you need to perform runtime type checking using an interface, you can utilize type guards. This is especially useful when the interfaces you are checking have distinct properties or functions.
For instance
let animal = getAnimal();
if ((animal as Dog).bark) {
(animal as Dog).bark();
} else if ((animal as Cat).meow) {
(animal as Cat).meow();
}
When verifying if an item aligns with an interface definition, I find that employing "type predicates" is the most suitable method. Check out more information here: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
Although Daniel Rosenwasser made a valid point, I have a slight modification to suggest for his answer. You can indeed verify if x is an instance of C by referring to the code snippet below.
On the other hand, it is just as simple to set x equal to y. In this case, x would no longer be considered an instance of C since y merely resembles the structure of C.
class C {
a: number = 10;
b: boolean = true;
c: string = "hello";
}
let x = new C()
let y = {
a: 10, b: true, c: "hello",
}
console.log('x is C? ' + (x instanceof C)) // returns true
console.log('y is C? ' + (y instanceof C)) // returns false
Utilizing the in operator narrowing technique allows you to determine the presence of a specific element within an object.
By employing this approach, it becomes possible to ascertain whether x is either a string or Foo.
if ('abcdef' in x) {
// x is an instance of Foo
}
Using 'instanceof' is typically the recommended approach.However, in my specific scenario, I encountered an issue while dealing with a primitive type. Both instanceof Number and instanceof number resulted in errors within the TypeScript compiler:
TS2322: Type 'Number' is not assignable to type 'number'.
TS2693: 'number' only refers to a type, but is being used as a value here.
Instead, 'typeof' is the appropriate choice when working with primitive types:if (typeof value === 'number') {this.propertyValue = value}
If you'd like a visual explanation, check out this video (or see the gif below): The Karma progress reporter may indicate that the tests are taking milliseconds, but in reality, it's taking much longer... I mentioned this on Twitter and was adv ...
I'm struggling to pass a URL variable through the API fetch and I can't seem to retrieve any results. As a newcomer to Javascript, any help is greatly appreciated. //Get IP address fetch('https://extreme-ip-lookup.com/json/') .then(( ...
I am trying to rewrite the life cycle methods in hooks but I am facing some issues. It seems like the component is not behaving as expected. How can I correct this? Can you provide guidance on how to properly rewrite it? useEffect(() => { updateUs ...
Using two arrays in a Highcharts "series" parameter, for example: X = [25, 100, 50, 12] Y = [50, 12, 100, 25] The sequence of X and Y corresponds to the chart's Y value. When sorting X in ascending order, Y's order should match by becoming: X ...
I have a setup with two components. One is responsible for creating new data entries, while the other one is in charge of listing all the data stored in a database. The issue I'm facing is that even though the creation component successfully adds new ...
My array contains dynamic elements within objects: [ { "Value1": [ "name", "surname", "age" ], "Value2": [ "name" ...
Just starting out with React and getting acquainted with mui components. Experimenting with setting the color of a TextareaAutosize mui component using this code: import * as React from 'react'; import TextareaAutosize from '@mui/material/T ...
DEFAULT_RECORDS = [{ id: 1, name: 'John Evans', number: '01928 356115' },{ id: 16, name: 'Murbinator', number: '053180 080000' }]; - retrieveEntries: function (name) { var foundRecords = {}; ...
I am struggling to change the classname of three elements that share the same classname. Unfortunately, as I loop through my array, it seems to decrease in size with each iteration, preventing me from successfully changing all three elements. Any advice or ...
I'm a beginner with Meteor and I'm currently working on the introductory tutorial. However, I'm facing difficulties in retrieving data from a collection. Below is my JavaScript code: import angular from 'angular'; import angularM ...
I have a component that utilizes event listeners using addEventListener and removeEventListener in multiple instances. Using component methods like onMouseMove is not enough because I need to detect events outside of the component as well. Within the comp ...
Is there a way to achieve the same result as the Navigate component in react-router within Nextjs? The next/Router option is available, but I am looking for a way to navigate by returning a component instead. I need to redirect the page without using rout ...
Recently, I attempted to incorporate zoom.js into my project to enable image zoom functionality similar to that of the medium website. After linking both the CSS and JS files, it seemed to be working properly. However, I encountered an issue where the tra ...
Here is the code snippet: <table class="table" id="ptable" > <thead> <tr> <th>CheckBoxes</th> <th>SL</th> <th>Product</th> ...
Attempting to execute the blog example provided on Material UI's getting started page. However, encountering an issue with the source code: Inside blog.js import post1 from './blog-post.1.md'; . . . return( <Main>{post1}<Main/> ...
I have encountered a troubleshooting issue with React and Node that I am struggling to resolve. The problem lies in the communication between my node server and coinmarketcap API. While I successfully receive data from both endpoints (all coins and individ ...
In my Laravel project, I am attempting to implement a logout confirmation message that will pop up when a user clicks on the logout button. Here is the code I have added to my navbar.blade.php: <a class="dropdown-item" id="logout" hr ...
Just a little context: I'm diving into the world of React and currently working on a small app using next.js (with a template from a tutorial I followed some time ago). Lately, I've encountered a challenge where I need to synchronize a timer betw ...
I am in need of utilizing an asynchronous service. My current approach involves sending data to this service using PHP and CURL, as well as receiving data from a URL provided by the service. How can I effectively respond or wait for feedback from this serv ...
I am encountering an issue in my PHP script where I use JSON to pass parameters. When I pass the date as "09-09-2015", it functions correctly. However, when I try to pass the date as $date, it does not work. How can I resolve this problem? $item1 = "test ...