TypeScript 类型挑战:元组转换为对象

更新日期: 2022-05-19阅读: 1.5k标签: 类型

高质量的类型可以提高项目的可维护性并避免一些潜在的漏洞。

一些前端面试中考察到了 TypeScript 高级类型的定义,本系列主要解答来自 Type Challenges 项目中的 TS 类型挑战问题,以此更好的了解 TS 的类型系统,编写自己的类型工具,更好的应对前端面试。

下面来看一个难度为简单的题目:元组转换为对象

题目描述

传入一个元组类型,将这个元组类型转换为对象类型,这个对象类型的键/值都是从元组中遍历出来。

例如:

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'}

题目解答

我们需要从数组中获取所有值,并将其作为新对象中的键和值。

首先我们知道什么是元组,来看TypeScript 对元组的定义:

元组类型是另一种Array类型,它确切地知道包含多少个元素,以及它在特定位置包含哪些类型。

这意味着我们可以检查length并得到确切的数字:

const fullName:[first: string, last: string] = ['hello', 'world'];
const range:[start: number, end: number] = [0, 10];
const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;

type FullNameLength = (typeof fullName)['length'] // 2
type RangeLength = (typeof range)['length']       // 2
type DigitsLength = (typeof digits)['length']     // 10

而在数组中就无法实现这一点:

const fullName:string[] = ['hello', 'world'];
const range:number[] = [0, 10];

type FullNameLength = (typeof fullName)['length'] // number
type RangeLength = (typeof range)['length']       // number

可以使用映射类型来遍历对象:

type MappedType<T> = {
  [Key in keyof T]: T[Key];
};
  • keyof T用于从对象类型T中获取键值 key;
  • in用于对对象键值key进行迭代;
  • Key 就是对象键值 key 本身;
  • T[Key]是指定 Key 的值;

我们使用索引访问类型来遍历元组,可以通过T[number]从元组中获取值。具体实现如下:

type TupleToObject<T> = {
    [Value in T[number]]: Value;
};
  • T[number] 用于从元组 T 中获取值;
  • in 用于迭代元组值;
  • Value 是元组元素,用作构建对象的key和value。

但是这时候报错了:


这时就需要约束泛型的类型,最终的实现如下:

type TupleToObject<T extends readonly any[]> = {
    [Value in T[number]]: Value;
};

这里的extends readonly any[] 是调用T[number] 所必须的,用来约束 T 的类型,T是一个元组,元组元素是只读的。


Type Challenges:https://github.com/type-challenges/type-challenges

链接: https://www.fly63.com/article/detial/11530

JS中Null与Undefined的区别

在JavaScript中存在这样两种原始类型:Null与Undefined。这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是Undefined?Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。

Javascript的类型检测

主要介绍了JS中检测数据类型的几种方式,typeof运算符用于判断对象的类型,但是对于一些创建的对象,它们都会返回\'object\',有时我们需要判断该实例是否为某个对象的实例,那么这个时候需要用到instanceof运算符

js类型转换的各种玩法

对于object和number、string、boolean之间的转换关系,ToPrimitive是指转换为js内部的原始值,如果是非原始值则转为原始值,调用valueOf()和toString()来实现。

JavaScript类型:关于类型,有哪些你不知道的细节?

Undefined类型表示未定义,它的类型只有一个值为undefined。undefined和null有一定的表意差别。非整数的Number类型无法使用 == 或 === 来比较,因为 JS 是弱类型语言,所以类型转换发生非常频繁

为你的 JavaScript 项目添加智能提示和类型检查

近在做项目代码重构,其中有一个要求是为代码添加智能提示和类型检查。智能提示,英文为 IntelliSense,能为开发者提供代码智能补全、悬浮提示、跳转定义等功能,帮助其正确并且快速完成编码。

js的类型

基本类型:按值访问,可以操作保存在变量中实际的值;引用类型数据存在堆内存,而引用存在栈区,也就是说引用类型同时保存在栈区和堆区,关于==的执行机制,ECMASript有规范,因为==前后的值交换顺序,返回的值也是一样的,所以在此对规范做出如下总结

再也不用担心 JavaScript 的数据类型转换了

JavaScript 是一种弱类型或者说动态类型语言。所以你不用提前声明变量的类型,在程序运行时,类型会被自动确定,你也可以使用同一个变量保存不同类型的数据。

JavaScript基础之值传递和引用传递

js的值传递和引用(地址)传递:js的5种基本数据类型 number,string,null,undefined,boolean 在赋值传递时是值传递,js的引用数据类型(object,array,function)进行引用传递,其实底层都是对象。

JS中的布尔 数字 字符串

JS中所有的值都可以转换成布尔类型 使用Boolean()或者 !!(两个感叹号),JS中所有的值都可以转换成数字类型,使用Number()或+。数字类型转换场景目的只有一个,用于计算,将后台传递的数据,从字符串转换为数字并参与计算

if条件中,js的强制类型转换

众所周知,JS在很多情况下会进行强制类型转换,其中,最常见两种是:1.使用非严格相等进行比较,对==左边的值进行类型转换2.在if判断时,括号内的值进行类型转换,转化为布尔值

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!