interface 与 type 区别

interface叫接口，type叫类型别名，虽然都能用来定义类型，严谨来说 type是一种赋值引用，interface是真正意义伤的类型定义

1. type 可以是联合类型、元组类型、基本类型，interface只能是对象

type Name = string // 基本类型，用的少
type A = {x: string} // 类型赋值引用
type B = {y: number}
type TypeA = A | B // 联合类型
type TypeB = [A , B] // 元组类型
type DotPosition = 'top' | 'bottom' | 'left' | 'right'; // 联合类型

2. 相同type别名不能被多次定义，interface可以被定义多次，并会合并到一起

type A = {name: string}
// type A = {age: number} // 重复定义 Error

interface B {
    name: string
}
interface B {
    age: number
}
// 相当于
interface B {
    name: string
    age: number
}

3. type 能用in，interface不能用

type Keys = 'first' | 'second'
type B = {
    [key in Keys]: string
}

const demo: B = {
    first: 'a',
    second:'b'
}


// interface 做法
interface A {
    [key: Keys]: string
}

4. 默认导出方式不同
   • interface支持声明同时默认导出，type必须先声明，再单独导出

export default interface Config {
    name: string
}

type Config2 = {name: string}
export default Config2

5. 扩展方式不同

• interface用extends，type用 & 操作符

interface A {
    name: string
}
interface B extends A {
    age: number
}

// type
type A = {name: string}
type B = {age: number} & A

如何选择

1. 搭配使用

type DotPosition = 'top' | 'bottom' | 'left' | 'right'; // 联合类型
interface A {
    name: string;
    direction: DotPosition
}

2. 单纯定义类型，使用interface，需要操作用type

export type NativeButtonProps = {
    htmlType?: ButtonHTMLType;
    onClick?: React.MouseEventHandler<HTMLElement>;
} & BaseButtonProps &
    Omit<React.ButtonHTMLAttributes<any>, 'type' | 'onClick'>;

export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;

export type LocaleComponentName = Exclude<keyof Locale, 'locale'>;