What’s the difference between “declare class” and “interface” in TypeScript

by

interface is for when you simply want to describe the shape of an object. There’s no code generation, ever, for interfaces — they’re solely an artifact in the type system. You’ll see no difference in the code generation for a class depending on whether or not it has an implements clause.

declare class is for when you want to describe an existing class (usually a TypeScript class, but not always) that is going to be externally present (for example, you have two .ts files that compile to two .js files and both are included via script tags in a webpage). If you inherit from a class using extends (regardless of whether the base type was a declare class or a regular class) the compiler is going to generate all the code to hook up the prototype chain and forwarding constructors and what not.

If you try to inherit from a declare class that should have been an interface, you are going to have a runtime error because that generated code will be referring to an object with no runtime manifestation.

Conversely, if you simply implement an interface that should have been a declare class, you’re going to have to re-implement all the members yourself and won’t be taking advantage of any code re-use from the would-be base class, and functions that check the prototype chain at runtime will reject your object as not actually being an instance of the base class.

To get really nerdy, if you have a C++ background, you can roughly think of interface as typedef and declare class as an extern declaration of a constructor that strictly lacks a definition in this compile unit.

From a pure consumption side (writing imperative code, not adding new types), the only difference between interface and declare class is that you can’t new an interface. However, if you intend to extend/implement one of these types in a new class, you absolutely have to have chosen correctly between interface and declare class. Only one of them will work.

Two rules that will serve you well:

  • Is the name of the type aligning with a constructor function (something invokable with new) that’s actually present at runtime (e.g. Date is, but JQueryStatic is not)? If no, you definitely want interface
  • Am I dealing with a compiled class from another TypeScript file, or something sufficiently similar? If yes, use declare class

More Related Contents:

  1. Use async await with Array.map
  2. Why can I access TypeScript private members when I shouldn’t be able to?
  3. Using _ (underscore) variable with arrow functions in ES6/Typescript
  4. Check if an object implements an interface at runtime with TypeScript
  5. Angular4 – No value accessor for form control
  6. When to use JSX.Element vs ReactNode vs ReactElement?
  7. Property ‘value’ does not exist on type EventTarget in TypeScript [duplicate]
  8. How to define type for a function callback (as any function type, not universal any) used in a method parameter
  9. Mongoose the Typescript way…?
  10. Extend native JavaScript array
  11. npm WARN … requires a peer of … but none is installed. You must install peer dependencies yourself
  12. what is new() in Typescript?
  13. Get list of duplicate objects in an array of objects
  14. Rxjs toPromise() deprecated
  15. Is any JavaScript code a valid TypeScript code?
  16. How to check for isBrowser in Angular 4
  17. Writing npm modules in TypeScript
  18. How to achieve a debounce service on input keyup event in angular2 with rxjs
  19. How to resolve Node.js ES6 (ESM) Modules with the TypeScript Compiler (TSC). TSC doesn’t emit the correct file-ext
  20. TypeError: Class extends value undefined is not a function or null
  21. Return an empty Observable
  22. “You may need an additional loader to handle the result of these loaders.”
  23. Storing Objects in localStorage
  24. Missing basic DOM types in TypeScript project
  25. Subscribe to observable is returning undefined
  26. TypeScript TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’
  27. binding data to angular checkbox
  28. Determine if a CSS class exists with Javascript
  29. How to prevent Next.js from instantiating a singleton class/object multiple times?
  30. Declare an array in TypeScript

Leave a Comment