ts中interface和type的区别

简介: ts中interface和type的区别

type:类型别名;interface:接口,主要用于类型检查

差别

1:定义类型范围
interface只能定义对象类型。
type可以声明任何类型,基础类型、联合类型、交叉类型。

// 基础类型(相当于起别名)
type person = 'string';
// 联合类型
interface Dog {
   
  name:string
}
interface Cat {
   
  age:number
}
type animal = Dog | Cat;
// 元祖(指定某个位置具体是什么类型)
type animal = [Dog,Cat];
//交叉类型(多种类型的集合)
type animal = Dog & Cat;

2:合并声明
定义两个同名的type回报异常;
顶一个两个同名的interface会合并;

interface Dog {
   
  name:string;
}
interface Dog {
   
  age:number
}
// 合并为
interface Dog {
   
  name:string;
  age:number;
}

3:扩展性

interface可以使用extends,implements,进行扩展

// interface extends interface
interface Dog {
   
  name:string;
}
interface Cat extends Dog {
   
  age:number;
}
// interface extends type
type Dog= {
   name:string};
interface Cat extends Dog {
   
  age:number;
}

但type可以使用交叉类型&进行合并

// type & type
  type Dog = {
   name:string};
  type Cat = {
   age:number} & Dog;
  // tyep & interface
  interface Dog {
   
    name:string;
  }
  type Cat = {
   age:number} & interface;

4:可以使用typeof获取实例对象类型

const div = document.createElement('div');
type B = typeof div;
目录
相关文章
|
6月前
|
JavaScript 前端开发 编译器
在ts中const和readonly区别?
在ts中const和readonly区别?
73 1
|
7月前
|
JavaScript
TS中 type和interface的区别
TS中 type和interface的区别
827 0
|
7月前
|
JavaScript 编译器
TS中const和readonly的区别
TS中const和readonly的区别
151 0
|
7月前
|
JavaScript 前端开发 索引
TS - interface和type的区别
TS - interface和type的区别
90 0
|
JavaScript 前端开发
ts - 类
TypeScript支持JavaScript的新特性,比如支持基于类的面向对象编程。让我们创建一个Student类,它带有一个构造函数和一些公共字段。 注意类和接口可以一起工作。
【TS】ts中的类:class
【TS】ts中的类:class
141 0
【TS】ts中的类:class
|
存储 JavaScript
【TS】class类和接口
【TS】class类和接口
119 0
|
存储 JavaScript
【TS】object类型
【TS】object类型
91 0
|
JavaScript
【TS】ts的使用和类型注解
【TS】ts的使用和类型注解
143 0
|
JavaScript
typescript(ts) interface 与 type 的异同
接口可以使用 extends 关键字来进行扩展(这个继承是包含关系,如果父级有了,子集不可以声明重复的,会报错的),或者是 implements来进行实现某个接口
typescript(ts) interface 与 type 的异同