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;
目录
相关文章
|
安全 JavaScript
any和unknown有何区别?
any和unknown有何区别?
387 1
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
3001 0
|
JavaScript
TS中 type和interface的区别
TS中 type和interface的区别
2158 0
|
JavaScript 前端开发 定位技术
Nuxt.js 和 Next.js 差异
Nuxt.js 和 Next.js 差异
754 2
|
前端开发 JavaScript UED
前端知识笔记(十)———宏任务和微任务
前端知识笔记(十)———宏任务和微任务
1454 0
|
JavaScript
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
这篇文章解释了为什么在Vue中组件的`data`属性必须是一个函数而不是一个对象。原因在于组件可能会有多个实例,如果`data`是一个对象,那么这些实例将会共享同一个`data`对象,导致数据污染。而当`data`是一个函数时,每次创建组件实例都会返回一个新的`data`对象,从而确保了数据的隔离。文章通过示例和源码分析,展示了Vue初始化`data`的过程和组件选项合并的原理,最终得出结论:根实例的`data`可以是对象或函数,而组件实例的`data`必须为函数。
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
|
JavaScript 前端开发 数据管理
使用Sortable.js库 实现Vue3 elementPlus 的 el-table 拖拽排序
使用Sortable.js库 实现Vue3 elementPlus 的 el-table 拖拽排序
3815 1
|
JavaScript 前端开发 API
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
2870 0
|
前端开发 安全 JavaScript
有哪些常见的前端问题和解决方案
【4月更文挑战第13天】前端开发常见问题及解决方案:页面渲染性能优化(减少重绘、回流,利用GPU加速,代码拆分)、响应式设计(媒体查询、弹性布局)、浏览器兼容性(使用前缀,兼容性库,浏览器嗅探)、事件处理(事件委托、防抖节流)、代码组织(模块化、构建工具)、安全性(输入验证、HTTPS、安全HTTP头)和资源加载(CDN、资源优化、错误处理)。
1715 6