首页 > 其他分享 >typeScript学习-TS类型-接口

typeScript学习-TS类型-接口

时间:2023-08-11 09:57:10浏览次数:32  
标签:account typeScript string price TS 接口 number 100 name

typeScript学习

接口:

定义:另一种定义对象类型的类型

接口应用场景:

  1、一些第三方包或者框架底层源码中有大量的接口类型

  2、提供方法的对象类型的参数时使用

  3、为多个同类别的类提供统一的方法和属性声明

如何定义接口:

继承接口:

新的接口只是在原来接口集成之上增加了一些属性或方法,这是就用接口继承

// 继承
// 宠物 interface Pet { name: string, love: number, health: number, toHeallth(): void, } // 狗 interface Dog extends Pet { strain: string, // 品种 guradHome(): void, }

 

可索引签名:

// 可索引签名
interface Product {
    name: string,
    price: number,
    account: number,
    [x: string]: any
}


let p: Product = {
    name: 'zhangsan',
    price: 100,
    account: 10,
    descri1: "ok",
    stockno: 1000,
    [Symbol('stockno1')]: 1000,
    100: 'abc',
    true: 1
}

interface Product2 {
    name: string,
    price: number,
    account: number,
    [x: number]: any
}

let p2: Product2 = {
    name: 'zhangsan',
    price: 100,
    account: 10,
    // descri1: "ok", // 错误
    // stockno: 1000, // 错误
    [Symbol('stockno1')]: 1000,
    100: 'abc',
    // true: 1, // 错误
}


interface Product3 {
    name: string,
    price: number,
    account: number,
    [x: symbol]: any
}

let p3: Product3 = {
    name: 'zhangsan',
    price: 100,
    account: 10,
    // descri1: "ok", // 错误
    // stockno: 1000, // 错误
    [Symbol('stockno1')]: 1000,
    // 100: 'abc', // 错误
    // true: 1, // 错误
}


interface Product4 {
    name: string,
    price: number,
    account: number,
    [x: string]: number | string
    // [x: string]: number // 错误
}

let p4: Product4 = {
    name: 'zhangsan',
    price: 100,
    account: 10,
    // descri1: "ok", // 错误
    // stockno: 1000, // 错误
    [Symbol('stockno1')]: 1000,
    // 100: 'abc', // 错误
    // true: 1, // 错误
}


export { }

 

标签:account,typeScript,string,price,TS,接口,number,100,name
From: https://www.cnblogs.com/kongbaige/p/17622252.html

相关文章

  • 微信支付商家转账到零钱提示:此IP地址不允许调用该接口
    微信支付商家转账到零钱提示:此IP地址不允许调用该接口在商户后台,菜单中点击“产品中心”,找到“商家转账到零钱”。点击“前往功能”,点击“接口安全”。在这里分别添加ipv4和ipv6,有时候只添加ipv4可能还会提示ip问题。就需要添加ipv6了。......
  • BootstrapBlazor组件库,组件方法的表达式传参
    BootstrapBlazor组件库,组件方法的表达式传参有时候我们在循环中创建组件的时候,可能想把item的值也一并传入组件的方法事件中去处理,有很多小伙伴就不知道如何去调用事件了。下面是一段实例代码,通过循环遍历来创建图片,并且创建一个删除图片的按钮,这个按钮的OnConfirm方法需要把图......
  • 每隔几秒请求一次接口
    轮询-每隔几秒请求一次接口实现数据更新单纯使用setInterval会使页面卡死,setTimeout自带清除缓存,组合使用实现轮询可解决浏览器崩溃.<template><div><button@click="dataset_log">getdatasetlog</button><ul><liv-for="(item,......
  • 店铺营业状态设置_功能测试&文档接口的分类
       ......
  • ECharts实现两条曲线数据比较,数据高出区域高亮显示
    显示效果: 代码实现:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>EChar......
  • Apipost接口自动化中关联关系如何配置
    在接口自动化测试中,接口之间可能存在依赖关系,即某些接口的执行需要先完成其他接口的执行。为了确保测试用例的正确执行,我们需要在配置测试用例时考虑接口之间的依赖关系。在编写测试用例时,需要明确每个接口的功能和输入输出参数。根据接口之间的依赖关系,将测试用例按照执行顺序组......
  • Go语言中的匿名接口
    匿名接口在Go语言中提供了一种定义接口但不给它命名的方式。使用它们有其优缺点:优点:简洁性:在你只需要在一个地方使用接口时,匿名接口可以避免创建一个新的命名接口。局部性:匿名接口定义在使用它的地方,这使得读代码的人可以立即看到所需的方法,而不必在代码的其他地方查找命名......
  • 解决mysqladmin flush-hosts
    1、提高允许的max_connect_errors数量(治标不治本)a.命令行修改 修改max_connection_errors的数量为1000 mysql-h123.57.78.101-P3306-uroot-p123456 setglobalmax_connect_errors=1000; showvariableslike‘%max_connect_errors%’;b.配置文件修改 登陆进入M......
  • ubuntu putty ntsysv 图形化命令界面 错位 乱码
    有待验证 ntsysv zhcon是工作在Linux控制台下的高效双字节中/日/韩(CJK)虚拟终端,就像DOS环境中的UCDOS一样,为控制台(console)环境提供完整的双字节语言环境。 apt-getinstallzhcon#adduser$(whoami)video#添加当前用户到video中zhcon--utf8#运行zhcon(注意:输入的是......
  • API 接口设计规范
    概述这篇文章分享API接口设计规范,目的是提供给研发人员做参考。规范是死的,人是活的,希望自己定的规范,不要被打脸。路由命名规范动作前缀备注获取getget{XXX}获取getget{XXX}List新增addadd{XXX}修改updateupdate{XXX}保存savesave{XXX}删除deletedelete{XXX}上传uploadupload{XXX}......