interfaces vs types typescript 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: custom types in typescript

// simple type
type Websites = 'www.google.com' | 'reddit.com';
let mySite: Websites = 'www.google.com' //pass
//or
let mySite: Website = 'www.yahoo.com' //error
// the above line will show error because Website type will only accept 2 strings either 'www.google.com' or 'reddit.com'.
// another example. 
type Details = { id: number, name: string, age: number };
let student: Details = { id: 803, name: 'Max', age: 13 }; // pass
//or 
let student: Details = { id: 803, name: 'Max', age: 13, address: 'Delhi' } // error
// the above line will show error because 'address' property is not assignable for Details type variables.
//or
let student: Details = { id: 803, name: 'Max', age: '13' }; // error
// the above line will show error because string value can't be assign to the age value, only numbers.

Example 4: 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;
}