javascript - Typescript'te türleri argüman olarak geçme

Bazı fetch çağrıları için kodu tekrarlamamamı sağlamak adına özel bir hook yazdım. Şöyle görünüyor:

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 }
}

ama veri tipi hakkında bazı TS hataları alıyorum. tipi bir argüman olarak geçirmek mümkün mü, çünkü bu hooyu çağıran her bileşen için farklı olabilir mi? yoksa bunu ele almanın en iyi yolu nedir?

Cevap #1

Bu durumda genel (generic) kullanabilirsiniz. Şöyle bir şey yapabilirsiniz:

export const useCustomQuery = <T,>({ endpoint, body, dataPoint }: args) => {
    const [data, setData] = useState<T>()
    ...
}

Bu şekilde, kancayı useCustomQuery çağırdığınızda bir T tipi veriyorsunuz, bu da data tipini parametrize ediyor, şöyle:

useCustomQuery<MyType>({...})

Cevap #2

Evet, genel türleri kullanabilirsiniz, işte bir örnek. Genel fonksiyonların türü, tıpkı genel olmayan fonksiyonlar gibi, ilk olarak tür parametreleri listelenir, fonksiyon bildirimlerine benzer şekilde, farklı bileşenlerde hook'u çağırdığınızda türü belirtmeniz gerekir, tür bu şekilde çıkarılır.

function identity<Type>(arg: Type): Type {
  return arg;
}
 
let myIdentity: <Type>(arg: Type) => Type = identity;

Daha fazla bilgi için bu bağlantıya başvurabilirsiniz.

İlgili makaleler