当前位置: 首页 > article >正文

TS学习——type与interface的异同点

        引:在学习TS时发现type和interface都可以设置类型/接口,那么他们俩有什么区别呢?又应该怎么选择呢?其实在使用时除了写法不同,他们的作用都是一样的。接下来我们看一下他们有什么异同点吧!


一、相同点

        type和interface都可以用来定义接口/类型:

使用type定义:

type exampleObj = {
    name: string
    age: number
}
    
type exampleFun = (name:string,age:number) => void;

 使用interface定义:

interface exampleObj {
    name: string
    age: number
}
 
interface exampleFun {
    (name:string,age:number): void;
}

        type和interface都支持继承,且可以支持互相继承,但具体表现形式上面会有区别

type继承是通过&实现的

    type typaA = {
        name: string
    }
 
    interface interfaceA {
        name: string
    }
    
 
    type typeB = typaA & {
        age: number
    }
 
    type typeC = interfaceA & {
        age: number
    }

interface继承是通过extends实现的

    type typaA = {
        name: string
    }
 
    interface interfaceA {
        name: string
    }
 
    interface interfaceB extends typaA {
        age: number
    }
 
    interface interfaceC extends interfaceA {
        age: number
    }

二、不同点

type可以通过 typeof 操作符来定义

const name = "Alice";

type NameType = typeof name;

const newName: NameType = "Bob"; // 正确
// const newName: NameType = 123; // 错误,类型不匹配
const user = {
  id: 1,
  name: "Alice",
  age: 30,
};

type UserType = typeof user;

const newUser: UserType = {
  id: 2,
  name: "Bob",
  age: 25,
};

 type可以申明 联合类型

    type typaA = {
        name: string
    }

    type typeB = {
        age: number
    }
 
    type typeC = typaA | typeB

type可以申明 元组类型

    type typaA = {
        name: string
    }

    type typeB = {
        age: number
    }
 
    type typeC = [typaA , typeB]

interface可以进行声明合并,type重复定义会报错,因此是无法实现声明合并

    interface interfaceA {
        name: string
    }
 
    interface interfaceA {
        age: number
    }
    
    /*
        interfaceA实际结果是:

        interfaceA {
            name: string
            age: number
        }
    */


http://www.kler.cn/news/354640.html

相关文章:

  • c++基础知识复习(1)
  • pdf删除几个页面怎么操作?PDF页面删除的快捷方法
  • Unity UGUI SuperScrollView介绍
  • ETL技术在金蝶云星空与旺店通WMS集成中的应用
  • 期货交易程序化,哪些API可供选择及如何使用?
  • taro小程序如何全局监听路由变化?
  • 基于SpringBoot+Vue+uniapp微信小程序的乡村政务服务系统的详细设计和实现(源码+lw+部署文档+讲解等)
  • AI学习指南深度学习篇-生成对抗网络的变体及扩展
  • 02 go语言(golang) - 包和模块
  • 什么是 SQL 命令?SQL 如何工作?
  • Maven基于构建阶段分析多余的依赖
  • Linux 下find常用命令整理(更新ing)
  • HCIP-HarmonyOS Application Developer 习题(十二)
  • 阿加犀构建开发者生态的全链路赋能之旅
  • QGIS--DEMTO3D
  • Pytorch分布式训练杂记1
  • DS链式二叉树的基本操作和OJ题(12)
  • mysql数据同步ES方案---DTS
  • 鸿蒙开发 四十四 ArkTs BuilderParam传递UI(二)
  • 开发一个微信小程序要多少钱?