TypeScript技能总结(三)

typescript是js的超集,目前很多前端框架都开始使用它来作为项目的维护管理的工具,还在不断地更新,添加新功能中,我们学习它,才能更好的在的项目中运用它,发挥它的最大功效

//泛型 => 参数和返回值类型相同

//泛型的声明方式:
//语法:在函数名称后面添加<>,里面添加类型变量,比如下面T
//类型变量T,是一种特殊类型的变量,它处理类型而不是值
//该类型变量相当于一个类型容器,能够捕获用户提供的类型(具体是什么类型,由用户调用该函数时指定)
//因为T是类型,因此可以将其作为函数参数和返回值的类型,表示参数和返回值具有相同的类型
//变量类型type,可以是任意合法的变量名称

function id<T>(name: T): T {return name
}let num = id<number>(10)
let str = id<string>('a')
//调用的时候可以省略类型<>
let num1 = id(200)

//泛型约束
//number上就没有length属性
//此时就需要为泛型添加约束来收缩类型(缩窄类型取值范围)
//1.指定更加具体的类型

// function getId<T>(value: T): T {//之类会报错
//     console.log(value.length)
//     return value
// }// getId('zzzzzzzzz')
// getId(333333)function getId<T>(value:T[]): T[] {console.log(value.length)return value
}

//2.添加约束,是只最类型变量T进行约束

interface ILength {length:number
}
//该约束表示,传入的类型必须有length属性
function getIds<T extends ILength>(value:T):T {console.log(value.length)return value
}getIds<string>('11111111111111')
getIds([1,2,3,4,54])//错误演示
getIds(10)

//类型变量可以有多个,并且类型变量之间还可以相互约束
//keyof后面接收对象类型,生成键名,不是接收对象值

function getProps<T, K extends keyof T>(obj: T, key: K) {return obj[key] 
}let obj = {name: 'gaofeng',age:20
}getProps(obj, 'name')
getProps(obj, 'age')
getProps(18,'toFixed')//错误演示
getProps(obj, 'sex')
type c = keyof obj

//泛型接口

interface IdFunc<T>{ID: (value: T) => Tids: () => T[]
}let obj: IdFunc<number> = {ID(value) {return value},ids() {return []}
}obj.ID(1111)
```js//泛型数组
```js
const arr = ['1', '2']
arr.forEach

//泛型类

class Foo<T>{defaultValue: Tadd: (x: T, y: T) => T constructor(value: T) {this.defaultValue = value}
}
// const myNums = new Foo<number>(200)
const myNums = new Foo(200)myNums.defaultValue = 40
myNums.add(10,20)

//泛型工具类
//Partial 将所有属性设置为可选,构建出一个新的类型
//Readonly 将所有的属性设置为只读,构建出一个新的类型
//Pick 从Type中选择一组属性来构造新的类型
//Record构造一个对象类型,属性键为对象类型keyskeys,属性类型为Type

interface Props {id: string,children:number[]
}//错误演示let obj: Props = {id: '11111'//此处没加chichildren属性会报错
}type PartialProps = Partial< Props >//这里就不会报错
let obj2: PartialProps = {id:'222222222'
}type ReadonlyProps = Readonly<Props>let obj3: ReadonlyProps = {id: 'xxxxxxx',children:[22222]
}
//这里就会报错,不能修改
obj3.id = '44444444444'interface PickType {id: stringtitle: stringchildren:number[]
}type PickProps = Pick<PickType, 'id' | 'title'>let obj4: PickProps = {id: '1111111',title: 'hahahaha',
}type RecordObj = Record<'a' | 'b' | 'c', string[]>let obj6: RecordObj = {a: ['a'],b: ['c'],c: ['jjjj']
}

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

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

相关文章

Java课设--学生信息管理系统(例1)

文章目录 前提一、运行效果二、Text实现类三、Manage选择类四、StudentWay学生方法类五、StudnetSql数据库类 前题 例1为无使用GUI图形界面&#xff0c;例2使用GUI图形界面&#xff01; 首先自己的JDBC驱动已经接好了&#xff0c;连接自己的数据库没有问题。连接数据库可以看…

《吐血整理》高级系列教程-吃透Fiddler抓包教程(33)-Fiddler如何抓取WebSocket数据包

1.简介 本来打算再写一篇这个系列的文章也要和小伙伴或者童鞋们说再见了&#xff0c;可是有人留言问WebSocket包和小程序的包不会抓&#xff0c;那就关于这两个知识点宏哥就再水两篇文章。 2.什么是Socket&#xff1f; 在计算机通信领域&#xff0c;socket 被翻译为“套接字…

物联网||不一样的点灯实验(2)|通过使用CMSIS库函数实现点灯实验-学习笔记(12)

文章目录 通过使用CMSIS库函数实现点灯实验1 如何使用CMIS库2 如何利用CMSIS库操作IO 两种实现方法的比较课后作业:完整代码&#xff1a;LED.C:test.c:led.h:systick.h:systick.c: 通过使用CMSIS库函数实现点灯实验 1 如何使用CMIS库 #####如何使用此驱动#####[. .](#)启用GPI…

langchain-ChatGLM源码阅读:参数设置

文章目录 上下文关联对话轮数向量匹配 top k控制生成质量的参数参数设置心得 上下文关联 上下文关联相关参数&#xff1a; 知识相关度阈值score_threshold内容条数k是否启用上下文关联chunk_conent上下文最大长度chunk_size 其主要作用是在所在文档中扩展与当前query相似度较高…

RichTextBox基本用法

作用&#xff1a;富文本编辑器&#xff0c;支持多种文本展示 常用属性&#xff1a; 允许显示多行 自动换行 展示滚动条 ScrollBars属性值&#xff1a; 1、Both&#xff1a;只有当文本超过RichTextBox的宽度或长度时&#xff0c;才显示水平滚动条或垂直滚动条&#xff0c;或两…

基于粒子群优化算法的配电网光伏储能双层优化配置模型[IEEE33节点](选址定容)(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f308;4 Matlab代码、数据、讲解 &#x1f4a5;1 概述 由于能源的日益匮乏&#xff0c;电力需求的不断增长等&#xff0c;配电网中分布式能源渗透率不断提高&#xff0c;且逐渐向主动配电网方…

掌握Java排序算法:实现主流排序方法与性能对比

一&#xff0c;C语言&#xff0c;主流的排序方法介绍 当谈论主流的排序方法时&#xff0c;通常指的是在实际应用中表现优秀且被广泛采用的排序算法。以下是常见的主流排序方法及其介绍、时间复杂度、空间复杂度和简单的C语言代码实现&#xff1a; 冒泡排序&#xff08;Bubble S…

nginx使用

1 安装 yum -y install gcc pcre-devel zlib-devel openssl openssl-devel yum install -y wget wget https://nginx.org/download/nginx-1.16.1.tar.gz tar -zxvf nginx-1.16.1.tar.gz cd nginx-1.16.1 ./configure --prefix/usr/local/nginx make make install2 目录 目录说…

【雕爷学编程】Arduino动手做(184)---快餐盒盖,极低成本搭建机器人实验平台2

吃完快餐粥&#xff0c;除了粥的味道不错之外&#xff0c;我对个快餐盒的圆盖子产生了兴趣&#xff0c;能否做个极低成本的简易机器人呢&#xff1f;也许只需要二十元左右 知识点&#xff1a;轮子&#xff08;wheel&#xff09; 中国词语。是用不同材料制成的圆形滚动物体。简…

Mac端口扫描工具

端口扫描工具 Mac内置了一个网络工具 网络使用工具 按住 Command 空格 然后搜索 “网络实用工具” 或 “Network Utility” 即可 域名/ip转换Lookup ping功能 端口扫描 https://zhhll.icu/2022/Mac/端口扫描工具/ 本文由 mdnice 多平台发布

C++中的常量介绍

C中的常量介绍 在C中&#xff0c;常量是一个固定的值&#xff0c;它在程序执行期间不会发生改变。常量可以分为&#xff1a; 1.字面常量 2.符号常量&#xff1a;符号常量是通过标识符来表示的常量值&#xff0c;在程序中使用时要先进行定义。使用符号常量的好处是可以给常量起…

JUnit教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 JUnit是一个Java语言的单元测试框架。它由Kent Beck和Erich Gamma建立&#xff0c;逐渐成为源于Kent Beck的sUnit的xUnit家族中最为成功的一个。 JUnit有它自己的JUnit扩展生态圈。多数Java的开发环境都已经集成了JUnit作为单元测试的工具。JUnit是由 Erich Gamma 和…

【具生智能】前沿思考与总结(DALL-E-Bot TinyBot)

1. DALL-E-Bot DALL-E-Bot: Introducing Web-Scale Diffusion Models to Robotics (robot-learning.uk) **&#xff08;2023-05-04&#xff09;**DALL-E-Bot: Introducing Web-Scale Diffusion Models to Robotics DALL-E-Bot&#xff1a;将网络规模的扩散模型引入机器人 第…

C语言----动态内存分配(malloc calloc relloc free)超全知识点

目录 一.动态内存函数 1.malloc 2.free 3.calloc 4.malloc和calloc的区别 5.realloc 二.动态内存分配的常见错误 1.对null进行解引用操作 2.对动态开辟空间的越界访问 3.对非动态开辟内存使用free释放 4.使用free释放动态开辟内存的一部分 5.对同一块动态内存多次…

物联网|按键实验---学习I/O的输入及中断的编程|读取I/O的输入信号|中断的编程方法|轮询实现按键捕获实验-学习笔记(13)

文章目录 实验目的了解擒键的工作原理及电原理图 STM32F407中如何读取I/O的输入信号STM32F407对中断的编程方法通过轮询实现按键捕获实验如何利用已有内工程创建新工程通过轮询实现按键捕获代码实现及分析1 代码的流程分析2 代码的实现 Tips:下载错误的解决 实验目的 了解擒键…

Leetcode-每日一题【剑指 Offer 09. 用两个栈实现队列】

题目 用两个栈实现一个队列。队列的声明如下&#xff0c;请实现它的两个函数 appendTail 和 deleteHead &#xff0c;分别完成在队列尾部插入整数和在队列头部删除整数的功能。(若队列中没有元素&#xff0c;deleteHead 操作返回 -1 ) 示例 1&#xff1a; 输入&#xff1a; [&…

如何快速做单元测试?

首先写unit test之前&#xff0c;要确认自己的测试遵循两个原则&#xff1a; 1、尽量不要干涉原来的代码。从阅读代码的体验来说&#xff0c;不要让你的测试&#xff08;哪怕是一小段if..else...的代码&#xff09;出现在你准备测试的代码中。 2、代码要只是测试某个class里面…

springboot第34集:ES 搜索,nginx

#用search after解决深分页性能问题 #第一页 GET /bank/_search {"size": 10,"sort": [{"account_number": {"order": "asc"}}] }#第二页 GET /bank/_search {"size": 10,"sort": [{"account_numb…

【WEB逆向】前端全报文加密的分析技巧

由于前端全报文加密&#xff0c;无法从变量的全文搜索来快速定位加密函数对加密参数的定位&#xff08;全局搜索还有个弊病是编码混淆的js也不能全局搜到&#xff0c;需要进一步分析判定混淆的编码形式后再全局搜编码后的变量名&#xff09;&#xff0c;因此可利用xhr断点全局拦…

LLM reasoners 入门实验 24点游戏

LLM reasoners Ber666/llm-reasoners 实验过程 实验样例24games&#xff0c;examples/tot_game24&#xff0c;在inference.py中配置使用代理和open ai的api key。 首先安装依赖 git clone https://github.com/Ber666/llm-reasoners cd llm-reasoners pip install -e .然后…