在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 。其他更多详情参看 官方规范文档