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
如果觉得还不错，点个👍，收藏吃灰
