前端 TS 快速入门之二:接口

1. 接口有什么用

通过 interface 定义接口。

检测对象的属性,不会去检查属性的顺序,只要相应的属性存在并且类型也是对的就可以。

interface IPerson {name: string;age: number;
}
function say(person: IPerson): void {console.log(`my name is ${person.name}, and age is ${person.age}`);
}
let me = {name: "funlee",age: 18,
};
say(me); // my name is funlee, and age is 18

2. 可选属性

属性后面加一个 ? 符号,表示该属性可选。

interface IPerson {name: string;age: number;// love 可选love?: string;
}

3. 只读属性

属性名前加 readonly,表示该属性只读。

interface IPerson {// name 只读readonly name: string;age: number;love?: string;
}
let me: IPerson = {name: "funlee",age: 18,
};
// name 不允许被赋值
me.name = "new name"; // error!

4. 函数接口

接口可以描述函数类型,它定义了函数的参数列表和返回值类型,参数列表里的每个参数都需要名字和类型,函数的参数名不需要与接口里定义的名字相匹配,只需要类型兼容就可以了。

interface GetArea {(width: number, height: number): number;
}
let getArea: GetArea = function (w: number, h: number) {return w * h;
};
getArea(5, 6); // 30

 5. 继承接口

一个接口可以继承多个接口,创建出多个接口的合成接口,如:

interface Shape {color: string;
}
interface PenStroke {penWidth: number;
}
interface Square extends Shape, PenStroke {sideLength;
}
const square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

 6. 混合类型

让对象同时作为函数和对象使用,并带有额外的属性,如:

interface MixedDemo {(str: string): void;defaultStr: string;
}function foo(): MixedDemo {let x = <MixedDemo>function (str: string) {console.log(str);};x.defaultStr = "Hello, world";return x;
}let c = foo();
c("This is a function"); // 'This is a function'
c.defaultStr; // 'Hello, world'

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/113744.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch 8.9 Master节点处理请求源码

大家看可以看ElasticSearch源码&#xff1a;Rest请求与Master节点处理流程&#xff08;1&#xff09; 这个图非常好&#xff0c;下午的讲解代码在各个类和方法之间流转&#xff0c;都体现这个图上 一、Master节点处理请求的逻辑1、节点(数据节点)要和主节点进行通讯&#xff0…

C语言常量

常量的概念 常量&#xff1a; 在程序运行期间不可以该改变的量 作用&#xff1a; 用于记录程序中不可更改的数据 常量的五种表现形式 语法&#xff1a; 1、数值常量&#xff08;整数型常量&#xff08;整数&#xff09;、实数型常量&#xff08;小数&#xff09;&#xff09…

C++中的智能指针:更安全、更便利的内存管理

在C++编程中,动态内存管理一直是一个重要且具有挑战性的任务。传统的C++中,程序员需要手动分配和释放内存,这往往会导致内存泄漏和悬挂指针等严重问题。为了解决这些问题,C++11引入了智能指针(Smart Pointers)这一概念,它们是一种高级的内存管理工具,可以自动管理内存的…

【数据结构】线性表(四)双向链表的各种操作(插入、删除、查找、修改、遍历打印)

目录 线性表的定义及其基本操作&#xff08;顺序表插入、删除、查找、修改&#xff09; 四、线性表的链接存储结构 1. 单链表 2. 循环链表 3. 双向链表 a. 双向链表节点结构 b. 创建一个新的节点 c. 在链表末尾插入节点 d. 在指定位置插入节点 e. 删除指定位置的节点…

LeetCode 2172. 数组的最大与和【状压DP,记忆化搜索;最小费用最大流】2392

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

Juniper防火墙SSG-140 session 过高问题

1.SSG-140性能参数 2.问题截图 3.解决方法 &#xff08;1&#xff09;通过telnet 或 consol的方法登录到防火墙&#xff1b; &#xff08;2&#xff09;使用get session 查看总的session会话数&#xff0c;如果大于300 一般属于不正常情况 &#xff08;3&#xff09;使用get…

Python的编辑器VScode中文设置和Hello World

Python的编辑器 个人比较常用的用于Python开发的编辑器是VScode&#xff0c;大概的原因应该是免费&#xff0c;且便于项目文件的管理。 VScode中文设置插件及使用方法 VScode下载安装好之后&#xff0c;可以在软件左侧的“扩展”中搜索安装一些插件&#xff0c;用于辅助开发…

H5随机短视频滑动版带打赏源码,可封装APP软件或嵌入式观看

H5随机短视频滑动版带打赏源码&#xff0c;可封装APP软件或嵌入式观看&#xff0c;网站引流必备源码&#xff01; 数据来源抖音和快手官方短视频链接&#xff0c;无任何违规内容&#xff01;可自行添加广告等等&#xff01; 手机端完美支持滑动屏幕观看&#xff08;向上或向右…

思维模型 上瘾模型(hook model)

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。你到底是怎么上瘾&#xff08;游戏/抖音&#xff09;的&#xff1f;我们该如何“积极的上瘾”&#xff1f;让我们来一切揭晓这背后的秘密。 1 上瘾模型的应用 1.1上瘾模型的积极应用 1 学…

RT-Thread学习笔记(三):线程管理

线程管理 线程管理相关概念什么是时间片轮转调度器锁线程运行机制线程的五种状态 动态和静态创建线程区别动态和静态创建线程优缺点RT-Thread动态线程管理函数动态创建线程动态删除线程 RT-Thread静态线程管理函数静态创建线程 线程其他操作线程启动线程延时获得当前执行的线程…

四、基本组件

1. Designer设计师 Designer程序是Qt官方推出的专为设计人员使用的UI设计工具&#xff0c;程序员可以使用此工具大幅降低UI设计的代码量。 Designer设计文件的格式是.ui&#xff0c;需要配合同名的头文件与源文件使用。.ui文件通常被称为界面文件&#xff0c;其内部是xml语法的…

微机原理:汇编语言语句类型与格式

文章目录 壹、语句类型1、语句分类2、常用伪代码和运算符2.1数据定义伪指令2.1.1字节定义伪指令DB&#xff08;8位&#xff09;2.1.2字定义伪指令DW&#xff08;16位&#xff09;2.1.3双字节伪指令DD2.1.4 多字节定义DF/DQ/DT&#xff08;了解&#xff09; 2.2 常用运算符2.2.1…

【数据库】SQL 过滤数据

过滤数据 简单过滤where 子句操作符检查单个值范围值检擦空值检查 高级过滤多个过滤条件求值顺序IN 操作符NOT 操作符 在 s q l sql sql 语句中&#xff0c;通过 WHERE 子句指定搜索条件进行过滤。 简单过滤 包含&#xff1a;WHERE&#xff0c;BETWEEN&#xff0c;IS NULL&a…

面向对象与面向过程讲解

目录 简介 面向过程编程&#xff08;Procedural Programming&#xff09; 什么是面向过程编程&#xff1f; 特点&#xff1a; 面向对象编程&#xff08;Object-Oriented Programming&#xff09; 什么是面向对象编程&#xff1f; 特点&#xff1a; 面向对象 vs. 面向过程…

学习人工智能

在线课程 优达学城 当斯坦福大学讲师 Sebastian Thrun 和 Peter Norvig 将他们的课程“人工智能概论”免费放到网上时&#xff0c;Udacity 开始了在线学习的实验。从那时起&#xff0c;它就受到了巨大的欢迎&#xff08;来自 190 多个国家的 160,000 名学生&#xff09;&#x…

[java进阶]——异常详解,try catch捕获异常,抛出异常

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 一、异常的体系结构 二、处理异常的本质 三、异常处理的三种方式 3.1虚拟机jvm处理(默认) 3.2 try catch捕获异常 3.3抛出异常 3.4finally关键字 四、自定义异常 五、总结 一、异常的体系结构 分析&#…

【uniapp】proxy 代理切换至线上测试地址调试接口

本地测试地址形如&#xff1a;http://192.168.124.x:xxxx 线上测试地址形如&#xff1a;https://xxxx.xxxx.com 使用线上地址之后需要修改配置项 secure 为 true const constant require(./src/utils/constant) module.exports {devServer: {proxy: {/api: {target: constan…

Node-EventEmitter的用法

题记 EventEmitter的用法&#xff0c;以下是详细过程和代码。 Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列。 Node.js 里面的许多对象都会分发事件&#xff1a;一个 net.Server 对象会在每次有新连接时触发一个事件&#xff0c; 一个 fs.readStream 对象会…

[python-大语言模型]从浅到深一系列学习笔记记录

整体学习路径参照&#xff1a;点这里 python-机器学习-深度学习-大语言模型-数据开发 面向开发者的LLM入门提示原则 面向开发者的LLM入门 学习链接&#xff1a; github地址&#xff1a;https://github.com/datawhalechina/prompt-engineering-for-developers 在线阅读地址&…

【LeetCode】145. 二叉树的后序遍历 [ 左子树 右子树 根结点]

题目链接 文章目录 Python3方法一&#xff1a; 递归 ⟮ O ( n ) ⟯ \lgroup O(n) \rgroup ⟮O(n)⟯方法二&#xff1a; 迭代 ⟮ O ( n ) ⟯ \lgroup O(n) \rgroup ⟮O(n)⟯方法三&#xff1a; Morris ⟮ O ( n ) 、 O ( 1 ) ⟯ \lgroup O(n)、O(1) \rgroup ⟮O(n)、O(1)⟯写…