What is the correct way to define functions within an object using Typescript in this situation?

Question

What is the correct way to define functions within an object using Typescript in this situation?

Currently in the process of converting a JavaScript project to TypeScript, I encountered this error message (utilizing urql):

A function whose declared type is neither 'void' nor 'any' must return a value. ts(2355)

on line:

playerCreate: (result, args, cache): UpdateResolver => {

Curious as to why this is happening?

const updates = {
  Mutation: {
    playerCreate: (result, args, cache): UpdateResolver => {
      const playersQueries = cache
        .inspectFields("Query")
        .filter((x) => x.fieldName === "players");
      playersQueries.forEach(({ fieldName, arguments: variables }) =>
        cache.invalidate("Query", fieldName, variables)
      );
    },

    playerDelete: (result, args, cache, info): UpdateResolver => {
      // utilizing result, args, and cache here
    },
  },
};

It appears that the declaration for Updateresolver looks like this:

export declare type UpdateResolver = (result: Data, args: Variables, cache: Cache, info: ResolveInfo) => void;

UPDATE:

After receiving feedback, it seems that my understanding is incorrect - I am indicating that the function returns an UpdateResolver while the type refers to the function itself, not the return type.

This leads me to enquire:

How should I properly define the types for playerCreate and playerDelete?

typescript

Answer 1

Answer №1

Consider updating the code to this:

const updates = {
  Mutation: {
    playerCreate: (result: Data, args: Variables, cache: Cache): void => {
      const playersQueries = cache
        .inspectFields("Query")
        .filter((x) => x.fieldName === "players");
      playersQueries.forEach(({ fieldName, arguments: variables }) =>
        cache.invalidate("Query", fieldName, variables)
      );
    },

    playerDelete: (result: Data, args: Variables, cache: Cache, info: ResolveInfo): void => {
      // using result, args, cache here
    },
  },
};

UPDATE: A way to achieve this is by utilizing the as operator:

const updates = {
  Mutation: {
    playerCreate: (((result, args, cache) => {
      const playersQueries = cache
        .inspectFields("Query")
        .filter((x) => x.fieldName === "players");
      playersQueries.forEach(({ fieldName, arguments: variables }) =>
        cache.invalidate("Query", fieldName, variables)
      );
    }) as UpdateResolver),

    playerDelete: (((result, args, cache, info) => {
      // using result, args, cache here
    }) as UpdateResolver),
  },
};

What does the as operator do in TypeScript?

It instructs the TypeScript compiler to treat the expression before the operator as the type specified after the operator. It allows for some unconventional behavior:

const test = "some string" as number;
// "test" is a number in this instance!!

Exercise caution when employing it! When used with functions, TypeScript expects parameter one to have type T, so it assumes that the function also accepts a parameter of type T.

An alternative to as exists but cannot be utilized in TSX files:

const something = <number>"hello";
// Avoid unless you are certain of the actual type!

The example provided is incorrect as TypeScript will view the string as a number, even though it isn't. However, it demonstrates the concept of type assertion.

Answer 2

Consider updating the code to this:

const updates = {
  Mutation: {
    playerCreate: (result: Data, args: Variables, cache: Cache): void => {
      const playersQueries = cache
        .inspectFields("Query")
        .filter((x) => x.fieldName === "players");
      playersQueries.forEach(({ fieldName, arguments: variables }) =>
        cache.invalidate("Query", fieldName, variables)
      );
    },

    playerDelete: (result: Data, args: Variables, cache: Cache, info: ResolveInfo): void => {
      // using result, args, cache here
    },
  },
};

UPDATE: A way to achieve this is by utilizing the as operator:

const updates = {
  Mutation: {
    playerCreate: (((result, args, cache) => {
      const playersQueries = cache
        .inspectFields("Query")
        .filter((x) => x.fieldName === "players");
      playersQueries.forEach(({ fieldName, arguments: variables }) =>
        cache.invalidate("Query", fieldName, variables)
      );
    }) as UpdateResolver),

    playerDelete: (((result, args, cache, info) => {
      // using result, args, cache here
    }) as UpdateResolver),
  },
};

What does the as operator do in TypeScript?

It instructs the TypeScript compiler to treat the expression before the operator as the type specified after the operator. It allows for some unconventional behavior:

const test = "some string" as number;
// "test" is a number in this instance!!

Exercise caution when employing it! When used with functions, TypeScript expects parameter one to have type T, so it assumes that the function also accepts a parameter of type T.

An alternative to as exists but cannot be utilized in TSX files:

const something = <number>"hello";
// Avoid unless you are certain of the actual type!

The example provided is incorrect as TypeScript will view the string as a number, even though it isn't. However, it demonstrates the concept of type assertion.

What is the correct way to define functions within an object using Typescript in this situation?

Answer №1

Similar questions

Leveraging typegoose in a multitenant environment within the nestjs framework

Tips for creating a custom hook that is type safe:

Tips for setting up a personalized preview mode in Sanity Studio using Next.js

Next.js React Server Components Problem - "ReactServerComponentsIssue"

Tips for creating basic Jasmine and Karma tests for an Angular application to add an object to an array of objects

What are some ways to make autorun compatible with runInAction in mobx?

An interface that is extended by an optional generic parameter

Instructions for disabling editing for a specific cell within an inline editable row in primeNG

Generating swagger documentation for TypeScript-based Express applications

What is the best way to conduct tests on Typescript modules that are not intended for

Angular strictPropertyInitialization - best practices for initializing class members?

Limit class generic to specify constructor argument type

Struggling with setting up the onChange function in a Next.js application

Obtain both the key and value from an Object using Angular 2 or later

Encountering errors while setting up routes with Browser Router

Testing Angular: Implementing Mock Classes and Services using the Any Data Type

How would you define 'Idiomatic' in the context of Idiomatic Javascript?

Encountering a getStaticProps error while using Typescript with Next.js

What is the process to verify a password?

What is the best way to create a fixed array of unchangeable objects?