Typescript error: The overload signature does not match its implementation signature

Question

Typescript error: The overload signature does not match its implementation signature

I am facing an issue with the code below. It seems to work fine without including setCurrentTab in the return interface useTabsReturnType, but as soon as I add it, the code stops working and I'm not sure why.

interface useTabsReturnType<T> {
  currentTab: T;
  setCurrentTab: React.Dispatch<React.SetStateAction<T>>;
}

export function useTabs(defaultValues: number): useTabsReturnType<number>;
//This overload signature is not compatible with its implementation signature.ts(2394)
export function useTabs(defaultValues: string): useTabsReturnType<string>;
export function useTabs(defaultValues?: string | number): useTabsReturnType<string | number> {
  const [currentTab, setCurrentTab] = useState(defaultValues || '');

  return {
    currentTab,
    setCurrentTab,
  };
}

edit: after following Radu Diță's suggestion I got this error:

Type 'Dispatch<SetStateAction<string | number>>' is not assignable to type 'Dispatch<SetStateAction<string>> | Dispatch<SetStateAction<number>>'.
  Type 'Dispatch<SetStateAction<string | number>>' is not assignable to type 'Dispatch<SetStateAction<string>>'.
    Type 'SetStateAction<string>' is not assignable to type 'SetStateAction<string | number>'.
      Type '(prevState: string) => string' is not assignable to type 'SetStateAction<string | number>'.
        Type '(prevState: string) => string' is not assignable to type '(prevState: string | number) => string | number'.
          Types of parameters 'prevState' and 'prevState' are incompatible.
            Type 'string | number' is not assignable to type 'string'.
              Type 'number' is not assignable to type 'string'.ts(2322)
useTabs.ts(20, 3): The expected type comes from property 'setCurrentTab' which is declared here on type 'useTabsReturnType<number> | useTabsReturnType<string>'

The error came from here:

return {
  currentTab,
  setCurrentTab,
  ^^^^^^^^^^^^^
};

typescript overloading react-typescript

Answer 1

Answer №1

Have you considered making your useTabs function more versatile?

export function useTabs<T extends string | number>(initialValue: T): useTabsReturnType<T> {
  const [activeTab, setActiveTab] = useState(initialValue);

  return {
    activeTab,
    setActiveTab,
  };
}

Answer 2

Have you considered making your useTabs function more versatile?

export function useTabs<T extends string | number>(initialValue: T): useTabsReturnType<T> {
  const [activeTab, setActiveTab] = useState(initialValue);

  return {
    activeTab,
    setActiveTab,
  };
}

Answer 3

Answer №2

If you're looking for a quick solution, consider adjusting the return type in the function's implementation. Here's an example:

export function useTabs(defaultValues?: string | number): useTabsReturnType<string> | useTabsReturnType<number> {
  const [currentTab, setCurrentTab] = useState(defaultValues || '');

  return {
    currentTab,
    setCurrentTab,
  };
}

Pay attention to the change from

useTabsReturnType<string | number>

to

useTabsReturnType<string> | useTabsReturnType<number>

Alternatively, you can utilize type and let TS distribute the union. Take a look at this example:

type useTabsReturnType<T> = T extends any ? {
  currentTab: T;
  setCurrentTab: React.Dispatch<React.SetStateAction<T>>;
} : never

This approach allows you to keep the function's return type unchanged.

Answer 4

If you're looking for a quick solution, consider adjusting the return type in the function's implementation. Here's an example:

export function useTabs(defaultValues?: string | number): useTabsReturnType<string> | useTabsReturnType<number> {
  const [currentTab, setCurrentTab] = useState(defaultValues || '');

  return {
    currentTab,
    setCurrentTab,
  };
}

Pay attention to the change from

useTabsReturnType<string | number>

to

useTabsReturnType<string> | useTabsReturnType<number>

Alternatively, you can utilize type and let TS distribute the union. Take a look at this example:

type useTabsReturnType<T> = T extends any ? {
  currentTab: T;
  setCurrentTab: React.Dispatch<React.SetStateAction<T>>;
} : never

This approach allows you to keep the function's return type unchanged.

Typescript error: The overload signature does not match its implementation signature

Answer №1

Answer №2

Similar questions

Issue with ng-multiselect-dropdown where clearing selected items programmatically does not visually work as expected

Experiencing a type error within Redux in a React Native project utilizing TypeScript

Steps for referencing a custom JavaScript file instead of the default one:

Translate JSON to TypeScript class. If the property is an object and not present in the JSON, the class should contain an empty object

Guide to accessing a newly opened window from a different domain originating from the current window

What causes the cursor in an editable div to automatically move to the front of the div?

Troubleshooting Issues with MUI MultiSelect Dropdown in TypeScript: Unable to Select or Update Values

Error encountered during compilation while attempting to import a JSON file in Angular 7

What is the best way to utilize the code generated by @graphql-codegen for fetching a single record?

Is it possible to retrieve a constant value while developing a customized rule in typescript-eslint?

Utilizing ES6 Promises in Mongoose with Typescript to Create a Seamless Chain

Enhance the annotation of JS types for arguments with default values

Defined a data type using Typescript, however, the underlying Javascript code is operating with an incorrect data type

ng namespace not found

How can I indicate separate paths for the identical dependencies listed in package.json?

Bringing in a service from a different module in NestJS

Getting the value from an array of objects in React Redux Toolkit

TS2339 Error: The property 'Default' is not a valid property for type 'string'

When attempting to assign a 'string' type to the @Input property, I am receiving an error stating that it is not assignable to the 'PostCard Layout' type

In TypeScript, is it possible to indicate that a function will explicitly define a variable?