TypeScript中interface和type这么用。。。（用法和区别）

TypeScript中interface和type关键字的区别及用法

---

前言（如果只想知道区别，可直接跳转不同点部分）

本文主要从三个角度介绍：
1、两者使用方法
2、两者相同点
3、两者不同点/区别

---

一、type和interface使用方法？

1、interface基本用法

interface obj { 
    obj1:string, 
    obj2:string, 
    fn1: ()=>string 
} 
 
const user:obj = { 
    obj1:"obj1",
    obj2:"obj2", 
    fn1: ():string =>{return "fn1"} 
} 

console.log(user.obj1) 
console.log(user.obj2) 
console.log(user.fn1())

2、type基本用法

type MyNumber = number //基本类型
type StringOrNumber = string | number //联合类型
type Text1 = string | string[] //联合类型
type Point = [number, string] //元组
type Callback = (data: string) => void //函数类型
const testNum : MyNumber = 1
console.log(testNum)
const testStr : StringOrNumber = '1'
console.log(testStr)
const testStrText1 : Text1 = '1'
console.log(testStrText1)
const testStrArrayText1 : Text1 = ['1','2','3']
console.log(testStrArrayText1)
const testPoint : Point = [1,'2']
console.log(testPoint)
const testFn : Callback = (data) => {console.log('This is function type !','string is ' + data)}
const testValue = '1'
testFn(testValue)
//-------------------------------------------------
//运行结果：
1
1
1
[ '1', '2', '3' ]
[ 1, '2' ]
This is function type ! string is 1

二、相同点

1. 类型别名和接口都可以用来描述对象或函数

代码如下（示例）：

//type
type Obj1 = {
  x: number;
  y: number;
}
type fn1 = (x: number, y: number) => void
//interface
interface Obj2 {
	x: number;
	y: number;
}
interface fn2 {
	(x: number, y: number): void;
}

2. 类型别名和接口都支持扩展

代码如下（示例）：

//type 通过&进行类型扩展
type Parent = {
	name: string;
};
type Son = Parent & {
	age: number
}
//interface 通过extends进行类型扩展
interface Parent {
	name: string;
}
interface Son extends Parent {
	age: number
}
//test
const person : Son = {
	name: '1',
	age: 1
}
console.log(person)
//{ name: '1', age: 1 }

三、不同点

1. 类型别名可以为基本类型、联合类型或元组类型定义别名，而接口不行

//基本类型
type testNumber = number;
//联合类型 
type testStringNumber = string | number;
//元组
type testTuple = [number, number];

2. 同名接口会自动合并，而类型别名不会

//interface----------------
interface Parent {
	name: string;
}
interface Parent {
	age: number;
}
//test
const testObj : Parent = {
	name : '1',
	age: 1
}

console.log(testObj)
//output
{ name: '1', age: 1 }
//type----------------------
type Parent = {
	name: string;
}
type Parent = {
	age: number
}
//error （报错）
error TS2300: Duplicate identifier 'Parent'.

---

总结

一些使用场景

1、使用类型别名的场景：
定义基本类型的别名时，使用 type
定义元组类型时，使用 type
定义函数类型时，使用 type
定义联合类型时，使用 type
定义映射类型时，使用 type
2、使用接口的场景：
需要利用接口自定合并特性的时候，使用 interface
定义对象类型且无需使用 type 的时候，使用 interface

如果觉得还不错，点个👍，收藏吃灰