05-TS类型Never和Object类型

<think>我们正在讨论TypeScript中如何获取函数参数类型和返回值类型。根据引用[2]和引用[3]，我们可以使用TypeScript内置的工具类型`Parameters`和`ReturnType`来实现。 具体步骤： 1. 获取函数参数类型：使用`Parameters<typeof functionName>`，这会得到一个元组类型，包含函数所有参数的类型。然后可以通过索引获取特定位置的参数类型。 2. 获取函数返回值类型：使用`ReturnType<typeof functionName>`，直接得到函数的返回值类型。 注意：这些工具类型都是基于函数类型进行操作的，因此我们需要使用`typeof`操作符来获取函数的类型。 举例说明： 假设有一个函数`test`： function test(name: string, idx: number): boolean { return true; } 获取参数类型： type Params = Parameters<typeof test>; // 得到 [string, number] type FirstParam = Params[0]; // string type SecondParam = Params[1]; // number 获取返回值类型： type Return = ReturnType<typeof test>; // boolean 另外，引用[2]中提到了在调用函数时使用`Parameters`来获取参数类型，然后用于函数调用的参数类型声明。 下面我们详细说明：</think>### TypeScript 获取函数参数和返回值类型的完整指南 #### 一、核心工具类型 TypeScript 提供了内置工具类型直接获取函数类型信息： 1. **获取函数参数类型** → `Parameters<T>` 返回函数参数的**元组类型**： ```typescript declare function getUser(id: number, name: string): boolean; // 获取所有参数类型 type FuncParams = Parameters<typeof getUser>; // [number, string] // 获取特定参数类型（索引从0开始） type SecondParam = Parameters<typeof getUser>[1]; // string ``` 2. **获取返回值类型** → `ReturnType<T>` 直接提取函数返回类型： ```typescript type ReturnValue = ReturnType<typeof getUser>; // boolean ``` #### 二、实际应用场景 1. **API 请求封装** 安全地提取 API 函数的参数和返回类型： ```typescript // api.ts export function login(username: string, password: string): Promise<User> { return fetch('/login', { method: 'POST', body: JSON.stringify({ username, password }) }) } // 调用处 import { login } from './api'; // 自动获取参数类型 type LoginParams = Parameters<typeof login>; // [string, string] // 安全调用 const handleLogin = (credentials: LoginParams[0]) => { login(credentials.username, credentials.password) } ``` 2. **高阶函数类型约束** 创建通用函数包装器： ```typescript function withLogging<F extends (...args: any[]) => any>(fn: F) { return (...args: Parameters<F>): ReturnType<F> => { console.log('调用参数:', args); const result = fn(...args); console.log('返回结果:', result); return result; } } // 自动继承原函数类型 const loggedGetUser = withLogging(getUser); ``` 3. **Redux Thunk 类型安全** 精确推导异步 action 类型： ```typescript import { ThunkAction } from 'redux-thunk'; function fetchUser(id: number): ThunkAction<Promise<void>, RootState, unknown, AnyAction> { return (dispatch) => { /* ... */ } } // 提取thunk返回类型 type FetchUserReturn = ReturnType<typeof fetchUser>; ``` #### 三、高级用法 1. **构造函数类型提取** 使用 `ConstructorParameters` 和 `InstanceType`： ```typescript class User { constructor(public id: number, public name: string) {} } type ConstructorParams = ConstructorParameters<typeof User>; // [number, string] type UserInstance = InstanceType<typeof User>; // User ``` 2. **泛型函数类型处理** 需先固定泛型参数才能提取： ```typescript declare function parse<T>(input: string): T; // 错误：不能直接操作泛型函数 // type ParseParams = Parameters<typeof parse>; ❌ // 正确：指定具体类型后提取 type NumberParseParams = Parameters<typeof parse<number>>; // [string] type StringParseReturn = ReturnType<typeof parse<string>>; // string ``` 3. **函数重载处理** 获取最后一次重载的类型： ```typescript function load(config: string): string; function load(config: string, format: 'json'): object; function load(config: string, format?: string) { /* ... */ } // 获取最后一次重载的类型信息 type LoadParams = Parameters<typeof load>; // [string, string?] type LoadReturn = ReturnType<typeof load>; // object | string ``` #### 四、原理剖析 这些工具类型基于条件类型和 `infer` 关键字实现： ```typescript // 内置类型的简化实现 type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never; type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any; ``` - `infer P`：动态推断函数参数类型 - `infer R`：动态推断返回值类型 - 本质是**模式匹配**：当函数类型匹配时提取对应部分[^2][^3] #### 五、常见问题解决 1. **"泛型参数被当作值使用"错误** 使用 `typeof` 前需实例化泛型： ```typescript // 错误示例 function wrapper<T>(fn: (arg: T) => void) { type Param = Parameters<typeof fn>; // ❌ 类型“fn”不满足约束 `(...args: any) => any` } // 正确：通过中间类型实例化 function wrapper<T>(fn: (arg: T) => void) { type FnType = (arg: T) => void; type Param = Parameters<FnType>; // ✅ [T] } ``` 2. **箭头函数类型提取** 需使用类型声明代替直接 `typeof`： ```typescript // 直接使用typeof会丢失类型 const getUser = (id: number) => ({ id }); type Params = Parameters<typeof getUser>; // [id: number] ✅ // 但箭头函数泛型需显式声明 type GenericFunc = <T>(arg: T) => T[]; const makeArray: GenericFunc = (arg) => [arg]; type MakeArrayParams = Parameters<GenericFunc>; // [T] ✅ ``` > 在React组件中，可利用这些工具类型精确提取props类型： > `type CardProps = Parameters<typeof Card>[0];`[^1]