TypeScript中为Request接口定义泛型返回类型及错误解决

错误原因分析 #

1. 类型与值混淆错误：typeof T和typeof User报错是因为T和User是TypeScript编译时类型，并非运行时存在的值。TypeScript类型会在编译阶段被擦除，无法作为运行时属性的值使用。
2. 泛型未使用警告：移除returnType后，Request<T>中的泛型T未被接口内任何属性引用，TypeScript会提示“'T'已声明但未被使用”。

解决方案 #

方案一：移除冗余的运行时类型属性，用泛型直接关联返回类型 #

这种方式最简洁，完全依赖TypeScript的编译时类型推断，不需要额外的运行时属性：

// 基础请求接口，无需泛型
interface Request {
    url: string
    options: RequestOptions
}

// 定义返回类型
interface User {
    id: string
    name: string
    age: string
}

// 构造请求对象，无需绑定类型到对象本身
const getUser = (id: string): Request => ({
    url: `www.example.com/users/${id}`,
    options: {
        method: 'GET'
    }
})

// 认证请求函数，泛型T指定返回类型
const authRequest = async <T>(request: Request): Promise<T> => {
    const accessToken = await getAccessToken()
    return fireRequest(request, accessToken)    
}

// 调用时显式指定返回类型，或让TypeScript自动推断
const doStuff = async () => {
    // 自动推断user类型为User，也可显式写authRequest<User>(...)
    const user = await authRequest(getUser('some-user-id'))
}

方案二：添加编译时类型占位属性，保留请求与类型的绑定 #

如果希望请求对象本身能关联返回类型（方便代码阅读或类型推断），可以给Request接口添加一个可选的占位属性，仅用于编译时标记泛型，运行时无需赋值：

// 泛型请求接口，添加可选的_type属性作为类型占位
interface Request<T> {
    url: string
    options: RequestOptions
    _type?: T // 仅用于编译时关联类型，运行时可忽略
}

interface User {
    id: string
    name: string
    age: string
}

// 构造请求时指定泛型，无需赋值_type
const getUser = (id: string): Request<User> => ({
    url: `www.example.com/users/${id}`,
    options: {
        method: 'GET'
    }
})

// 认证请求函数直接使用请求对象的泛型T
const authRequest = async <T>(request: Request<T>): Promise<T> => {
    const accessToken = await getAccessToken()
    return fireRequest(request, accessToken)    
}

// 调用时自动推断返回类型为User
const doStuff = async () => {
    const user = await authRequest(getUser('some-user-id'))
}

方案三：用泛型工厂函数创建请求对象 #

通过工厂函数封装请求创建逻辑，同时绑定返回类型，让类型推断更自然：

interface Request {
    url: string
    options: RequestOptions
}

// 泛型工厂函数，关联请求与返回类型
const createApiRequest = <T>(url: string, options: RequestOptions): Request => ({
    url,
    options
})

interface User {
    id: string
    name: string
    age: string
}

// 构造请求时通过工厂函数绑定User类型
const getUser = (id: string) => createApiRequest<User>(
    `www.example.com/users/${id}`,
    { method: 'GET' }
)

const authRequest = async <T>(request: Request): Promise<T> => {
    const accessToken = await getAccessToken()
    return fireRequest(request, accessToken)    
}

const doStuff = async () => {
    // TypeScript自动推断user类型为User
    const user = await authRequest(getUser('some-user-id'))
}

关键总结 #

• 永远不要试图将TypeScript编译时类型作为运行时属性的值，类型在编译后会被擦除，无法被代码访问。
• 泛型的核心作用是在编译阶段建立类型关联，确保类型安全，无需依赖运行时属性传递类型信息。
• 遇到泛型未使用警告时，优先考虑调整泛型的使用方式（如关联到接口属性、返回类型），而非直接忽略警告。

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