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

by

TL;DR

instanceof works with classes, not interfaces nor type aliases.

What’s TypeScript trying to tell me?

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. The same is true of type aliases. 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!

If you’re coming from another language, you might have meant to use a class here. Classes do create values at runtime, but there are some notes about that that you may want to read about below.

“What can I do instead of instanceof if I still want a type or interface?”

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.

More Related Contents:

  1. typescript anonymous object with variable based label value
  2. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  3. Angular 2: How to detect changes in an array? (@input property)
  4. Dynamically loading a typescript class (reflection for typescript)
  5. Why duck typing is allowed for classes in TypeScript
  6. Typescript compile to single file
  7. Check if value exists in enum in TypeScript
  8. How to reuse existing C# class definitions in TypeScript projects
  9. Vuejs typescript this.$refs..value does not exist
  10. How to measure the execution time of a promise?
  11. Is it a good practice using Observable with async/await?
  12. How to handle window scroll event in Angular 4?
  13. Using optional chaining operator for object property access
  14. Prevent IE11 caching GET call in Angular 2
  15. Nested arrays in Angular 2 reactive forms?
  16. Angular: In which lifecycle hook is input data available to the Component
  17. Angular 4 Filter Search Custom Pipe
  18. Angular 2 typescript invoke javascript function
  19. Whats the difference between using a class and interface?
  20. How to loop over object properties with ngFor in Angular
  21. Converting an image to base64 in angular 2
  22. Typescript Promise rejection type
  23. useMemo vs. useEffect + useState
  24. TypeScript “Compile on save” feature not working in Visual Studio 2015
  25. angular 2 access ng-content within component
  26. Property ‘XXX’ does not exist on type ‘CombinedVueInstance’
  27. How to import ipcRenderer in vue.js ? __dirname is not defined
  28. How to implement a Typescript interface to an es5-style “class”?
  29. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  30. how can I get a unique device ID in javascript?

Leave a Comment