TypeScript type 與interface 區別

Type

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

Interface

interface Point {
  x: number;
  y: number;
}
interface SetPoint {
  (x: number, y: number): void;
}

Interface都可允许拓展（extends）

Interface extends Type

type Person{
    name:string
}
interface Student extends Person { stuNo: number }

Interface extends Interface

interface Person{
    name:string
}
interface Student extends Person { stuNo: number }

type extends type

type Person{
    name:string
}
type Student = Person & { stuNo: number }

type extends Interface

interface Person{
    name:string
}
type Student = Person & { stuNo: number }

實現 implements

類別可以實作interface以及type(除聯合類型外)

interface ICat{
    setName(name:string): void;
}
class Cat implements ICat{
    setName(name:string):void{
        // todo
    }
}
// type  
type ICat = {
    setName(name:string): void;
}
class Cat implements ICat{
    setName(name:string):void{
        // todo
    }
}

type 無法對聯合類型Person進行實現

無法對聯合類型Person進行實現

error: A class can only implement an object type or intersection of object types with statically known members.

type Person = { name: string; } | { setName(name:string): void };
// 無法對聯合類型Person進行實現
// error: A class can only implement an object type or intersection of object types with statically known members.
class Student implements Person {
  name= "Lara";
  setName(name:string):void{
        // todo
    }
}

type 可以宣告基本型別別名，聯合型別類型，元組等型別，而 interface 不行

type可以宣告基本型別別名，聯合型別類型，元組等型別

// 基本類型别名
type Name = string

// 聯合類型
interface Dog {
    wong();
}
interface Cat {
    miao();
}

type Pet = Dog | Cat

// 具体定義數組每個位置的類型
type PetList = [Dog, Pet]

type 語句中還可以使用 typeof 獲取實例的 類型進行赋值

// 當你想獲取一個變量的類型時，使用 typeof
let div = document.createElement('div');
type B = typeof div

type StringOrNumber = string | number;  
type Text = string | { text: string };  
type NameLookup = Dictionary<string, Person>;  
type Callback<T> = (data: T) => void;  
type Pair<T> = [T, T];  
type Coordinates = Pair<number>;  
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

interface 可以聲明合併而 type 不行

interface 能够聲明合併

interface User {
  name: string
  age: number
}

interface User {
  sex: string
}