Why does 'instanceof' in TypeScript give me the error "'Foo' only refers to a type, but is being used as a value here."?
JavascriptTypescriptInstanceofJavascript Problem Overview
I wrote this code
interface Foo {
abcdef: number;
}
let x: Foo | string;
if (x instanceof Foo) {
// ...
}
But TypeScript gave me this error:
'Foo' only refers to a type, but is being used as a value here.
Why is this happening? I thought that instanceof
could check whether my value has a given type, but TypeScript seems not to like this.
Javascript Solutions
Solution 1 - Javascript
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, interface
s 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!
instanceof
?"
"What can I do instead of You can look into type guards and user-defined type guards.
interface
to a class
?"
"But what if I just switched from an 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.
Solution 2 - Javascript
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();
}
Solution 3 - Javascript
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
Solution 4 - Javascript
When it is about checking if an object conforms to an interface signature, then I think the appropriate approach is considering using "type predicates": https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
Solution 5 - Javascript
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
}