当前位置: 首页 > 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…...

OpenClaw多模态飞书助手:Qwen3-VL:30B实战指南

OpenClaw多模态飞书助手&#xff1a;Qwen3-VL:30B实战指南 1. 为什么我们需要多模态飞书助手&#xff1f; 去年夏天&#xff0c;我负责一个跨部门协作项目时&#xff0c;每天要处理上百条飞书消息和几十份文档。最头疼的是同事发来的截图——有时是数据图表&#xff0c;有时是…...

SystemVerilog进阶:深入探索随机化约束的高级应用

1. 从基础到进阶&#xff1a;SystemVerilog随机化约束的核心价值 在芯片验证领域&#xff0c;随机化验证已经成为提高验证效率的黄金标准。SystemVerilog的随机化约束机制&#xff0c;就像给验证工程师配备了一个智能数据生成器&#xff0c;可以自动产生符合设计规范的测试场景…...

避开这些坑!群晖+acme.sh申请Let’s Encrypt证书的完整指南

群晖NAS上零踩坑申请Lets Encrypt证书的终极实践手册 每次看到浏览器地址栏那个刺眼的"不安全"提示就浑身难受&#xff1f;作为群晖深度用户&#xff0c;我花了三个周末时间踩遍了所有证书申请的坑。从idn指令缺失到nss验证失败&#xff0c;从API调用超时到证书自动更…...

2026 LinkedIn账号安全机制分析与稳定运营实践

随着 LinkedIn 风控机制的不断完善&#xff0c;账号的登录环境、行为模式以及网络条件&#xff0c;都会直接影响账号的稳定性。对于需要长期运营账号的用户来说&#xff0c;理解平台的风控逻辑&#xff0c;比单纯增加操作频率更为重要。本文将从使用场景、常见环境问题、账号行…...

通用GUI编程技术——Win32 原生编程实战(十八)——GDI 设备上下文(HDC)完全指南

通用GUI编程技术——Win32 原生编程实战&#xff08;十八&#xff09;——GDI 设备上下文&#xff08;HDC&#xff09;完全指南 前面一系列文章我们聊了对话框、控件、资源这些内容&#xff0c;我们的窗口已经能够显示各种控件了。但你可能已经发现了一个问题&#xff1a;我们所…...

Go语言的context.WithCancel取消信号传播与资源清理在分布式系统中的协调

Go语言的context.WithCancel取消信号传播与资源清理在分布式系统中的协调 在分布式系统中&#xff0c;任务的取消与资源清理是确保系统稳定性和高效性的关键挑战。Go语言通过context包提供了优雅的解决方案&#xff0c;尤其是context.WithCancel机制&#xff0c;能够实现跨组件…...

Android开机向导定制实战:从源码分析到禁用状态栏的隐藏技巧

Android开机向导深度定制&#xff1a;从源码解析到状态栏控制实战 第一次接触Android开机向导定制时&#xff0c;我被这个看似简单却隐藏复杂逻辑的系统组件深深吸引。作为设备初始化的第一道门户&#xff0c;开机向导不仅承载着用户体验的第一印象&#xff0c;更是厂商品牌展示…...

别再让电费偷偷溜走!用智能时间开关改造家里的热水器和空调(附保姆级选购指南)

别再让电费偷偷溜走&#xff01;用智能时间开关改造家里的热水器和空调&#xff08;附保姆级选购指南&#xff09; 每到月底收到电费账单时&#xff0c;那种"钱不知不觉就溜走"的感觉总是让人心疼。特别是热水器和空调这两大"电老虎"&#xff0c;它们往往…...

Matlab散点图进阶:如何用颜色、大小和形状搞定六维数据可视化(附完整代码)

Matlab散点图进阶&#xff1a;如何用颜色、大小和形状搞定六维数据可视化&#xff08;附完整代码&#xff09; 在数据分析领域&#xff0c;我们常常需要处理包含多个维度的复杂数据集。传统的二维或三维图表已经无法满足这类数据的可视化需求。本文将深入探讨如何利用Matlab的s…...

SpringBoot3 + JetCache实战:如何用两级缓存把接口性能提升10倍?

SpringBoot3 JetCache实战&#xff1a;高并发场景下的缓存架构设计与性能优化 在电商秒杀、实时数据查询等高并发场景中&#xff0c;传统数据库直接承受流量冲击往往会导致系统崩溃。去年双十一期间&#xff0c;某头部电商平台通过多级缓存架构成功扛住了每秒百万级的查询请求…...