CODEWITHSUNDEEP
typescript
Sam
Sam

Reputation: 1230

Hook Throwing TypeScript Error (mismatched types?)

I'm writing a useProject hook in TypeScript which calls on a function declared in useProjectFunctions.ts.

In the useProject hook, TypeScript throws an error which suggests mismatched types, but I cannot see how that would be the case.

useProjectFunctions.d.ts

export declare type GetImageUploadToken = ({ ...params }: {
    organisationId: string,
    projectId: string,
    imageName: string,
    isAdminRequest?: boolean,
}) => {
    status: 'success';
    tokenId: string;
}

useProjectFunctions.ts

export function useProjectFunctions() {
    const { functions } = useFirebase();

    async function getImageUploadToken({ ...params }: Parameters<GetImageUploadToken>[0]) {
        const response = httpsCallable<any, ReturnType<GetImageUploadToken>>(functions, ProjectFunctions.GET_IMAGE_UPLOAD_TOKEN);
        return (await response({ ...params })).data;
    };

    return {
        getImageUploadToken
    };
}

useProject.ts

export function useProject() {
    const { getImageUploadToken } = useProjectFunctions();

    return {
        addImage: () => addImage({ getImageUploadToken })
    };
}

async function addImage({ getImageUploadToken }: {
    getImageUploadToken: GetImageUploadToken;
}) {
    const tokenCallResponse = getImageUploadToken({
        organisationId: 'orgId1',
        projectId: 'projId1',
        imageName: 'fileName',
        isAdminRequest: false
    });
}

In useProject.ts TS generates the following error on the addImage: () => addImage({ getImageUploadToken }) line:

Type '({ ...params }: { organisationId: string; projectId: string; imageName: string; isAdminRequest?: boolean; }) => Promise<{ status: "success"; tokenId: string; }>' is not assignable to type 'GetImageUploadToken'.

Type 'Promise<{ status: "success"; tokenId: string; }>' is missing the following properties from type '{ status: "success"; tokenId: string; }': status, tokenId

The expected type comes from property 'getImageUploadToken' which is declared here on type '{ project: PrivateProjectInterface; setProject: Dispatch<SetStateAction>; file: File; admin?: boolean; getImageUploadToken: GetImageUploadToken; storage: FirebaseStorage; }'

What does this error really mean and how can I fix it please?

Upvotes: 0

Views: 47

Answers (1)

thowitz
thowitz

Reputation: 48

Your type GetImageUploadToken is an object, whereas the type that getImageUploadToken returns is a promise that resolves to GetImageUploadToken upon completion.

To fix it, inside addImage, you can change the type from getImageUploadToken: GetImageUploadToken to getImageUploadToken: Promise<GetImageUploadToken>

This will tell typescript that you're passing an asynchronous function in to addImage

You'll then want to await the asynchronous getImageUploadToken function, so change the function call to const tokenCallResponse = await getImageUploadToken({

If you're still unsure, I'd recommend reading up on asynchronous functions and promises in javascript

Upvotes: 1

Related Questions