TS中 type|interface的区别

1. type:创建类型别名,不仅可以用来表示基本类型,还可以表示对象类型,联合类型,元组和交集

type username = string //基本类型
type userId = string | number //联合类型
type arr = number[]
​
//对象类型
type Person = {
   id:userId
   name:userName
   age:number
}
//泛型
type Tree<T> = { value:T };
​
const user: Person = {
    id :'fd',
}

2. 接口是命名数据结构(例如对象)的另一种方法;与Type不同,Interface仅限于描述对象类型

接口的声明语法也不同类型别名的生命语法,让我们将上面的类型别名 Person 重写为接口声明:

interface Person{
   id:userId
   name:userName
   age:number
}

两种相似之处:

都可以描述Object 和Function,但语法不同

type:

type Point = {
  x: number;
  y: number;
};
​
type SetPoint = (x: number, y: number) => void;
interface

interface Point {
  x: number;
  y: number;
}
​
interface SetPoint {
  (x: number, y: number): void;
}

二者都可以被继承

interfacetype 都可以继承。

另一个值得注意的是,接口和类型别名并不互斥。类型别名可以继承接口,反之亦然。只是在实现形式上,稍微有些差别。

二者区别

  1. type可以定义基本类型别名, 但是interface无法定义

  1. type可以声明联合类型, 但是interface无法定义

  1. type可以声明 元组类型:但是interface无法定义

  1. interface 可以声明合并,但是type无法定义,用type会报错 如果你多次声明一个同名的接口,TypeScript 会将它们合并到一个声明中,并将它们视为一个接口。这称为声明合并

总结

官方推荐用 interface,其他无法满足需求的情况下用 type

但其实,因为 联合类型 和 交叉类型 是很常用的,所以避免不了大量使用 type 的场景,一些复杂类型也需要通过组装后形成类型别名来使用。

所以,如果想保持代码统一,还是可选择使用 type。通过上面的对比,类型别名 其实可涵盖 interface 的大部分场景。

对于 React 组件中 propsstate,使用 type ,这样能够保证使用组件的地方不能随意在上面添加属性。如果有自定义需求,可通过 HOC二次封装。

编写三方库时使用interface,其更加灵活自动的类型合并可应对未知的复杂使用场景。

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 TypeScript ,`type` 和 `interface` 都可以用来定义类型。 `type` 主要用来给其他类型起别名,常用来简化复杂的类型定义,或者为某些类型定义别名,便于代码的阅读和维护。 `interface` 用来定义类的形状或对象的形状,用来对对象的类型进行描述,例如属性、方法。 比如: ``` type Person = {name:string,age:number} interface Person { name:string, age:number } ``` 两者定义相同,都是定义了一个名为Person类型,有两个属性name和age,都是string和number 总结:简单来说就是 type 更适合定义类型的别名,interface 更适合定义对象的形状。 ### 回答2: TypeInterface是两种在TypeScript定义类型的方式。它们有相似的用途,但也有一些区别Type用于定义一个类型别名,这个别名可以代表任何类型:基本类型、对象类型、交叉类型、联合类型等等。可以使用Type来描述一个状态和行为,而不需要明确地声明这个状态和行为是什么。 Interface则更多地关注对象类型,它主要用于描述一个具体的对象的属性和方法。Interface的属性和方法必须有明确的类型声明。它是定义对象形状的一种方式。 一个重要的区别是,Interface在声明一个对象时必须定义全部的属性和方法,而Type则可以定义一个可以部分类型。在Interface无法使用联合类型或者交叉类型来定义属性,只能使用基本数据类型或对象类型来定义。在Type则没有这种限制。 另一个区别是,Type可以被用于更广泛的场景,包括泛型类型、函数类型、类类型等等,而Interface主要用于描述对象类型。在使用Type的时候可以使用typeof获取类型,而Interface则不行。 总的来说,TypeInterface有相似但不完全一致的功能,使用时需要根据具体情况来选择。对于一个具体的对象类型,可以使用Interface来定义;对于一个可以复用的类型,可以使用Type来定义。 ### 回答3: 在TypeScriptTypeInterface是两个常用的类型声明方式。虽然它们在某些方面有相似之处,但在其他方面也有区别。下面我将详细讨论它们的区别。 一、定义方式不同 Type用于定义别名,通常用于重复使用已存在类型。Type声明的方式类似于变量声明,如下: ``` type MyType = string | number; ``` 而Interface则用于定义对象的形状或结构。这种声明方式与变量声明不同,通常使用花括号包裹,并使用分号分隔属性之间,如下: ``` interface MyInterface { name: string; age: number; getId(): number; } ``` 二、实现目的不同 Type的主要功能是创建类型别名,它为现有类型创建方便、有意义的名称。Type的优势在于可以快速地定义复杂的类型,从而使代码更易于阅读和维护。值得注意的是,Type不能添加新属性或方法。 Interface的主要功能是描述对象的形状或结构,可以定义属性、方法和可选项。除此之外,Interface还可以扩展其他Interface,从而使代码更灵活,易于扩展和维护。此外,Interface还支持更多的类型,如索引签名、继承等。 三、兼容性不同 TypeInterface的兼容性也有所不同。TypeInterface可以互相赋值,因为它们本质上是相似的类型声明方式,但是在某些情况下,Type更灵活。 Type可以使用类似联合类型、交叉类型等较高级的类型操作,从而创建复杂的类型。而且Type还可以使用type assertions或者类型别名来自定义类型,达到灵活控制的效果。 Interface则需要完全匹配才能赋值成功,且它无法使用高级类型操作。因此,在某些情况下,可能需要使用Type来创建更灵活的类型定义。 综上所述,TypeInterface都是定义类型的重要方式,但它们在声明方式、实现目的和兼容性方面存在不同。开发者可以根据需求选择最适合的类型声明方式,从而提高代码的可读性、可扩展性和可维护性。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值