react typescript type vs interface 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;
}