He escrito un enlace personalizado para ayudarme a no repetir el código para algunas llamadas de búsqueda. se parece a esto:
export const useCustomQuery = ({ endpoint, body, dataPoint }: args) => { const [data, setData] = useState() useEffect(() => { fetch(`http://localhost:4000/${endpoint}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body, }) .then((res) => res.json()) .then((res) => { if (dataPoint) { setData(JSON.parse(res.data[dataPoint])) } }) }, [endpoint, body, dataPoint]) return { data } }pero recibo algunos errores de TS que se quejan del tipo de datos. ¿Es posible pasar el tipo como argumento, ya que podría ser diferente para cada componente que llama al enlace? o ¿cuál es la mejor manera de abordar esto?
Sí, puede usar tipos genéricos, aquí hay un ejemplo. El tipo de las funciones genéricas es igual que el de las funciones no genéricas, con los parámetros de tipo enumerados primero, de manera similar a las declaraciones de funciones, debe especificar el tipo cada vez que llame al gancho en diferentes componentes, el tipo inferirá de esa manera.
function identity<Type>(arg: Type): Type { return arg; } let myIdentity: <Type>(arg: Type) => Type = identity;Puede consultar este enlace para obtener más información.
Puede usar genérico en este caso. Puedes hacer algo como esto:
export const useCustomQuery = <T,>({ endpoint, body, dataPoint }: args) => { const [data, setData] = useState<T>() ... } De esta forma, estás dando un tipo T cuando llamas al gancho useCustomQuery , que parametrizó el tipo de data , así:
useCustomQuery<MyType>({...})