在typescript中interface和type的區別和相同點

 

相同點

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 。其他更多詳情參看 官方規范文檔