一文带你了解中Typescript中type与interface的区别

​想继续深入Ts其他知识点的同学可以关注下往期文章~
📖​ 一文带你了解Ts泛型的应用
📖​ 一文讲解Typescript中工具类型

 在我们Ts使用的日常开发中，我们对于type(类型别名)与interface(接口)的使用可能傻傻分不清楚，因为他们的功能还是非常相似的，可以说在大多数情况下type与interface还是等价的，我们可以使用两种中的任意一种来对我们的项目进行类型定义，那么存在即合理，接下来我们将对type与interface有什么区别来进行讲解~

type与interface的相同点

定义对象或者函数的形状

 首先两者都可以对基本数据类型与函数进行类型定义，比如：

	interface Test {
	    a: string;
	    b: number;
	    c: boolean;
	    d?: number; // 可选属性
	    readonly e: string; //只读属性
	    [f: string]: any //任意属性
	}
	
    interface TestFunc {
        (name:string,age:number): void
    }
    
    
	type Test = {
	    a: string;
	    b: number;
	    c: boolean;
	    d?: number; // 可选属性
	    readonly e: string; //只读属性
	    [f: string]: any //任意属性
	}
    type TestFunc = (name:string,age:number) => void
    

支持扩展/继承

 首先对于type与interface都是支持继承的，但是两者进行继承的方式不同，interface是通过extends来进行继承，而type是通过&来实现，并且两者可以进行相互拓展，也就是interface可以拓展为type，type也可以拓展为interface。示例：

	// interface进行拓展
	interface A {
    	a: string;
	}
	interface B extends A {
	    b: string;
	}
	
	let testObj: B = {
	    a: 's',
	    b: 's'
	}
	// type进行拓展
	type A = {
	    a: string;
	}
	
	type Test2 = A & {
	    b: string;
	}
	
	let testObj: B = {
	    a: 'test',
	    b: 'test'
	}
	
	// interface拓展为type
	type A = {
	    a: string
	}
	
	interface B extends A {
	    b: string;
	}
	
	let testObj: B = {
	    a: 'test',
	    b: 'test'
	}
	// type拓展为interface
	interface A {
	    a: string;
	}
	
	type B = A & {
	    b: string;
	}
	
	let testObj: B = {
	    a: 'test',
	    b: 'test'
	}
	

type与interface的不同点

type的不同点

• type可以定义基本类型的别名，如 type anotherNumber = number，此时anotherNumber可以代表number类型，也作为其number类型的别名

	type C = number;
	
	let numberC: C = 2;

• type可以通过typeof操作符来进行定义，比如：type A = typeof B

	let num: number = 1;
	
	type C = typeof num;

• type可以声明联合类型，如 type unionA = B1 | B2

	type C = string | number | null;
	let a: C = '1';
	let b: C = 1;
	let c: C = null;

• type可以声明元组类型，如 type tupleA = [B1, B2]

	type C = [string, number];
	
	const cArr: C = ['1', 1];

interface的不同点

• interface可以被多次定义，并且被多次定义的interface会进行类型合并，而type不可以

	// interface进行重复声明
	interface A {
	    a: number;
	}
	interface A {
	    b: string;
	}
	// 此时类型为{a:number,b:string}
	let testA: A = {
	    a: 1,
	    b: '1'
	}
	// 使用type进行重复声明类型
	type B = {
	    a: number;
	}
	// error报错，标识符重复(重复定义了B类型)
	type B = {
	    b: string;
	}