typescript type interface difference code example

Example 1: when to use type vs interface typescript

/**
* Modern Typescript types and interfaces are both very powerful (2020)
* It is almost down to personal choice, these days. 
* Key differences:
   - The type alias can also be used for other types such as primitives, 
   unions, and tuples.
   - Unlike a type alias, an interface can be defined multiple times, 
   and will be treated as a single interface
* Decision on when to use:
   - Personally, I use the interface to make it clear that it 
   is intended to be implemented and types for everything else.
*/

// type
type Person = {
  name: string;
  age: number;
}

type speak = (sentence: string) => void;

// interface
interface Person extends Human {
  name: string;
  age: number;
}

interface speak {
  (sentence: string): void;
}

Example 2: typescript type vs interface

// Types are used to enforce the data type of a variable
// For example:

type Weekday = 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday' | 'Sunday';

let day1: Weekday = 'Monday';  // OK
let day2: Weekday = 'January'; // ERROR: 'January' is not assignable to type 'Weekday'

// Interfaces are used to enforce the shape of an object
// For example:

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}

// OK
let person1: Person = {
    firstName: 'James',
    lastName: 'Smith',
    age: 30
}

// ERROR: property 'age' is missing
let person2: Person = {
    firstName: 'Mary',
    lastName: 'Williams'
}

// NOTE: Technically, you can use types to enforce the shape of objects,
//       but that's not what they are intended for.

// More details: https://www.typescriptlang.org/docs/handbook/advanced-types.html

Example 3: typescript interface vs type

// for starters:
// interfaces and types are very similar, they just differ in syntax

// interface
interface Car {
  name: string;
  brand: string;
  price: number;
}

// type
type Car = {
  name: string;
  brand: string;
  price: number;
}

// interface
interface Car extends Vehicle {
  name: string;
  brand: string;
  price: number;
}

// type
type Car = Vehicle & {
  name: string;
  brand: string;
  price: number;
}