「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;

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

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

相关文章

数据可视化训练第二天(对比Python与numpy中的ndarray的效率并且可视化表示)

绪论 千里之行始于足下&#xff1b;继续坚持 1.对比Python和numpy的性能 使用魔法指令%timeit进行对比 需求&#xff1a; 实现两个数组的加法数组 A 是 0 到 N-1 数字的平方数组 B 是 0 到 N-1 数字的立方 import numpy as np def numpy_sum(text_num):"""…

互动科技如何强化法治教育基地体验?

近年来&#xff0c;多媒体互动技术正日益融入我们生活的各个角落&#xff0c;法治教育领域亦不例外。步入法治教育基地&#xff0c;我们不难发现&#xff0c;众多创新的多媒体互动装置如雨后春笋般涌现&#xff0c;这些装置凭借前沿的科技手段&#xff0c;不仅极大地丰富了法制…

【RabbitMQ】消息队列 - RabbitMQ的使用记录

目录 一、什么是消息队列 二、什么是RabbitMQ 三、安装RabbitMQ 3.1 安装Erlang环境 3.2 安装RabbitMQ 3.3 打开服务管理界面 3.4 常用命令 四、Python示例代码 4.1 发送数据 4.2 接收数据 一、什么是消息队列 消息队列(Message Queue)是一种用于在应用程序之间传递消…

【数据结构与算法】Huffman编码/译码(C/C++)

实践要求 1. 问题描述 利用哈夫曼编码进行信息通讯可以大大提高信道利用率&#xff0c;缩短信息传输时间&#xff0c;降低传输成本。但是&#xff0c;这要求在发送端通过一个编码系统对待传数据预先编码&#xff1b;在接收端将传来的数据进行译码(复原)。对于双工信道(即可以…

上亿用户面临风险!小米、WPS等知名安卓应用竟藏有“文件覆盖”漏洞

Google Play商店中的几款热门安卓应用程序容易受到与路径遍历相关的漏洞攻击&#xff0c;该漏洞的代号为“Dirty Stream”攻击&#xff0c;恶意应用程序可能会利用此漏洞覆盖易受攻击的应用程序主目录中的任意文件。 微软威胁情报团队的Dimitrios Valsamaras在周三发布的一份报…

elementui- button按钮自适应大小

<el-button type"primary" class"daochu" click"download">导出</el-button> .daochu {width: calc(100vw * 80 / 1920);height: calc(100vw * 30 / 1920);font-size: calc(100vw * 13 / 1920); } 效果图&#xff1a;

做一个属于自己的软件-pyside6快速上手教程

首先环境需要安装python3和pip&#xff0c;软件使用pycharm&#xff0c;安装也都很简单 首先需要安装pyside6,在终端执行&#xff1a; pip install pyside6 然后进入可视化编辑界面 pyside6-designer 进入后创建即可 可以从左侧点击鼠标拉组件进入到中间的工作区&#xff…

android基础-服务

同样使用intent来传递服务 oncreate是服务第一次启动调用&#xff0c;onStartCommand是服务每次启动的时候调用&#xff0c;也就是说服务只要启动后就不会调用oncreate方法了。可以在myservice中的任何位置调用stopself方法让服务停止下来。 服务生命周期 前台服务类似于通知会…

人人都是开发者?Baidu Comate智能代码助手改变你传统的编程之路

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引入一、人人都是开发者二、Baidu Comate 智能编码助手2.1 Baidu Comate 是什么&#xff1f;2.2 Baidu Comate 支持那…

FANUC机器人工具坐标偏移的用法

一、工具坐标偏移的使用场景 在机器人位置不改变的情况下&#xff0c;工业机器人使用默认工具坐标系示教的一系列运动点位&#xff0c;要保持原本点位位置不变的情况下&#xff0c;改变机器人工具坐标的参数&#xff0c;就要用到机器人坐标转化的功能。在FANUC机器人上体现为机…

OSPF综合实验(超详细易懂)(HCIP)

1、拓扑信息 2、需求分析 3、IP规划 4、配置 5、测试 1、拓扑信息 2、需求分析 R4为ISP&#xff0c;其上只能配置I地址&#xff1b; R4与其他所有直连设备间均使用公…

【Linux系列】tail查询使用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

在数字化时代保持企业财务管理的持续技术创新

根据全球市场调查&#xff0c;在现阶段企业如果还不更新自身的商业运作模式&#xff0c;企业的业务可能会一点一点丧失市场竞争力。技术进步是所有行业发展的明显趋势。许多年轻的初创企业具有创新管理思维、精益求精的决策流程和现代化的商业基础设施&#xff0c;这些顺应时代…

转行网络安全的重要建议,助你顺利入门

目录 为什么写这篇文章 为什么我更合适回答这个问题 先问自己3个问题 1.一定要明确自己是否是真喜欢&#xff0c;还是一时好奇。 2.自学的习惯 3.选择网安、攻防这行的目标是什么&#xff1f; 确认无误后&#xff0c;那如何进入这个行业&#xff1f; 1.选择渗透测试集中…

重生奇迹mu烈火剑带什么技能

在重生奇迹mu游戏中&#xff0c;35级是每个职业的分水岭&#xff0c;只要到了35级&#xff0c;三职业都可以学习自己的高级技能&#xff0c;道士可以召唤自己的大狗&#xff0c;法师拥有冰咆哮&#xff0c;战士就是咱们今天要说的烈火剑法&#xff0c;这三种技能都需要玩家自己…

Chromium 调试指南2024 Windows11篇-安装代码编辑器VSCode(三)

1. 前言 在进行Chromium项目的开发和调试之前&#xff0c;安装适合的代码编辑器是至关重要的一步。本文将介绍如何安装Visual Studio Code&#xff0c;这是一个功能强大且广受开发者欢迎的代码编辑器。通过正确安装Visual Studio Code&#xff0c;我们将为后续的Chromium代码编…

张驰咨询六西格玛黑带培训,上海开班,质量精英的摇篮!

一、课程背景与意义 在当今竞争激烈的市场环境中&#xff0c;企业要想立于不败之地&#xff0c;就必须不断提升自身的核心竞争力。而六西格玛作为一种先进的质量管理工具和方法&#xff0c;已经被越来越多的企业所采纳。通过六西格玛黑带培训&#xff0c;学员们可以系统地掌握…

Windows上安装Seata服务

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 Seata 是一款开源的…

IDEA创建SpringBoot项目仅支持JDK17及以上版本的解决方案

背景 IDEA创建SpringBoot项目仅支持JDK17及以上版本的解决方案 原因 由于SpringBoot3.x.x版本的到来&#xff0c;官方称将来17及以上版本将成为主流&#xff0c;但是大多数的项目仍然使用JDK8。 1.解决方案一 将https://start.spring.io/或者http://start.springboot.io/替…

MBR与GPT分区表

文章目录 MBR分区表MBR分区表结构MBR分区表项查看U盘的分区表信息查看系统中所有磁盘的分区类型获取分区表信息 GPT分区表保护性MBRGPT分区表头格式GPT分区表项格式分区类型分区属性分区表项内容 MBR分区表 CHS &#xff1a;磁头&#xff08;Heads&#xff09;、柱面(Cylinder…