Typescript之获取函数返回值类型

2023-02-26 16:19| 来源: 网络整理| 查看: 265

前言

目前TS官方API还不支持获取函数返回值类型，但是对于函数式编程流行的当今，这个功能非常的重要，比如我们希望能在使用redux-thunk中getState或者mapStateToProps中state时IDE提示state类型，这时就需要获取reducer函数的返回值类型，并且进行联合导出供我们使用。

前置知识高级类型泛型、泛型约束类型推论类型断言

以上几点都能在TS文档中找到非常清晰简洁的解释和例子，这里就不花篇幅解释了。

核心代码// 声明一个泛型类型别名，返回值与泛型类型相同，入参类型不限制。 type Reverse = (arg: any) => T; // 声明一个泛型方法，入参arg继承泛型约束，返回空对象并断言其类型为T function returnResultType(arg: Reverse): T { return {} as T; } // 调用returnResultType，传入方法 (arg: any) => 3，获得result返回值 const result = returnResultType((arg: any) => 3); // 获取result类型并重名为ResultType type ResultType = typeof result; 代码分析returnResultType((arg:any)=>3);

调用returnResultType时，由于没有显示声明泛型类型，所以TS只能通过入参来进行类型推论，接着往下面走：

type Reverse = (arg: any) => T;

由于入参的类型为Reverse ，通过入参返回值是3可以推断出：

type Reverse = (arg: any) => number;

由于Reverse的T是根据returnResultType传入的，所以同理得出：

function returnResultType(arg: Reverse): number { return {} as number; }

由于返回值已经进行类型断言为number。所以在typeof result时，可以得出number类型。

该方法确实比较绕，因为存在多个泛型T的来回推论和反推论。

～～～

结合Redux应用

接下来我们通过reducer函数来应用一下：

1.首先编写两个简单的reducer：userReducer和loginReducer

/** * userReducer */ const initUserState = { name: '' } const userReducer = (state = initUserState, action: any) => { switch (action.type) { case 'setName': return { name: 'Larry', ...state }; default: return state; } } /** * loginReducer */ const initLoginState = { token: '' } const loginReducer = (state = initLoginState, action: any) => { switch (action.type) { case 'login': return { token: 'token', ...state }; default: return state; } }

2.在store中

此时的 GlobalStateType 就是我们需要的所有reducer函数返回的对象类型。

最后得到的类型

最后，导出 GlobalStateType，在我们mapStateToProps中使用时就能轻松得到类型:

逃～～～

【本文地址】

公司简介

联系我们