相同點

1.都可以描述一個物件或者函式

interface

interface People {
    name: string
    age: number
}
interface setPeople {
    (name:string,age:number):void
}
type

type People = {
    name: string
    age: number
};
type setPeople = (name:string,age:12)=>void;

2.都允許相互拓展屬性，但是語法不同

interface extends interface 關鍵詞：extends

interface Name {
    name:string;
}
interface People extends Name {
    age:number;
}
 

interface extends type 關鍵詞：extends

type Name = {
    name:string;
}
type People = Name & {age:number}

type extends type 關鍵詞：&

type Name = {
    name:string;
}
type People = Name & {age:number}

type extends interface 關鍵詞：&

interface Name = {
    name:string;
}
type People = Name & {age:number}

• 總結只要是interface擴充套件屬性無論是interface還是type都使用關鍵字extends;type的擴充套件屬性無論是type還是interface都是使用關鍵字&

不同點

interface支援的宣告格式，type不支援

·interface可以多次定義相同的名稱，並且會自動合併所宣告的所有成員，type不支援

 interface Person {
     name:String
 }
 interface Person {
     age: Number
 }
 const person: Person = {name:'zs',age:12}

type支援的宣告格式，interface不支援

· 類型別名可以用於其它型別 （聯合型別、元組型別、基本型別（原始值）），interface不支援

type PersonName = {name:string}
type PersonAge = {age:number}
​
// union(聯合)
type person = PersonName|PersonAge;
​
//tuple(元祖)
type Data = [PersonName,PersonAge]
​
//primitive(原始值)
type age = number;
​
// tyoeof的返回值
let age = 12
type name = typeof age;

·type支援能使用in關鍵字生成對映型別，interface不支援

type Keys = 'firstname' | 'surname';
​
type DudeType = {
    [key in Keys] :string; //對映每個引數
};
​
const test: DudeType = {
    firstname: 'zhang',
    surname: 'san'
}

既然提到了對映型別，來了解一下對映型別在ts中的妙用：

TypeScript提供了從舊型別中建立新型別的一種方式 — 對映型別。 在對映型別裡，新型別以相同的形式去 轉換舊型別裡每個屬性。

interface People {
    name: string
    age: number
    height:number
    address:string
}
​
//自定義對映規則
type Nullable<T> = {[P in keyof T]: T[P] | null}//呼叫此對映後可以設定屬性值為null
​
 
const person: Nullable<People> = {name:'zs',age:12, height:null,address:null}
​
const person1: Readonly<People> = {name:'zs',age:12, height:12,address:'utuy'}
​
const person2: Partial<People> = {name:'zs', height:12,address:'utuy'}
//Readonly是ts內部自帶只讀的對映,實現原理如下
// type Readonly<T> = {
//     readonly [P in keyof T]: T[P];
// }
//
//Partial是ts內部自帶的可選的對映,實現原理如下
// type Partial<T> = {
//     [P in keyof T]?: T[P];
// }
//
​
// person1.name='dsad'//這時候不能更改此屬性

預設匯出方式不同

// inerface 支援同時宣告，預設匯出 而type必須先聲明後匯出
export default interface Config {
  name: string;
}
// 同一個js模組只能存在一個預設匯出哦
 type Config2 = {name: string}
  export default Config2

總結： 一般來說，如果不清楚什麼時候用interface/type，能用 interface 實現，就用 interface , 如果不能就用 type 。其他更多詳情參看 官方規範文件