使用TypeScript更好的声明是哪一个？

Question

This is a simple question, but during my migration to TypeScript, I'm seeing that in many cases my code could take these two directions... which one could be a better direction to go with: class.ts or interface.ts ?

class.ts

export class ActionSet {   
  constructor(private name: string) {}

  get ACTION(): string {
    return this.name;   
  }

  get PENDING(): string {
    return `${this.name}_PENDING`;   
  }

  get FULFILLED(): string {
    return `${this.name}_FULFILLED`;   
  }

  get REJECTED(): string {
    return `${this.name}_REJECTED`;   
  }
}

export function createActionSet(name: string): ActionSet {   
  return new ActionSet(name); 
}

interface.ts

export interface IActionSet {
  ACTION: string;
  PENDING: string;
  FULFILLED: string;
  REJECTED: string;
}

export function createActionSet(name: string): IActionSet {
  return {
    ACTION: name,
    PENDING: `${name}_PENDING`,
    FULFILLED: `${name}_FULFILLED`,
    REJECTED: `${name}_REJECTED`
  };
}

A more visual way:

Due to ActionSet is not being used in many places, will it be worth to create a class for it? or is this implementation an overkill?

Answer 1

The two solutions are fine. There is no bad choice here. So, it is not a real answer but a comment, here.

Why to prefer a class

1. At runtime, you can use instanceof ;
2. It is DRY. You don't have to write separately the contract (the interface ) and the implementation (the factory);
3. It is more OOP;
4. The memory footprint is smaller.

Why to prefer an interface

1. At compile time, you can use intersections, unions, Pick etc., on interfaces;
2. At runtime, you can use Object.keys , Object.assign etc., on the objects;
3. The performance: because in the class version, a getter and a string concatenation is less performant than just read a property;
4. The bundled size.

A small tip: do not use a prefix I for interfaces. Otherwise, which prefix will you use for a type like:

type WhichPrefixForThatType = MyInterface | boolean;

A last consideration: think JavaScript

TypeScript is JavaScript with types. It is not an independent language. So, to evaluate what are good practices in TypeScript, remember to look at the equivalent JavaScript code.

You can compare the version with a class:

export class ActionSet {   
  constructor(name) {
    this.name = name;
  }

  get ACTION() {
    return this.name;   
  }

  get PENDING() {
    return `${this.name}_PENDING`;   
  }

  get FULFILLED() {
    return `${this.name}_FULFILLED`;   
  }

  get REJECTED() {
    return `${this.name}_REJECTED`;   
  }
}

export function createActionSet(name) {   
  return new ActionSet(name); 
}

The version with an interface:

export function createActionSet(name) {
  return Object.freeze({
    ACTION: name,
    PENDING: `${name}_PENDING`,
    FULFILLED: `${name}_FULFILLED`,
    REJECTED: `${name}_REJECTED`
  });
}

In your example, the second one seems to be simpler to write and to read.