typescript（Day4）接口

最新推荐文章于 2022-12-27 16:20:29 发布
最新推荐文章于 2022-12-27 16:20:29 发布
阅读量194 收藏
点赞数
文章标签： typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46240162/article/details/107745078
版权
typescript（Day4）接口

这里所说的接口并不是前后端数据交互的api接口，而是typescript对类型约束的接口。
接口都是使用 interface关键字来定义接口
接口可以和现实生活中的接口相互呼应，是一种规范，可以让程序更加的健壮，体验预知到一些可能发生的错误
typescript中的接口有很多，如：

  • 属性接口
  • 函数类型接口
  • 可索引接口
  • 可拓展接口、接口继承
属性接口：

属性接口 - - TS中处理json对象属性的一种接口

在这里插入图片描述

属性接口案例 - - 封装ajax

在这里插入图片描述

属性接口总结：
  • 一旦使用了接口， 那么传递的参数就一定要按照接口的规范来严格执行，其中 ?; 符号定义的属性
    表示的是可选接口 这种属性如果不写也可以
函数接口类型约束

函数类型接口 - - 对方法传入的参数以及返回值进行约束

在这里插入图片描述

函数接口总结
  • 定义了函数的接口以后， 形参个数 形参类型，返回值类型都必须要保持一致
可索引接口

可索引接口 - - 主要用来规范数组和对象的 （使用的场景并不是很多）

  • 数组的可索引接口
    在这里插入图片描述
    在这里插入图片描述
    数组使用索引接口较少的原因是数组的索引本身就是number数字类型，和原本定义的方法基本上是一样的，所以在数组上使用索引接口不是很有必要
  • 对象的可索引接口
    在这里插入图片描述
    定义了对象的索引接口之后，使用这个接口的对象就必要得要严格的按照接口定义的索引类型，键值类型的形式来定义对象。
类类型接口

用来规范类的一种接口， 这个和抽象类的概念很像 基本就是提供模板 让子类去仿照这个模板进行生产
类在使用接口的时候使用 需要使用关键字 implements 引用接口 相当于抽象类继承时的 extends
！！！！！！ 有一个小细节 使用类类型的接口的时候 一定要有接口的每一个属性和方法 但是方法的形参可以不写不会报错 但是写了就必须要保持一致 ！！！！！！
这个也就是类类型接口和抽象类的区别之一了 抽象类的话必须要保持形参上的完全一致

在这里插入图片描述

接口拓展

接口也是可以有继承关系的，同时接口之间的继承也是使用关键字extends关键字来继承，如果有某个类、数组、对象、方法使用了一个有继承父类的接口，那么这个对象除了要实现使用这个接口本身的规范以外还要实现父接口的一些规范

在这里插入图片描述

接口总结：
  • 接口是一个非常非常好用的一个机制，能够让我们代码更加的健壮，不容易发生一些意想不到的错误
  • 接口种类也不是很多，所以掌握起来并不是很难
  • C#也有接口的概念，如果有其他面向对象语言基础。ts学起来并不是很难
Jimmy雪雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angular_week4_day1_project
03-31
在Angular的第四周第一天项目（"angular_week4_day1_project"）中，我们将深入学习TypeScript，这是一种由Microsoft开发的编程语言，它扩展了JavaScript，为开发者提供了静态类型检查、面向对象特性和其他现代编程...
day20
03-18
在IT行业中，TypeScript是一种广泛使用的强类型、静态类型的编程语言，它是JavaScript的超集，提供了许多高级特性，包括但不限于类型系统、接口、模块、枚举等，旨在提高开发效率和代码质量。"day20"这个标题可能指...
TypeScript最常用的50个API
编码小本
12-27 790
ProgramCreek通过分析GitHub过去两年的开源项目，总结了TypeScript最常用的API。
TypeScript 与组合式 API
klylove的博客
08-15 1271
当使用时，这被称之为“运行时声明”，因为传递给的参数会作为运行时的props选项使用。这被称之为“基于类型的声明”。编译器会尽可能地尝试根据类型参数推导出等价的运行时选项。在这种场景下，我们第二个例子中编译出的运行时选项和第一个是完全一致的。基于类型的声明或者运行时声明可以择一使用，但是不能同时使用。...
TypeScript语法-- 3. 接口interface的定义，实现，继承
Penk的博客
11-17 5622
TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码进行类型限制。 接口可以对普通对象，函数，类进行类型限制！！！
ts接口ajax请求实例
bus_lupe的博客
06-08 4258
interface Config{ type: string; url: string; data?:string; dataType:string; } function ajax(config: Config){ var xhr = new XMLHttpRequet(); xhr.open(config.type, config.url, true); xhr.send(co...
TypeScript 官网API
qq_42838904的博客
08-25 2955
TypeScript 官网API https://www.tslang.cn/docs/home.html
lodge92:Day.js，i18n，Nuxt.js，Strapi，TypeScript，Vuex
03-19
TypeScript保证了代码质量，Nuxt.js负责前端渲染，Day.js处理日期和时间显示，i18n实现了多语言支持，而Strapi作为后端内容管理系统，提供数据接口。Vuex则作为状态管理工具，协调前端组件间的数据流动。这样的技术...
one-day-page
03-11
4. **泛型（Generics）**：TypeScript的泛型允许创建可重用的组件，这些组件可以处理多种数据类型。这在开发通用的工具函数或容器类时特别有用。 5. **接口（Interfaces）**：接口是TypeScript中的一个关键概念，...
Typescript30Day:使用打字稿构建的Javascript 30天挑战
04-13
"TypeScript 30 Day Challenge"是一个旨在帮助开发者深入理解TypeScript，并将其应用于实际JavaScript项目中的系列教程。这个挑战将带你跨越30天，每天学习和实践一个重要的TypeScript概念或技巧。 **第一天：...
TypeScript 模块
01-21
TypeScript 模块 TypeScript 模块的设计理念是可以更换的组织代码。 模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。 两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。 模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 Co
TypeScript真香系列——接口篇
油墨香^-^的博客
08-29 764
你会发现我都在接口的前面加了一个I，算是个人习惯吧，之前一直写 java 代码，另一方面tslint要求，否则会报一个警告，是否加看个人。看上面的接口中，我们定义了page}page: 1,},},};普通属性上面的page就是普通属性，如果有一个对象是该接口类型，那么必须包含对应的普通属性。就不具体说了。可选属性默认情况下一个变量（对象）是对应的接口类型，那么这个变量（对象）必须实现接口中所有的属性和方法。...
Vue 2.5 & TypeScript: API 参数中的类型推导
weixin_33908217的博客
10-15 1168
在刚刚发布的 Vue.js 2.5 中加强了对 TypeScript 的支持，TypeScript 可以直接推导出 Vue.extend(options), Vue.component(options) 和 new Vue(options) 等 API 的参数中的 this 的类型，无需依赖 vue-class-component 这样的 decorator。 这个功能依赖于 TypeScrip...
typescript学习之路(五) —— ts的接口
北极那企鹅丶
03-25 2106
项目开发中，我们会遇到这样的需求。就是我们需要开发一个函数或者一个插件或者库等等，需要调用者调用时传入指定的参数，比如我们需要的是string类型的或者对象类型的，再或者是对象类型的且里面的属性必须包含什么属性等，如果说我们自己的约定属于彼此之间的约定，那么接口就是ts为你的代码定义的强制契约。 文章目录一般情况下的我们定义的约定接口初探可选属性只读属性额外的属性检查使用类型断言使用类型兼容使...
typescript中使用接口表示函数
洛神赋
08-13 3277
/** * 使用接口表示函数类型，我们需要给接口定义一个调用签名。 * 一个只有参数列表和返回值类型的函数定义。 */ interface SearchFunc { (source: string, substring: string): boolean; } let mysearch: SearchFunc; //函数的参数名不需要与接口里定义的名字相匹配 mysearch = ...
typescript接口,一般用于实现标准，规定，限制
litter_lj的博客
03-16 737
1.属性接口 //属性接口 interface FullName { firstName: string; secondName: string; } function getName(name: FullName): void { console.log(`${name.firstName} -- ${name.secondName}`); } getName({ firstNa...
TypeScript：接口
本以为成功很简单，没想到活成普通人都需拼尽全力！
03-30 2002
在TypeScript中，有一个重要的内容，接口。提起来接口这个词，我的脑海中就会想起来和后端人员对接时使用的api接口，后端人员在接口文档上，写上请求的方式，请求的api，请求的参数等等；但是此接口非彼接口，但是含义是相近的！ 后端人员规定了我需要传递的字段名称，字段类型，一旦前台传递的参数类型不对应，后台代码就会告诉你，我想要的是一个数字，但是你却传递了一个字符串这种错误，相信我们都遇到过！ 那么在TypeScript中的接口，其实也是起到了这么的一个作用！ TypeScript的核心原则之一是对
typescript定义后端接口,typescript 接口定义
神经网络爱好者
09-14 469
在里进行全局注册Vue.prototype.funcName=function(){}在所有组件里可调用this.funcName();以上这篇vue自定义全局方法,在组件里面的使用介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
基于typeScript请求服务端的js-api-sdk统一封装思路
u014739462的博客
05-07 3713
项目地址在前端开发中像服务端请求数据是非常重要的，特别是在复杂的项目中对后台的api接口进行友好的调用是非常重要的（这里不得不说typeScript写起代码的体验是很爽的）。基本思路，可以想后台一样进行接口封装，比如用户相关的接口一个MemberServices 里面有关于用户所有的api接口 例如getMemberById等，这样尽量语义话的调用。思路如下： (1)首先抽象出一个Api请求
typescript 定义全局接口
最新发布
06-11
要在 TypeScript 中定义全局接口，可以使用 `declare` 关键字来声明一个全局的接口类型。例如，我们可以声明一个名为 `GlobalInterface` 的全局接口，如下所示： ```typescript declare global { interface GlobalInterface { name: string; age: number; email: string; } } ``` 上面的代码中，我们使用 `declare global` 来声明一个全局作用域，并在其中定义了一个名为 `GlobalInterface` 的接口，该接口包含了三个成员：`name`、`age` 和 `email`。 接下来，我们就可以在 TypeScript 的任何地方使用这个接口了。例如，我们可以定义一个变量，类型为 `GlobalInterface`，如下所示： ```typescript let user: GlobalInterface = { name: 'John Doe', age: 30, email: 'johndoe@example.com' }; ``` 上面的代码中，我们定义了一个名为 `user` 的变量，类型为 `GlobalInterface`，并初始化了它的值。这样，我们就可以使用 `GlobalInterface` 接口来定义全局的类型了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值