DEV Community

Paulund
Paulund

Posted on • Originally published at paulund.co.uk

TypeScript Type vs Interface

In this article we're going to investigate what is the difference between TypeScript type and interface and when to use each one.

TypeScript Type

The Typescript type keyword is used to define a new type. It can be used to define a type for a primitive, union, tuple, or any other custom type like these:

  • String
  • Boolean
  • Number
  • Array
  • Tuple
  • Enum
  • Advanced types
type Person = {
  name: string;
  age: number;
};

const person: Person = {
  name: 'John',
  age: 30,
};
Enter fullscreen mode Exit fullscreen mode

TypeScript Interface

The TypeScript interface keyword is used to define a new type. It can be used to define a type for an object, class, or function.

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: 'John',
  age: 30,
};
Enter fullscreen mode Exit fullscreen mode

When to Use Them

As you can see from the above examples is that type and interface can be used interchangeably in most cases. However, there are some differences between them.

Use type when you need to define a union, tuple, or any other custom type.

type Status = 'active' | 'inactive';

type Point = [number, number];
Type Intersection
TypeScript allows you to combine multiple types into one using the & operator. This is called type intersection.

type Person = {
  name: string;
};

type Employee = {
  job: string;
};

type EmployeePerson = Person & Employee;

const employeePerson: EmployeePerson = {
  name: 'John',
  job: 'Developer',
};
Enter fullscreen mode Exit fullscreen mode

Type Omits

TypeScript allows you to omit properties from a type using the Omit utility type.

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

type PersonWithoutJob = Omit<Person, 'job'>;

const personWithoutJob: PersonWithoutJob = {
  name: 'John',
  age: 30,
};
Enter fullscreen mode Exit fullscreen mode

Type Pick

TypeScript allows you to pick properties from a type using the Pick utility type.

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

type PersonName = Pick<Person, 'name'>;

const personName: PersonName = {
  name: 'John',
};
Enter fullscreen mode Exit fullscreen mode

Type Readonly

TypeScript allows you to make all properties of a type readonly using the Readonly utility type.

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

type ReadonlyPerson = Readonly<Person>;

const person: ReadonlyPerson = {
  name: 'John',
  age: 30,
};

// Error: Cannot assign to 'name' because it is a read-only property.
person.name = 'Jane';
Enter fullscreen mode Exit fullscreen mode

Type Partial

TypeScript allows you to make all properties of a type optional using the Partial utility type.

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

type PartialPerson = Partial<Person>;

const person: PartialPerson = {
  name: 'John',
};

// Error: Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.
Enter fullscreen mode Exit fullscreen mode

Type Required

TypeScript allows you to make all properties of a type required using the Required utility type.

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

type RequiredPerson = Required<Person>;

const person: RequiredPerson = {
  name: 'John',
  age: 30,
};

// Error: Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.
Enter fullscreen mode Exit fullscreen mode

Type Record

TypeScript allows you to create a type with a given set of keys and values using the Record utility type.

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

type PersonRecord = Record<string, Person>;

const personRecord: PersonRecord = {
  john: {
    name: 'John',
    age: 30,
  },
  jane: {
    name: 'Jane',
    age: 25,
  },
};
Enter fullscreen mode Exit fullscreen mode

Type Exclude

TypeScript allows you to exclude properties from a type using the Exclude utility type.

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

type PersonWithoutJob = Exclude<keyof Person, 'job'>;

const personWithoutJob: PersonWithoutJob = 'name' | 'age';
Enter fullscreen mode Exit fullscreen mode

Type Extract

TypeScript allows you to extract properties from a type using the Extract utility type.

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

type PersonJob = Extract<keyof Person, 'job'>;

const personJob: PersonJob = 'job';
Enter fullscreen mode Exit fullscreen mode

Type NonNullable

TypeScript allows you to create a type that excludes null and undefined from a given type using the NonNullable utility type.

type Person = {
  name: string;
  age: number | null;
};

type NonNullablePerson = NonNullable<Person>;

const person: NonNullablePerson = {
  name: 'John',
  age: 30,
};

// Error: Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.
Enter fullscreen mode Exit fullscreen mode

Interface Extending

Whereas you should use interface when you are defining an object, class, or function. Which means an interface can be used on an object for extending another class.

interface Animal {
    name: string;
}

interface Dog extends Animal {
    breed: string;
}

class MyDog implements Dog {
    name = 'Rex';
    breed = 'Labrador';
}
Enter fullscreen mode Exit fullscreen mode

Interface declarations with the same name can be merged, while type declarations with the same name will throw an error.

interface Person {
  name: string;
}

interface Person {
  age: number;
}

const person: Person = {
  name: 'John',
  age: 30,
};
Enter fullscreen mode Exit fullscreen mode

Conclusion

In conclusion, use type when you need to define a union, tuple, or any other custom type. Use interface when you are defining an object, class, or function.

The default choice you can commonly go for is to use type in the majority of cases, this is because you have more options as to what can be defined as an type.

Top comments (0)