After upgrading from 4.8.2 to 4.9.4, the type extension of third-party libraries becomes invalid.

[JaneSu]

🔎 Search Terms

• typescript type extends of third party
• d.ts not working

🕗 Version & Regression Information

There was no such issue in 4.8.4, but it was found that the extension of d.ts became invalid from 4.9.1-rc onwards, and this issue persists in subsequent versions.

⏯ Playground Link

No response

💻 Code

// page.tsx
import {useSelector} from 'react-redux

export const Page = ()=>{
  const name = useSelector(state=>state.name)
  return <div>test, { name }</div>
}

// index.d.ts
import 'react-redux'

declare module 'react-redux' {
  export function useSelector<any, any>(selector: (state: any) => any, equalityFn?: EqualityFn<any> | undefined): any
}

🙁 Actual behavior

The type definition used by useSelector is still from react-redux internally.

🙂 Expected behavior

useSelector uses the types defined in my d.ts file. Just like it performed in 4.8.4

Additional information about the issue

No response

[fatcerberus]

export function useSelector<any, any>(selector: (state: any) => any, equalityFn?: EqualityFn<any> | undefined): any

Is this even a legal declaration? I didn't think you could specialize generics like this.

[JaneSu]

export function useSelector<any, any>(selector: (state: any) => any, equalityFn?: EqualityFn<any> | undefined): any

Is this even a legal declaration? I didn't think you could specialize generics like this.

When my typescript version is 4.8.x, this declaration is indeed valid.

This is just an example used to distinguish the differences between 4.8.x and 4.9.x. I wouldn't write it like this in a real project. I mainly want to know what changes in 4.9.x would cause such differences.

[andrewbranch]

The declaration is not valid in any TS version, but that doesn’t stop it from being used. What changed is that in 4.8, we completely overwrite useSelector, whereas in later versions we add an overload. I think this is due to a bug in 4.8 where an export * alias in react-redux isn’t getting resolved before the declaration merge happens. My guess is this fixed it: #50853

But yeah, this is working as intended, and the behavior in 4.8 was a bug, sorry 😕

[JaneSu]

The declaration is not valid in any TS version, but that doesn’t stop it from being used. What changed is that in 4.8, we completely overwrite useSelector, whereas in later versions we add an overload. I think this is due to a bug in 4.8 where an export * alias in react-redux isn’t getting resolved before the declaration merge happens. My guess is this fixed it: #50853

But yeah, this is working as intended, and the behavior in 4.8 was a bug, sorry 😕

So can't I expand the type of useSelector in react-redux now? Or is there another way to write it?

[andrewbranch]

You did expand it; you added an overload. But your overload has the same arity as the other overloads and gets added to the end of the overload list, so it isn’t selected when you call the function.

[typescript-bot]

This issue has been marked as "Working as Intended" and has seen no recent activity. It has been automatically closed for house-keeping purposes.