「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://xiahunao.cn/news/3031154.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

无人播剧项目怎么做,快手无人播剧全攻略,版权难题一招破解!

相信大家比较关注的问题就是快手无人直播无人播剧到底是不是真的&#xff1f;是不是骗人的&#xff1f;靠不靠谱&#xff1f;是不是真的能赚钱&#xff1f;会不会涉及到版权问题&#xff1f;等等。接下来我就给大家一一做解答&#xff01; 首先关于快手无人播剧是不是骗人的&a…

「网络流 24 题」负载平衡 【费用流】

「网络流 24 题」负载平衡 思路 首先我们从源点向每个仓库连边&#xff0c;容量为 a i a_i ai​&#xff0c;费用为 0 0 0&#xff1b;既然所有仓库物品相同&#xff0c;那么数量一定是总物品的平均值&#xff0c;我们提前算出来 a v g avg avg&#xff0c;然后从每个仓库向…

异常处理/__LINE__ 与 __FILE__ 宏在调试和异常处理中的高级使用

文章目录 概述痛点分析_LINE_ 代码所在行号_LINE_ 直接转为字符串_LINE_ 作为整型数据使用_LINE_标记宏函数的调用位置 _FILE_ 代码所在文件名简单实验不期望 _FILE_ 宏代表全路径 assert 使用了 _FILE_ 和 _LINE_借助TLS技术小结 概述 _LINE_和_FILE_是C/C中的预定义宏&#…

visual studio使用结巴分词

1.安装Jieba.NET的NuGet程序包 2.主程序代码 using JiebaNet.Segmenter; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace JiebaDemo {internal class Program{static void Main(string[] ar…

Qt---窗口系统

一、QMainWindow 1. 菜单栏(最多有一个) QMenuBar *bar MenuBar(); SetMenuBar(bar); QMenu *fileMenu bar->addMenu("文件"); 创建菜单 QAction *newAction fileMenu->addAction("新建"); 创建菜单项 添加分割线fileMenu-…

探索震坤行API:一键解锁高效工业用品采购新纪元!

震坤行是一家专注于工业用品的B2B电商平台&#xff0c;为企业客户提供一站式的工业用品采购服务。虽然震坤行没有直接公开通用的API接口供开发者调用&#xff0c;但通常大型企业或合作伙伴之间可以通过API进行系统集成和数据交互。以下是一个假设性的震坤行API接口调用示例与代…

车辆管理|基于SprinBoot+vue的4S店车辆管理系统(源码+数据库+文档)

4S店车辆管理系统 目录 基于SprinBootvue的4S店车辆管理系统 一、前言 二、系统设计 三、系统功能设计 系统实现 1管理员功能模块 2销售员功能模块 3维修员功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xf…

小猪APP分发:一站式托管服务与高效应用分发解决方案

在当今快节奏的移动应用市场中&#xff0c;开发者不仅要专注于产品的创新与优化&#xff0c;还需面对复杂的应用发布流程与激烈的市场竞争。幸运的是&#xff0c;像小猪APP分发www.ppzhu.net这样的专业平台应运而生&#xff0c;它不仅解决了开发者在应用托管与分发上的诸多痛点…

Visual Studio,第1个hello world,入门C++,分别编译一个可以在Windows和Linux下运行的程序

本人的VxTerm&#xff0c;是在Visual Studio 2022下编写的。 其它的语言工具是不是也可以那么方便的使用&#xff0c;本人并不得而知&#xff0c;至少本人能知道&#xff1a;对于我来说&#xff0c;Visual Studio可以让我觉得C/C语言非常简单&#xff01; 一、安装Visual Stu…

linux性能监控之slabtop

slabtop命令是以实时的方式显示内核slab缓冲区的细节信息&#xff0c;是linux自带的命令 [rootk8s-master ~]# slabtop --helpUsage:slabtop [options]Options:-d, --delay <secs> delay updates-o, --once only display once, then exit-s, --sort <char&…

Maven 插件使用

1.spring-boot-maven-plugin 我们直接使用 maven package &#xff08;maven自带的package打包功能&#xff09;&#xff0c;打包Jar包的时候&#xff0c;不会将该项目所依赖的Jar包一起打进去&#xff0c;在使用java -jar命令启动项目时会报错&#xff0c;项目无法正常启动。…

代码随想录——二叉树的层序遍历Ⅱ(Leetcode107)

题目链接 层序遍历&#xff08;队列&#xff09; /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, Tre…

科技查新中医学科研项目查新点如何确立与提炼?案例讲解

一、前言 医学科技查新包括立项查新和成果查新两个部分&#xff0c;其中医学立项查新&#xff0c;它是指在医学科研项目申报开题之前&#xff0c;通过在一定范围内进行该课题的相关文献检索 ( 可以根据项目委托人的具体要求&#xff0c;进行国内检索或者进行国外检索 ) &#x…

介绍下InnoDB的锁机制?

在InnoDB中&#xff0c;锁可以分为两种级别&#xff0c;一种是共享锁&#xff08;S锁&#xff09;&#xff0c;另一种是排他锁&#xff08;X锁&#xff09;。 共享锁&排他锁 共享锁又称为读锁&#xff0c;由读取操作创建。其他用户可以并发读取数据&#xff0c;但直到所有…

能远程一起观看电影和直播的SyncTV

什么是 SyncTV &#xff1f; SyncTV 是一个允许您远程一起观看电影和直播的程序。它提供了同步观看、剧院和代理功能。使用 SyncTV&#xff0c;您可以与朋友和家人一起观看视频和直播&#xff0c;无论他们在哪里。SyncTV 的同步观看功能确保所有观看视频的人都在同一点上。这意…

C++ BuilderXE 计算程序运行时间精确到毫秒

#include <time.h> // //计算时间 clock_t start,end,dtStart; startclock(); // ProgressBar1->Percent0; // // ProgressBar1->Percenti/DDnum*100; // Application->ProcessMessages(); // //操作完成计时 …

使用Flask构建POST请求的Web应用

文章目录 准备工作创建路由处理POST请求创建表单页面运行应用结论 在Web开发中&#xff0c;处理POST请求是一项常见任务&#xff0c;特别是在构建表单提交、用户注册和数据提交等功能时。Flask是一个简单而强大的Python Web框架&#xff0c;它提供了方便的工具来处理HTTP请求&a…

目标检测算法YOLOv7简介

YOLOv7由Chien-Yao Wang等人于2022年提出&#xff0c;论文名为&#xff1a;《YOLOv7: Trainable bag-of-freebies sets new state-of-the-art for real-time object detectors》&#xff0c;论文见&#xff1a;https://arxiv.org/pdf/2207.02696 &#xff0c;项目网页&#xff…

激光雷达:盲人世界的导航灯塔

在科技日新月异的今天&#xff0c;一项名为“蝙蝠避障”的创新成果&#xff0c;正悄然改变着盲人朋友的日常生活&#xff0c;特别是在出行这一领域&#xff0c;它的应用如同一束光&#xff0c;照亮了前行的道路。本文将深入探讨激光雷达技术对盲人的帮助&#xff0c;揭示这项高…

【JavaWeb】网上蛋糕商城后台-商品管理

概念 本文讲解和实现网上蛋糕商城的后台管理系统中的商品管理功能。 商品列表 点击后台管理系统的head.jsp头部的“商品管理”功能选项&#xff0c;向服务器发送请求/admin/goods_list 因此需要在servlet包中创建AdminGoodsListServlet类&#xff0c;用于获取商品信息列表 …