TypeScript接口中如何提取其他属性的泛型类型适配React Query封装？

你可以通过定义泛型组件的方式实现类型关联，完整代码如下：

import React from 'react'
import { useQuery, UseQueryResult } from 'react-query'

// TData 为泛型参数，对应查询返回的data类型
interface WrapperProps<TData = unknown> {
  result: UseQueryResult<TData>;
  render: (data: TData) => React.ReactNode;
}

// 定义泛型组件，TS会自动根据传入的result推导TData类型
const Wrapper = <TData,>({ result, render }: WrapperProps<TData>) => {
  if (result.isLoading) {
    return <div>spinner</div>
  }

  if (result.isSuccess) {
    return render(result.data)
  }

  return <div>otherwise</div>
}


const App: React.FC = () => { 
  const responseString = useQuery(
    ['string'],
    async () => Promise.resolve("string")
  )

  const responseNumber = useQuery(
    ['number'],
    async () => Promise.resolve(3)
  )

  return (
    <div>
      <Wrapper 
        result={responseString}
        render={(data) => <div>successfully loaded string {data}</div>} 
        // 此处data自动推导为string类型
      />
      <Wrapper 
        result={responseNumber}
        render={(data) => <div>successfully loaded int {data}</div>} 
        // 此处data自动推导为number类型
      />
    </div>
  )
}

如果你习惯用React.FC写法定义组件，泛型组件的FC写法参考如下：

const Wrapper: <TData>(props: WrapperProps<TData> & { children?: React.ReactNode }) => React.ReactElement | null = ({ result, render }) => {
  // 组件逻辑和上面一致
}

这样实现后不需要手动传入泛型参数，TypeScript会自动根据你传入的useQuery返回值推导数据类型，render函数的入参会自动匹配对应的数据类型，完全适配任意查询返回的数据场景。

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