TypeScript typings are swallowed for most of the components

[yamafaktory]

🐛 Bug Report

Hi folks 👋,

First of all, thanks for the massive work done on this project!

Back to the bug report: there's an issue with TypeScript's types for most of the components. It seems like React.forwardRef is the culprit here.

🤔 Expected Behavior

All the components should expose their types correctly - i.e. no any.

😯 Current Behavior

For example, the following View component - when imported - is inferred as any:

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/view/src/View.tsx#L45

Whereas a Button works totally fine:

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/button/src/Button.tsx#L96

💁 Possible Solution

Enforce proper types exposition (via aliasing).

🔦 Context

I encountered that while using React Spectrum in production project.

💻 Code Sample

Not relevant.

🌍 Your Environment

Software	Version(s)
react-spectrum	3.9.0
typescript	4.2.3
Browser	not relevant
Operating System	not relevant

🧢 Your Company/Team

Not relevant.

🕷 Tracking Issue (optional)

None.

[LFDanLu]

I believe you are correct with forwardRef being the culprit, think we need to add something like as (props: ViewProps & {ref: DOMRef}) => ReactElement; to View.

[LFDanLu]

@yamafaktory Apologies, but "present" me doesn't remember what reproduction steps "past" me did to figure out the above fix. I made a codesandbox here: https://codesandbox.io/s/sparkling-butterfly-1gvyr?file=/src/App.tsx and it looks like View has the proper typing here. Does your project have any additional configurations that are different from this sandbox?

[yamafaktory]

@LFDanLu Thanks a ton for the feedback and effort!

Indeed your sandbox works fine. I tried to reproduce it - i.e. make it work in my private project - by upgrading to the latest TS version and React types without success. Then I noticed that the real issue is that React Spectrum uses https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports set to true (https://github.com/adobe/react-spectrum/blob/main/tsconfig.json#L11) and then you're doing all the React imports like e.g. https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/view/src/View.tsx#L16.

So basically, with allowSyntheticDefaultImports set to false, the React import doesn't resolve correctly for the types:

It should be done like that:

This is also the recommended way to do it since React as no more default export, see facebook/react#18102.

TL;DR: either folks like me have to set allowSyntheticDefaultImports to true, or React Spectrum should update all the imports accordingly.

N.B.: I'm not using Babel to transpile the code but ESBuild, that's why I was not using this option, see again https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports:

For convenience, transpilers like Babel will automatically create a default if one isn’t created

[LFDanLu]

Thanks for all the investigation! Will make a note to bring this up in our next planning.

[yamafaktory]

Thanks a ton @LFDanLu 🙇!

[devongovett]

Pretty sure this is no longer an issue.