[玩转 typescript 系列]巧用ts infer关键字

原创已于 2022-06-08 10:14:26 修改 · 485 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #前端 #面试

于 2022-04-18 13:08:02 首次发布

本文介绍了如何利用TypeScript的infer关键字和泛型来创建TrimLeft类型，该类型能够去除字符串左边的空格。通过示例展示了infer如何在类型约束中捕获和返回变量，并且给出了获取函数返回值类型的典型案例。此外，还提供了ReturnType类型的定义及其应用，帮助理解infer关键字的作用。

题目

实现TrimLeft类型，将T类型的左空格去掉

type TrimLeft<T extends string> = any

使用infer实现：

type WhiteSpace = ' '
type TrimLeft<T extends string> =
	T extends `${WhiteSpace}${infer U}` ?
	    TrimLeft<U>:
	    T
type Test = TrimLeft<'   foo'> // 'foo'

总结

infer关键字需要在extends子句中使用，Infer 允许我们在约束中定义要引用或返回的变量。
最经典的使用场景是获取函数的返回值类型

type ReturnType<T> = T extends (...args: any) => infer U ? U : unknown

const fn = () => {
	return 'fn return a string'
}
type Fn = ReturnType<fn> // 'string'