「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=1

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LLM 可以从简单数据中学习吗?

在 10 月份的一次周会结束后&#xff0c;我提到 SFT 训练后的 Loss 曲线呈现阶梯状&#xff0c;至于为什么&#xff0c;并没有人有合理的解释&#xff0c;加上当时的重心是提升次日留存率&#xff0c;Loss 曲线呈现阶梯状与次日留存率的关系还太远&#xff0c;即使有问题&#…

使用单片机的IO引脚直接驱动段码屏

使用单片机的IO引脚直接驱动段码屏,目的是为了降低成本。这种古老的应用,在低功耗产品中比较多见。 如:水表&#xff0c;燃气表等需要电池供电的产品。 下面纯属个人理解&#xff0c;未经测试。 1/3Duty表示LCD共有3个COM引脚,分别占显示周期的1/3 1/2BIAS表示电压0和VCC 1、…

2024年记一次Mingw64-13.2.0编译Qt6.6.3,包含文档编译。

My C Development. 前言&#xff1a;不包含qtwebengine。 一、准备文件 &#xff08;1&#xff09;mingw64-13.2.0 下载链接&#xff1a;&#xff0c;ucrt64_13.2_ucrt_posix_rev6_msys2.7z【蓝奏云】。 &#xff08;2&#xff09;qt6.6.3源码 下载链接&#xff1a;Downlo…

纯血鸿蒙APP实战开发——一镜到底“页面转场”动画

介绍 本方案做的是页面点击卡片跳转到详情预览的转场动画效果 效果图预览 使用说明 点击首页卡片跳转到详情页&#xff0c;再点击进入路由页面按钮&#xff0c;进入新的路由页面 实现思路 首页使用了一种视觉上看起来像是组件的转场动画&#xff0c;这种转场动画通常是通过…

opencv绘制灰度直方图-------c++

灰度直方图 cv::Mat opencvTool::calculateHistogram(const cv::Mat& image) {// 如果输入图像尚未处于灰度级&#xff0c;请将其转换为灰度级cv::Mat grayscale_image;if (image.channels() > 1){cv::cvtColor(image, grayscale_image, cv::COLOR_BGR2GRAY);}else{gra…

求一个B站屏蔽竖屏视频的脚本

求一个B站屏蔽竖屏视频的脚本 现在B站竖屏竖屏越来越多了&#xff0c;手机还好点给我一个按钮&#xff0c;选择不喜欢&#xff0c;但是我一般都用网页版看视屏&#xff0c;网页版不给我选择不喜欢的按钮&#xff0c;目测大概1/4到1/3的视频都是竖屏视频。 目前网页版唯一的进…

使用AudioCraft(MusicGen)生成音乐

AudioCraft 是一个 PyTorch 库,用于音频生成的深度学习研究。AudioCraft 包含 AudioGen 和 MusicGen 两个最先进的人工智能生成模型的推理和训练代码,用于生成高质量的音频。 MusicGen 是一种简单可控的音乐生成模型,它使用Meta 20K 小时的授权音乐来进行训练,能够生成与文…

SM4在线解密工具(支持GCM模式)

SM4在线解密工具(支持GCM模式)

spring boot参数验证注解@NotNull、@NotBlank和@NotEmpty区别

目录 前言说明举例 前言 使用spring boot参数验证是常常会使用NotNull、NotBlank和NotEmpty三个判断是否不为空的注解&#xff0c;中文都有不能为空的意思&#xff0c;大部分使用者都傻傻分清它们之间到底有什么区别。今天就让咱们来一起探索它们之间的不同吧。 说明 注解名…

rngd: Error writing /dev/tpm0

检查数据库时发现messages中一直有rngd报错&#xff0c;rngd一直未配置&#xff0c;直接关闭了 /var/log/messages-20240414:Apr 11 04:59:49 hydb2 rngd: Error writing /dev/tpm0 /var/log/messages-20240414:Apr 12 07:31:39 hydb2 rngd: Error writing /dev/tpm0 /var/log…

深度学习之前馈神经网络

1.导入常用工具包 #在终端中输入以下命令就可以安装工具包 pip install numpy pip install pandas Pip install matplotlib注&#xff1a; numpy是科学计算基础包 pandas能方便处理结构化数据和函数 matplotlib主要用于绘制图表。 #导包的代码&#xff1a; import numpy as n…

怎样的跨网软件,可以实现网间数据的安全收发?

网络隔离已是较为常见的网络安全保护措施&#xff0c;比如防火墙、网闸、VLAN&#xff0c;云桌面虚拟环境等方面进行隔离。像一些科技研发型企业&#xff0c;不仅仅是内外网隔离&#xff0c;甚至还划分办公网、研发网、测试网、生产网等&#xff0c;防止研发资料、设计资料等敏…

【机器学习300问】85、Adam梯度下降优化算法的原理是什么?

Adam优化算法取了两个算法名称的首字母——Adaptive Moment Estimation的缩写&#xff0c;结合了Momentum算法和RMSprop算法的优点。在Momentum中&#xff0c;会计算前一时刻的梯度&#xff0c;并将其用于当前时刻的梯度更新&#xff1b;而RMSprop会对梯度的大小进行自适应调整…

二叉树的遍历(前序 中序 后序)

一、前序遍历 顺序为&#xff1a; 根-->左子树---->右子树 先访问根节点&#xff0c;再递归进入根节点的左子树&#xff08;通过递归不断往下遍历&#xff09;&#xff0c;直到访问的节点没有左子树&#xff0c;此时递归进入其右子树&#xff08;通过递归进行相同操作&a…

vue布局设置——使用 el-drawer 打造个性化 Admin 后台布局设置

在前端开发中&#xff0c;我们常常需要为 admin 后台构建灵活且个性化的布局设置。今天&#xff0c;我要分享的是如何利用 el-drawer 来实现这样一个有趣的功能。 首先&#xff0c;我们来看一下主要的设置参数&#xff1a; 1. theme: 用于定义主题&#xff0c;可以根据需求切换…

Java入门基础学习笔记15——强制类型转换

大范围类型的变量是否可以赋值给小范围类型的变量呢&#xff1f; IDEA直接报错。直接报错&#xff0c;是提醒你有问题。但是我非常进行类型转换。 非要强行赋值呢&#xff1f; 强制类型转换&#xff0c;强行将类型范围大的变量&#xff0c;数据赋值给类型范围小的变量。 数据…

若依生成树表和下拉框选择树表结构(在其他页面使用该下拉框输入)

1.数据库表设计 生成树结构的主要列是id列和parent_id列&#xff0c;后者指向他的父级 2.来到前端代码生成器页面 导入你刚刚写出该格式的数据库表 3.点击编辑&#xff0c;来到字段 祖籍列表是为了好找到直接父类&#xff0c;不属于代码生成器方法&#xff0c;需要后台编…

数据挖掘(二)数据预处理

前言 基于国防科技大学 丁兆云老师的《数据挖掘》 数据挖掘 数据挖掘&#xff08;一&#xff09;数据类型与统计 2、数据预处理 2.1数据清理 缺失值处理&#xff1a; from sklearn.impute import SimpleImputer# 创建一个SimpleImputer对象&#xff0c;指定缺失值的处理策略…

day07beef-xss之根据beef-xss获取cookies

1.安装 apt-get update apt-get install beef-xss 若报错运行不了尝试 apt remove ruby apt remove beef-xss apt-get install ruby apt-get install ruby-dev libpcap-dev gem install eventmachine apt-get install beef-xss 2.运行 beef-xss 运行成功会自动弹出浏览框。 攻…

WM Transaction Code 仓库管理模块事务代码大全

1.1 LE-WM 仓库管理 Warehouse Management 仓库管理事务码 描述 LB01 Create Transfer Requirement 创建转储需求 LB02 Change transfer requirement 修改转储需求 LB03 Display Transfer Requirement 显示转储需求 LB10 TRs for Storage Type 按仓储类型的转储请求 …