TypeScript类型体操--StartsWith、EndsWith、TrimLeft

Sir_苏
258 阅读2分钟

大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在

github与好文

前言

前边八篇文章我们一共实现了33个工具类型，按照本专栏的规划，还差66个...

本节我们继续学习三个新的工具类型

image.png

提示

对于语法层面的知识点本系列（类型体操开头的标题）不会展开说明哈，可以自行搜索学习其他大佬的优质文章或者等我后续更新补充

StartsWith

  • 功能

JavaScript中字符串的startsWith的TypeScript版

  • 实现

首先，它接收两个泛型参数，其中T是原字符，U是要判断是否在其内的子字符

type StartsWith<T,U>

它们都应该是string类型

type StartsWith<T extends string,U extends string>

如果想要进行比较，则需要构建条件类型，而两个字符仅在完全相等时才会得到true的结果

type case1 = 'spp' extends 'sp' ? true : false // false
type case2 = 'spp' extends 'sup' ? true : false // false
type case3 = 'spp' extends 'spp' ? true : false // false

因此压力来到怎样才有拿到两个完全相等字符的机会呢？

image.png

显然，我们前边已经用过很多次的infer最适合

目前为止，我们只使用过infer去获取剩余数组成员，它的一个隐式规则是在数组中使用

[F,...infer R]

那以此类推，我们当前的infer肯定是要在string中使用，这一点，TypeScript的模板字符类型刚好可以来做

`s${infer R}`

此时，如果被推断字符是spp，则推断结果就为pp

故，完整代码如下

type StartsWith<T extends string, U extends string> = T extends `${U}${infer R}`?true:false
  • 使用示例

（ps：笔者在测试时使用的是string来代替，因为infer推出来的R没有使用到，导致是暗色，强迫症的我太难受了😂）

image.png

EndsWith

  • 功能

JavaScript中字符串的EndsWith的TypeScript版

  • 实现

在StartsWith中我们已经把思路都讲清楚了，为了避免水文的嫌疑，这里我们直接给出具体实现

type EndsWith<T,U extends string> = T extends `${infer f}${U}`?true:false
  • 使用示例

image.png

TrimLeft

  • 功能

去除字符类型的前置空格

  • 实现

首先，它接收一个泛型参数，并且其受到string类型的约束

type TrimLeft<T extends string>

其实，大家是否有注意到EndsWith和StartsWith中是有这么一个隐式条件的，那就是剔除指定的字符。在前文中，我们去除的分别是sp和pp

那这里照葫芦画瓢，要剔除的肯定就是空格啦，而空格又有多种形式，因此，我们搞一个辅助类型来存储它

type Space = ' ' | '\n' | '\t'

此时只需要构建条件类型进行识别和替换即可

type Space = ' ' | '\n' | '\t'
type TrimLeft<S extends string> = S extends `${Space}${infer R}` ? TrimLeft<R> : S
  • 使用示例

image.png

下期预告

IsUnion

  • 功能

判断类型是否是联合类型

  • 使用示例
type case1 = IsUnion<string>  // false
type case2 = IsUnion<string|number>  // true
type case3 = IsUnion<[string|number]>  // false

如果本文对您有用，希望能得到您的点赞和收藏

订阅专栏，每周更新1-2篇类型体操，每月1-3篇vue3源码解析，等你哟😎

avatar
文章
阅读
粉丝