当前位置: 首页 > news >正文

「TypeScript」TypeScript入门练手题

前言

TypeScript 越来越火,现在很多前端团队都使用它,因此咱们前端码农要想胜任以后的前端工作,就要更加熟悉它。
在这里插入图片描述

入门练手题

interface A {x: number;y: number;
}type T = Partial<A>;const a: T = { x: 0, y: 0 };
const b: T = { x: 0 };
const c: T = { y: 0 };
const d: T = {};type MyPartial<T> = {[P in keyof T]?: T[P];
};interface B {x?: number;y: number;
}type T0 = Required<B>;const a0: T0 = { x: 0, y: 0 };type MyRequired<T> = {[P in keyof T]-?: T[P];
};interface C {x?: number;y: number;
}type T1 = Readonly<C>;const a1: T1 = { x: 0, y: 0 };// a1.x=1type MyReadonly<T> = {readonly [P in keyof T]: T[P];
};interface Cat {age: number;gender: string;
}type CatName = "seraph" | "ashe" | "ahri";const cats: Record<CatName, Cat> = {seraph: { age: 10, gender: "male" },ashe: { age: 5, gender: "female" },ahri: { age: 16, gender: "female" },
};/* 在 TypeScript 中,当你看到 K extends keyof any 这样的表达时,
它的作用是约束类型 K 为一个有效的类型,可以作为对象的键。
这里的 keyof any 是指所有可能的 JavaScript 值的键的联合类型。
简单来说,keyof any 通常等价于 string | number | symbol ,
因为在 JavaScript 中,对象的键可以是这三种类型。
你可以使用 string,number 或者 symbol 作为对象属性的键。 */type MyRecord<K extends keyof any, T> = {[P in K]: T;
};interface Todo {title: string;description: string;done: boolean;
}type TodoPreview = Pick<Todo, "title" | "done">;const todo: TodoPreview = {title: "play games",done: false,
};type MyPick<T, K extends keyof T> = {[P in K]: T[P];
};type E0 = Exclude<"a" | "b", "a">;type E1 = Exclude<string | number | (() => void), Function>;type MyExclude<T, U> = T extends U ? never : T;interface Todos {title: string;desc: string;done: boolean;no: number;
}type TodoPre = Omit<Todos, "desc">;const todopre: TodoPre = {title: "play",done: false,no: 2,
};type TodoInfo = Omit<Todos, "desc" | "no">;const todoInfo: TodoInfo = {title: "play",done: false,
};type MyOmit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;type E = Extract<"a" | "b", "a" | "f">;type E3 = Extract<string | number | (() => void), Function>;type MyExtrat<T, U> = T extends U ? T : never;declare function f(args: { a: number; b: string }): void;type P0 = Parameters<() => string>; // []type P1 = Parameters<(s: string) => void>; // [s: string]type P2 = Parameters<<T>(arg: T) => T>; // [arg: unknown]type P3 = Parameters<typeof f>;type MyParameters<T extends (...args: any) => any> = T extends (...args: infer P
) => any? P: never;type R = ReturnType<() => void>;const add = (x: number, y: number): number => {return x + y;
};type R1 = MyReturnType<typeof add>;type MyReturnType<T extends (...args: any) => any> = T extends (...args: any
) => infer R? R: any;

相关文章:

「TypeScript」TypeScript入门练手题

前言 TypeScript 越来越火&#xff0c;现在很多前端团队都使用它&#xff0c;因此咱们前端码农要想胜任以后的前端工作&#xff0c;就要更加熟悉它。 入门练手题 interface A {x: number;y: number; }type T Partial<A>;const a: T { x: 0, y: 0 }; const b: T { …...

k8s 使用Docker和Containerd对比分析

目录 k8s 使用Docker和Containerd对比分析 互动1&#xff1a;docker build构建的镜像和containerd镜像通用吗&#xff1f; 互动2&#xff1a;k8s1.24之前版本和1.24及1.24之后版本区别&#xff1f; k8s 使用Docker和Containerd对比分析 如果你使用Docker作为K8S容器运行时的…...

MySQL 通过 systemd 启动时 hang 住了……

mysqld&#xff1a;哥&#xff0c;我起不来了…… 作者&#xff1a;贲绍华&#xff0c;爱可生研发中心工程师&#xff0c;负责项目的需求与维护工作。其他身份&#xff1a;柯基铲屎官。 爱可生开源社区出品&#xff0c;原创内容未经授权不得随意使用&#xff0c;转载请联系小编…...

pat乙1033-旧键盘打字

1测试点2&#xff1a; 输入的字符串如果为空&#xff0c;要用getline(cin,s)&#xff0c;而不是cin>>s&#xff0c;否则程序做不了 2题目说的如果上键坏了那大写字母打印不了&#xff0c;不是大写转小写打印啦&#xff0c;认真读题 3两个for循环长这样&#xff0c;break…...

Ubuntu安装VScode

Ubuntu安装VScode 前言&#xff1a; 1、Ubuntu安装VScode比较方便 2、我更喜欢source insight 1、获取到linux版本的VScode安装包 VSCode 下载地址是&#xff1a;https://code.visualstudio.com/ 2、得到安装包 3、复制到ubuntu中&#xff0c;使用命令安装 sudo dpkg -i cod…...

c# - - - winform程序四个角添加圆角效果

winform 给窗体四个角添加圆角效果。 在窗体 Load 事件中添加如下代码&#xff1a; // 创建了一个圆角矩形的路径&#xff0c;并将其设置为控件的形状 System.Drawing.Drawing2D.GraphicsPath path new System.Drawing.Drawing2D.GraphicsPath(); int radius 30; path.AddAr…...

Springboot 集成 Consul 实现服务注册中心-05

因为后续很多模块都要用到注册中心&#xff0c;所以此处先实现此模块。 Consul简介 Consul是一个开源的服务发现和配置管理工具&#xff0c;具有跨平台、运行高效等特点。它由HashiCorp公司开发&#xff0c;并使用Go语言编写。Consul主要用于实现分布式系统中的服务发现、健康…...

【软考高项】四十六、项目管理科学计算之运筹学

1、线性规划问题 解题思路&#xff1a; 先把文字转化成图表 最快方式应该是把第一题的4个答案直接代入计算&#xff0c;很快得知X2时利润最大。 A0时&#xff0c;利润5*630 A2时&#xff0c;利润2*25*634 A4时&#xff0c;利润4*23*523 A6时&#xff0c;利润4*2(因为甲的…...

使用 Python 和 OpenCV 进行实时目标检测的详解

使用到的模型文件我已经上传了&#xff0c;但是不知道能否通过审核&#xff0c;无法通过审核的话&#xff0c;就只能 靠大家自己发挥实力了&#xff0c;^_^ 目录 简介 代码介绍 代码拆解讲解 1.首先&#xff0c;让我们导入需要用到的库&#xff1a; 2.然后&#xff0c;设…...

Android build.prop生成过程源码分析

Android的build.prop文件是在Android编译时刻收集的各种property【LCD density/语言/编译时间, etc.】&#xff1b;编译完成之后&#xff0c;文件生成在out/target/product/<board【OK1000】>/system/目录下&#xff1b;在Android运行时刻可以通过property_get()[c/c域] …...

计算机网络教材——谢希仁教材与配套PPT课件和《计算机网络——自顶向下方法》

教材链接: https://pan.baidu.com/s/1MUkgTVNMvhFdkGxAd0U7Ew?pwdn3g4 提取码: n3g4 ppt资源&#xff1a;课程包列表 (51zhy.cn) 计算机网络——自顶向下方法&#xff08;资源在下面的评论区里&#xff09;&#xff1a;计算机网络自顶向下方法第7版中文PDF习题参考 - 哔哩哔…...

mysql 离线安装

package download mysql https://dev.mysql.com/downloads/mysql/ libaio http://mirror.centos.org/centos/7/os/x86_64/Packages/libaio-0.3.109-13.el7.x86_64.rpm 根据自己服务器选择下载对应的安装包及依赖 删除本机自带mysql相关 # 首先排查服务器自身是否有安装对应m…...

【C++】 string类:应用与实践

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…...

巩固学习7

正则表达式 就是用来找到符合模式的字符串&#xff0c;这些模式包括&#xff1a;是什么字符&#xff0c;重复多少次&#xff0c;在什么位置&#xff0c;有哪些额外的约束 找某个字符串 import re text身高:178 体重:168 学号:123456 密码:9527 #在Python中&#xff0c;r前缀用…...

Android 右键 new AIDL 无法选择

提示 (AIDL File)Requires setting the buildFeatures.aidl to true in the build file&#xff09; 解决方式&#xff1a; 在app的build.gradl中 adnroid{} 添加&#xff1a; buildFeatures{aidl true}...

使用Springboot整合Elasticsearch

全文搜索引擎 全文搜索引擎是目前广泛应用的主流搜索引擎&#xff0c;也称为全文检索。它的工作原理是计算机索引程序通过扫描文章中的每一个词&#xff0c;对每一个词建立一个索引&#xff0c;指明该词在文章中出现的次数和位置&#xff0c;当用户查询时&#xff0c;检索程序…...

Vue3+Element+TS动态菜单+按钮权限控制实现探索

1.动态获取权限并根据获取权限转换成相对应的router 根据请求获取菜单数据&#xff0c;对菜单数据进行转换&#xff0c;分别进行下面几步&#xff1a; /*** 组件地址前加斜杠处理*/ export function addSlashToRouteComponent(routeList: AppRouteRecordRaw[]) {routeList.fo…...

五款公司源代码加密软件推荐|代码防泄密解决方案

在当今数字化的世界中&#xff0c;源代码的泄露无疑是一场灾难。对于依赖加密软件保护关键信息的企业和个人来说&#xff0c;这种泄露不仅可能导致数据失窃&#xff0c;还可能损害企业的声誉和客户的信任。面对这种严峻的形势&#xff0c;我们迫切需要一种全面而有效的加密软件…...

【spring】Security 密码加密算法

Spring Security 提供了多种密码加密算法&#xff0c;用于在存储用户密码时进行加密&#xff0c;以增强安全性。 查看org.springframework.security.crypto.factory.PasswordEncoderFactories 以下是一些常用的密码加密算法&#xff1a; BCryptPasswordEncoder&#xff1a; 这…...

IO系列(一) -一文带你读懂 java 中的IO流!

一、摘要 说到 IO&#xff0c;相信大家都不陌生&#xff0c;英文全称&#xff1a;Input/Output&#xff0c;即输入/输出&#xff0c;通常指数据在内部存储器和外部存储器或其他周边设备之间的输入和输出。 比如我们常用的SD卡、U盘、移动硬盘等等存储文件的硬件设备&#xff…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...