Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does 'instanceof' in TypeScript give me the error "'Foo' only refers to a type, but is being used as a value here."?

People also ask

Does Instanceof work in TypeScript?

instanceof is an operator in TypeScript, which checks if an object is an instance of a specific class or a constructor function. The Instanceof also takes inheritance into account. It returns true if the object inherits from the class's prototype.

Is a type but is being used as a value?

The 'instanceof' error "only refers to a type, but is being used as a value here" occurs when we try to use the instanceof operator with a type instead of a value. To solve the error, create a class instead, or simply use a user-defined type guard.

Is it bad to use any type in TypeScript?

any. ❌ Don't use any as a type unless you are in the process of migrating a JavaScript project to TypeScript. The compiler effectively treats any as “please turn off type checking for this thing”. It is similar to putting an @ts-ignore comment around every usage of the variable.

Should I use type or interface TypeScript?

Interfaces are most recommended for defining new objects or methods or properties of an object where it will receive a specific component. Hence interface works better when using objects and method objects. Therefore it is our choice to choose between types or interface according to the program needs.


instanceof works with classes, not interfaces.

What's going on

The issue is that instanceof is a construct from JavaScript, and in JavaScript, instanceof expects a value for the right-side operand. Specifically, in x instanceof Foo JavaScript will perform a runtime check to see whether Foo.prototype exists anywhere in the prototype chain of x.

However, in TypeScript, interfaces have no emit. That means that neither Foo nor Foo.prototype exist at runtime, so this code will definitely fail.

TypeScript is trying to tell you this could never work. Foo is just a type, it's not a value at all!

"What can I do instead of instanceof?"

You can look into type guards and user-defined type guards.

"But what if I just switched from an interface to a class?"

You might be tempted to switch from an interface to a class, but you should realize that in TypeScript's structural type system (where things are primarily shape based), you can produce any an object that has the same shape as a given class:

class C {
    a: number = 10;
    b: boolean = true;
    c: string = "hello";
}

let x = new C()
let y = {
    a: 10, b: true, c: "hello",
}

// Works!
x = y;
y = x;

In this case, you have x and y that have the same type, but if you try using instanceof on either one, you'll get the opposite result on the other. So instanceof won't really tell you much about the type if you're taking advantage of structural types in TypeScript.


To do type checking at runtime with an interface is using type guards, if interfaces you wish to check have different properties/functions.

Example

let pet = getSmallPet();

if ((pet as Fish).swim) {
    (pet as Fish).swim();
} else if ((pet as Bird).fly) {
    (pet as Bird).fly();
}

Daniel Rosenwasser might be right and dandy but i feel like doing an amendment to his answer. It is fully possible to check instance of x, see the code snippet.

But it's equally easy to assign x = y. Now x would not be an instance of C as y only had the shape 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)) // return true
console.log('y is C? ' + (y instanceof C)) // return false

You can use the in operator narrowing for checking if the element you need is in the object.

With this method, you can verify if x is a string or Foo

if ('abcdef' in x) {
    // x is instance of Foo
}