TS入门笔记——TS接口进阶详解

一、为什么需要接口?

let obj:object; // 定义了一个只能保存对象的变量
// obj = 1;
// obj = "123";
// obj = true;
obj = {name:'lnj', age:33};
console.log(obj);

之前我们已经介绍了用这种方式定义一个ts的对象,但是这样定义内部的属性并没有被限制,意义是不大的。
为了进一步定义对象内的各种属性,就产生了接口。

二、什么是接口类型?

和number,string,boolean,enum这些数据类型一样,接口也是一种类型, 也是用来约束使用者的,他的作用是进一步定义对象内的各种属性。

三、基本用法

// 需求: 要求定义一个函数输出一个人完整的姓名, 这个人的姓必须是字符串, 这个人的名也必须是一个字符interface FullName{firstName:stringlastName:string
}let obj = {firstName:'Jonathan',lastName:'Lee'// lastName:18 会报错
};//{firstName, lastName}使用了解构赋值
function say({firstName, lastName}:FullName):void {console.log(`我的姓名是:${firstName}_${lastName}`);
}
say(obj);

四、属性数量不确定时的定义方法

如果使用接口来限定了变量或者形参, 那么在给变量或者形参赋值的时候, 赋予的值就必须和接口限定的一模一样才可以, 多一个或者少一个都不行。

但是开发中我们往往可能会遇到少一个或者多一个的场景。

(1)少一个,用可选属性

可选属性意如其名,用法也简单,只需要在属性名字后面加一个?即可。

// 需求: 如果传递了middleName就输出完整名称, 如果没有传递middleName, 那么就输出firstName和lastName
interface FullName{firstName:stringlastName:stringmiddleName?:string[propName:string]:any
}function say({firstName, lastName, middleName}:FullName):void {// console.log(`我的姓名是:${firstName}_${lastName}`);if(middleName){console.log(`我的姓名是:${firstName}_${middleName}_${lastName}`);}else{console.log(`我的姓名是:${firstName}_${lastName}`);}
}say({firstName:'Jonathan', lastName:'Lee', middleName:"666"});
say({firstName:'Jonathan', lastName:'Lee'});

(2)多一个,用索引签名

用于描述那些“通过索引得到”的类型,比如arr[10]或obj["key"]。

意思有点抽象,可以大概理解为是在定义对象中key(propName)和value的数据结构,后续对象中的属性,只要key和value满足索引签名的限定即可, 无论有多少个都无所谓。

interface FullName {[propName:string]:string
}
let obj:FullName = {// 注意点: 只要key和value满足索引签名的限定即可, 无论有多少个都无所谓firstName:'Jonathan',lastName:'Lee',// middleName:false // 报错// 无论key是什么类型最终都会自动转换成字符串类型, 所以没有报错// false: '666'
}interface stringArray {[propName:number]:string
}let arr:stringArray = {0:'a',1:'b',2:'c'
};// let arr:stringArray = ['a', 'b', 'c'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

五、接口的继承

TS中的接口和JS中的类一样是可以继承的

interface LengthInterface {length:number}interface WidthInterface {width:number}interface HeightInterface {height:number}interface RectInterface extends LengthInterface,WidthInterface,HeightInterface {// length:number// width:number// height:numbercolor:string}let rect:RectInterface = {length:10,width:20,height:30,color:'red'}

六、函数接口

函数本质上是一个特殊的对象,我们也可以用接口来定义函数的参数和返回值。

interface SumInterface {(a:number, b:number):number
}// 建议使用这种写法
let sum:SumInterface= function(x,y) {return x + y;
}let res = sum(10, 20);console.log(res);

ts入门笔记目录:

TS入门笔记1——TS的类型声明

TS入门笔记2——TS接口进阶详解

TS入门笔记3——TS中的函数声明

TS入门笔记4——TS的类型断言(解释型类型转换)

TS入门笔记5——TS的泛型

TS入门笔记6——ts中的声明文件、模块、命名空间

记录知识,传递快乐~
如果我的总结对你有帮助,请给我点个赞,你的鼓励是我持续记录的一大动力~
如果文章中有错误,请多包涵,欢迎在评论中指出~

2接口详解_TS入门笔记2——TS接口进阶详解相关推荐

  1. ROS入门笔记(七):详解ROS文件系统

    ROS入门笔记(七):详解ROS文件系统 文章目录 01 Catkin编译系统 1.1 Catkin特点 1.2 Catkin工作原理 1.3 使用`catkin_make`进行编译 02 Catki ...

  2. python编程入门与案例详解pdf-Python入门之三角函数sin()函数实例详解

    描述 sin()返回的x弧度的正弦值. 语法 以下是sin()方法的语法: importmath math.sin(x) 注意:sin()是不能直接访问的,需要导入math模块,然后通过math静态对 ...

  3. 小白入门笔记:CMake编译过程详解

    作者丨Sky Shaw@知乎 点击进入->3D视觉工坊学习交流群 1.你好,CMake 1.1 CMake是什么? 我觉得针对这个问题最简单(但不是最正确的)的回答应该是:"CMake ...

  4. java接口文件定义类_Java入门笔记(四)类、包和接口

    一.类 class public class Person{ String name; int age; Person(String name, int age){ this.name = name; ...

  5. ts入门笔记——ts类型声明和类型断言

    最近玩csdn比较少,欢迎关注我的掘金:杨灿就是杨火山 简单快速上手ts的学习路径: 一.熟悉掌握熟悉的强类型定义,初步学习编写强类型代码. 学习ts的声明变量类型,能够初步编写强类型代码: 学习ts ...

  6. [Java入门笔记] 面向对象编程基础(二):方法详解

    2019独角兽企业重金招聘Python工程师标准>>> 什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能 ...

  7. PyTorch入门笔记-matmul函数详解

    PyTorch入门笔记-matmul函数详解 本文转载自:PyTorch入门笔记-matmul函数详解 - 腾讯云开发者社区-腾讯云 (tencent.com) 41409)]

  8. Android进阶笔记:Messenger源码详解

    Messenger可以理解为一个是用于发送消息的一个类用法也很多,这里主要分析一下再跨进程的情况下Messenger的实现流程与源码分析.相信结合前面两篇关于aidl解析文章能够更好的对aidl有一个 ...

  9. Spring Cloud Eureka 入门 (三)服务消费者详解

    2019独角兽企业重金招聘Python工程师标准>>> 摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! "真正的进步 ...

最新文章

  1. 你说你懂互联网,那这些你知道么?
  2. 海量数据处理相关面试问题
  3. 腾讯云首次公开边缘计算网络开源平台,拥抱5G与万物互联
  4. 【MySQL】基于MySQL的SQL增删改查实战演练
  5. 无重复字符串的最长子串
  6. RedHat 7配置keepalived+LVS实现高可用的Web负载均衡
  7. 微信公众平台开发教程(二) 基本原理及消息接口
  8. Iocomp控件 Iocomp安装教程 Crack 下载
  9. 三天研读《中兴电路设计规范》精华总结
  10. 5、自写<VBA函数>关于字体与单元格颜色、大小的函数
  11. 2020年 显卡天梯图 / Top Graphics Ranking
  12. 【日常计算机问题】装系统的烧录的U盘恢复方法
  13. PHPExcel导出出现白页
  14. 【统计学】分类数据分析 相关分析 方差分析 比较 研究思路 spss
  15. Windows10的虚拟桌面
  16. JavaScript知识点整理(十三)- DOM -(2)操作元素
  17. 算法(5)动态规划法
  18. 云计算究竟有哪些优势
  19. MakeCert CAB压缩 Signcode
  20. 爬取猫眼电影排行——第一版

热门文章

  1. 前端传值后端接收不到_解决vue get请求传参后端接收不到参数值(java sptingboot)
  2. android头部固定悬停,Android开发上滑悬停且头部可刷新
  3. scala maven plugin
  4. 什么插件格式化文档_推荐15款IntelliJ IDEA 神级插件
  5. 日照油库系统推荐_生产车间用什么地坪好?这款地面硬化系统使用一年后获车间主任点赞:太省心!| 项目回访...
  6. java paint 怎么用_java如何使用paint方法画图
  7. 域控 批量导入 用户_kerberos域用户提权分析
  8. oracle 数据 时间间隔,如何掌握 Oracle 中的时间间隔型数据
  9. 汇编访问计算机端口,汇编总结(2):中断、端口、直接定址表
  10. 四十七、SQL 语法总结