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

Importing TypeScript enums into a Vue or browser context can lead to errors or the need for additional dependencies

What is the process for utilizing datePipe in an Angular component?

Angular v15 Footer Component Table

Challenges arise when attempting to break down an API into separate components rather than consolidating it into a

What could be causing my Vue code to behave differently than anticipated?

Guide on creating dynamic route paths for includes within a Pug template

Expanding properties in a React component based on certain conditions using TypeScript

Is there a way to utilize a nearby directory as a dependency for a separate Typescript project?

Merge two observables together to create a single observable that emits values from both sources. Only one observable will emit values

Angular Fails to Identify Chart.js Plugin as an Options Attribute

Using an External JavaScript Library in TypeScript and Angular 4: A Comprehensive Guide

Ways to extract information from an Object and save it into an array

Issue: Unable to locate a change supporting element '[object Object]' of the type 'object - Angular 7'

Trouble arises when attempting to import React JSX project/modules from npm into an AngularJS TypeScript module

What role does the @Input statement in the HeroDetailComponent class serve in the Angular 2 Quickstart tutorial?

Leverage the power of forkJoin in JavaScript by utilizing objects or sourcesObject

Mastering the Art of Promises in RXJS Observables

Resolve the error message "variable is utilized prior to assignment"

Error TS2345: The function with arguments of type '(req: any, res: any, ctx: any) => any' cannot be assigned to the parameter of type 'HttpResponseResolver<PathParams<string>'

What is the best way to automatically focus on my input when the page loads?