TypeScript中如何使用typeof从泛型函数类型构造具体类型

通用实现思路 #

你可以直接给通过typeof拿到的泛型函数类型手动传入泛型参数，再配合ReturnType即可得到对应的具体返回值类型，不需要依赖库导出的内部类型：

// 从第三方库导入泛型函数
import { libFunction } from 'some-lib';
// 定义提取类型的工具类型，泛型T对应原函数的泛型参数
type InternalLibType<T> = ReturnType<typeof libFunction<T>>;
// 直接使用即可
const foo: InternalLibType<'something'>;

如果原函数有多个泛型参数，只需要在工具类型的泛型位按顺序声明所有参数即可正常推导。

use-debounce 场景示例 #

以常用的useDebounce函数为例，提取返回值类型的写法如下：

import { useDebounce } from 'use-debounce';
// T是要防抖的值的类型，第二个泛型对应防抖配置的类型，按需补充即可
type UseDebounceReturn<T> = ReturnType<typeof useDebounce<T>>;
// 使用示例
const [debouncedVal, controls] : UseDebounceReturn<string> = useDebounce('test', 300);

这种方式完全基于库公开导出的函数做类型推导，不会触发 package.json exports 字段的规则校验，兼容所有符合ES模块规范的构建工具。

内容的提问来源于stack exchange，提问作者aryzing