TypeScript type 和 interface区别

在使用ts的type 和 interface时

两者作用(简单案例)

interface只能定义对象数据结构类型

// 简单案例1
interface User {
    name: string;
    age: number;
    sex?: string;
}

let user: User  = {
    name: '',
    age: 233
};

// 简单案例2
interface User1<T> {
    name: string;
    age: number;
    sex?: string;
    details?: T;
}

const userObj: User1<{
    hobby: string;
}> = {
    name: '',
    age: 233,
    details: {
        hobby: '爱好吃饭',
    }
};

type侧重于直接定义类型
type 可用于 string、number、bool、undefined、null,而 interface 只能描述对象(含数组、函数、包装对象、元组)
type 还可以给一个或多个类型起一个新名称(当变量用)

type Demo = string | number; // 赋值
let test1: Demo  = 1;
let test2: Demo  = '';

type当然也能定义对象类型

type Demo = {
    [propname: string]: any
};

type Demo<T> = {
    [propname: string]: T;
};


type 和 interface 相同点

相同1:type 和 interface都支持扩展

// type 扩展
type myObj = {
    name: string;
}
// &符号
type myObjPlus = myObj & { age: number };

const newObj: myObjPlus = {
    name: '',
    age: 233
};


// interface 扩展
interface myObj {
    name: string;
};

// extends继承扩展
interface myObjPlus extends myObj {
    age: number;
};

const newObj: myObjPlus = {
    name: '',
    age: 233
};
// 当然两者都支持互相交叉扩展
// 情况1
type myObj = {
    name: string;
};

interface myObjPlus extends myObj {
    age: number;
};

const newObj: myObjPlus = {
    name: '',
    age: 233
};
// 情况2
interface user {
    age: number;
};
type myUser = {
    name: string;
} & user;
const newObj: myUser = {
    name: '',
    age: 233
};

type 和 interface 不同点

区别1: type 可以为基本类型,联合类型 或 元组 甚至any等等 赋值定义别名,interface 明显办不到

type A = string;
type B = string | unknown;
type C = B | [ 1, 2 ,3 ,4]; // 赋值当变量用
let test: C = '';

区别2: interface 定义重名了会合并属性,type 办不到(会报错提醒 重复定义)

// interface 定义重名了会合并属性,很多库ts源码里面都用到过类似方法作为扩展
interface A {
    name: string;
}

interface A {
    age: number;
}

const aObj: A = {
    name: '', // 必须
    age: 233 // 必须
};

使用场景

type 的一般使用场景

  1. 一般定义基本或联合类型
  2. 一般定义元组类型
  3. 一般定义函数类型
  4. 定义映射类型

interface 的使用场景

  1. 需要interface 重名会自动合并属性扩展的
  2. 定义对象数据结构(不使用type时)

总结

除了使用场景区别,type 声明的算是类型别名,而 interface 声明的是一个新类型。

(PS:其实自己确实可以想怎么定义就怎么定义,但为了标准化 最好还是得规范点)

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值