ts类型体操-简单篇

news/2024/10/3 11:48:23 标签: 前端, javascript

介绍下type challenge中几道简单的类型体操。涉及的知识点主要是:映射类型、 条件类型、联合类型的分布式、infer R等。

1、实现pick

不使用 Pick<T, K> ,实现 TS 内置的 Pick<T, K> 的功能。

从类型 T 中选出符合 K 的属性,构造一个新的类型

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

type MyPick<T, K extends keyof T> = {
  [key in K]: T[key]
}

2、实现Readonly对象属性只读

不要使用内置的Readonly<T>,自己实现一个。

泛型 Readonly<T> 会接收一个 泛型参数,并返回一个完全一样的类型,只是所有属性都会是只读 (readonly) 的。

也就是不可以再对该对象的属性赋值。

interface Todo {
  title: string
  description: string
}

const todo: MyReadonly<Todo> = {
  title: "Hey",
  description: "foobar"
}

todo.title = "Hello" // Error: cannot reassign a readonly property
todo.description = "barFoo" // Error: cannot reassign a readonly property

type MyReadonly<T> = {
  readonly [key in keyof T]: T[key]
}

3、实现Exclude

实现内置的 Exclude<T, U> 类型,但不能直接使用它本身。

从联合类型 T 中排除 U 中的类型,来构造一个新的类型。

type Result = MyExclude<'a' | 'b' | 'c', 'a'> // 'b' | 'c'
type MyExclude<T, M> = T extends M ? never : T

4、元组转为对象

将一个元组类型转换为对象类型,这个对象类型的键/值和元组中的元素对应。

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const

type result = TupleToObject<typeof tuple> // expected { tesla: 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}

type TupleToObject<T extends readonly PropertyKey[]> = {
  [key in T[number]]: key
}

5、实现Parameters

实现内置的 Parameters 类型,而不是直接使用它,可参考TypeScript官方文档。

const foo = (arg1: string, arg2: number): void => {}

type FunctionParamsType = MyParameters<typeof foo> // [arg1: string, arg2: number]

//获取函数的参数
type MyParameters<T extends (...args: any[]) => any> = T extends (...args: infer R) => any ? R : never


http://www.niftyadmin.cn/n/5688300.html

相关文章

数据探险记:探索性数据分析带你发现未知宝藏

数据的世界&#xff0c;比你想象的更有趣 在这个数字化的时代&#xff0c;我们每天都被数据包围着。 从购物记录到社交媒体互动&#xff0c;每一个点击、每一次滑动都留下了数据的痕迹。 但这些数字背后隐藏着怎样的故事呢&#xff1f;今天&#xff0c;我们就来一起探索性数据分…

QT系统学习篇(3)- Qt开发常用算法及控件原理

一、Qt中 Qt框架中和模块提供一些算法和常用函数 比如 double d1-59.6,d292.5;double d3qAbs(d1);double d4qMax(d1,d2);qDebug()<<"d3"<<d3<<"d4"<<d4<<endl;二、Qt窗口及控件原理设计 理解Qt窗口的生成、属性 1、Qt窗口…

springbot,JWT令牌的使用。实现http请求拦截校验。

JWT 由三部分组成&#xff0c;用点&#xff08;.&#xff09;分隔 Header&#xff08;头部&#xff09; Payload&#xff08;负载&#xff09;Signature&#xff08;签名) 一、原理 Jwt原理其实很简单&#xff0c;在后端首先要有个拦截器&#xff0c;他会拦截所有http请求&…

【CSS in Depth 2 精译_044】第七章 响应式设计概述

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…

LLM Visualization

Brendan Bycroft的网站&#xff0c;提供了交互式的可视化工具&#xff0c;展示了大型语言模型&#xff08;LLMs&#xff09;的内部机制 通过这个 链接 https://bbycroft.net/llm 访问 借助这个交互可视化&#xff0c;能够加深对模型结构和行为的了解

leetcode每日一题day22(24.10.2)——准时到达的列车最小时速

思路&#xff1a;这种在有约束条件情况下&#xff0c;求最值或最符合要求的情况&#xff0c;首先是很容易想到&#xff0c;从时速为1开始往后找找到满足条件就输出&#xff0c;但这无疑工程量很大&#xff0c;每种可能的速度都要对列车数组进行遍历&#xff0c; 时间复杂度为C…

深度学习:cGAN和pix2pix图像转换

cGAN和pix2pix的基础概念 cGAN cGAN是条件生成对抗网络&#xff08;Conditional Generative Adversarial Networks&#xff09;的简称。 它是一种基于基础GAN&#xff08;Generative Adversarial Networks&#xff09;架构的变体&#xff0c;通过给GAN模型引入额外的信息或条…

互联网前后端分离的开发场景,一般会员和数据权限的判断是放在前端还是后端?

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…