DEV Community

Learn about difference between Type & Interface in Typescript

Code Oz on March 08, 2021

If you are using typescript, you might use interface & type but if I ask you the difference between them, are you able to answer it ? At the e...

Read full post

Stepan Zubashev • Mar 9 '21

What interface can do, and what type cant do. A class can implement an interface

type A = { a: number };
class B implements A { 
  a: number = 1; 
}

no errors

Chris Frewin • Mar 12 '21

Coming from somewhere like C# a class implementing a type is kind of... weird... Though, all instances of a class automatically are that type... so it makes sense in a weird way too.

Code Oz • Mar 10 '21

Hey ! thank you for your comment, I miss something wrong since a few time, this is available ! I edit my article thank you :)

bravemaster619 • Mar 9 '21

In a word, interface for OOP, type for FP

peerreynders • Mar 9 '21 • Edited

FYI: A class implicitly exposes an interface that can be merged into - example:

type CompareFn = (lhs: number, rhs: number) => number;

const sortWith: (a: readonly number[], f: CompareFn) => number[] = (
  array,
  fn
) => array.slice().sort(fn);

const ascending: CompareFn = (lhs, rhs) => lhs - rhs;
const descending: CompareFn = (lhs, rhs) => rhs - lhs;

class Container {
  readonly #values: readonly number[];

  constructor(values: number[]) {
    this.#values = Object.freeze(values.slice());
  }

  get values(): readonly number[] {
    return this.#values;
  }
}

interface Container {
  ascending(): number[];
  descending(): number[];
}

function asc(this: Container): number[] {
  return sortWith(this.values, ascending);
}

function desc(this: Container): number[] {
  return sortWith(this.values, descending);
}

Container.prototype.ascending = asc;
Container.prototype.descending = desc;

const container = new Container([10, 45, 15, 39, 21, 26]);
console.log(container.values);
console.log(container.ascending());
console.log(container.descending());