# Interfaces vs Types in TypeScript

###### tags: `Javascript, React, Typescript`

TLDR;

My personal convention, which I describe below, is this:

Always prefer interface over type.

When to use type:

* Use type when defining an alias for primitive types (string, boolean, number, bigint, symbol, etc)
* Use type when defining tuple types
* Use type when defining function types（這部分 interface 也可以做到但是 type 比較好讀）
* Use type when defining a union
* Use type when trying to overload functions in object types via composition
* Use type when needing to take advantage of mapped types

When to use interface:

* Use interface for all object types where using type is not required (see above)
* Use interface when you want to take advantage of declaration merging.

雖然人家直接推薦使用 interface 但還是看下 type alias 以及 interface 兩者的差異

## 1. Objects / Functions

兩者都可以使用在物件以及函式上面，不過會有語法上面的不同

// Interface

interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): void;
}
// Type alias

type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;

## 2. Other Types

這邊只有 type 可以做到的操作像是為 primitive 設立 type ，針對 union 作 type ，以及 tuple 設立 type (tuple 代表陣列中的 type 不唯一可能有各種 type 在內

)

// primitive
type Name = string;

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };

// union
type PartialPoint = PartialPointX | PartialPointY;

// tuple
type Data = [number, string];

## 3. Extend

一樣兩種方式都可以做到 extend 不過是語法上有差異，並且兩者可以 extend 對方

Interface extends interface

interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }
Type alias extends type alias

type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };
Interface extends type alias

type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }
Type alias extends interface

interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };

## 4. Implements

Implements 是 typescpirt 的關鍵字，基本上兩者的操作方式差不多，不過 type 的 union 不能使用 implements

interface Point {
  x: number;
  y: number;
}

class SomePoint implements Point {
  x = 1;
  y = 2;
}

type Point2 = {
  x: number;
  y: number;
};

class SomePoint2 implements Point2 {
  x = 1;
  y = 2;
}

type PartialPoint = { x: number; } | { y: number; };

// FIXME: can not implement a union type
class SomePartialPoint implements PartialPoint {
  x = 1;
  y = 2;
}

## 5. Declaration merging

interface 可以重複 delaration 的行為，type 不行

// These two declarations become:
// interface Point { x: number; y: number; }
interface Point { x: number; }
interface Point { y: number; }

const point: Point = { x: 1, y: 2 };