New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: declarations of ContentSwitcher, Switch, Slider, SkeletonIcon #15382
fix: declarations of ContentSwitcher, Switch, Slider, SkeletonIcon #15382
Conversation
✅ Deploy Preview for v11-carbon-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
Addresses errors like: TS2305: Module '"@carbon/react"' has no exported member 'ContentSwitcher'. 12 import { ContentSwitcher } from "@carbon/react"; This contains two types of fixes: Whenever the underlying component is written in Typescript, the index file needs to be named index.ts. If it's named index.js, the build won't even generate an index.d.ts file. (The index file can also be named index.tsx, but that doesn't make sense unless it contains React markup.) I updated createClassWrapper() so that Typescript knows the type of the returned functional component: export function createClassWrapper<Props>( Component: ComponentClass<Props> ): FunctionComponent<Props> { ... } Note that the generated index.d.ts are a bit weird, for example /// <reference types="react" /> declare const Slider: import("react").FunctionComponent<import("./Slider").SliderProps>; If I add casting to the index.ts files themselves, ex: const Slider = createClassWrapper(SliderComponent) as FC<SliderProps>; That generates more canonical index.d.ts files: import { FC } from "react"; import { SliderProps } from './Slider'; declare const Slider: FC<SliderProps>; (So I can do that if you like.) Of course, the createClassWrapper() calls should be temporary, as all remaining class components should be converted to functional components. Refs #13550, #12557, #13574.
a26cadc
to
80761f2
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for this! I think the existing way is fine, canonical looks nicer but they're generated files and nobody's going to be actually reading or maintaining them anyway. I don't think there's any functional difference between the two?
Yeah I agree. I haven't finished converting our project to Carbon 11 yet but after this change, I don't get the error about |
b2cc298
…sign-system#15382) Addresses errors like: TS2305: Module '"@carbon/react"' has no exported member 'ContentSwitcher'. 12 import { ContentSwitcher } from "@carbon/react"; This contains two types of fixes: Whenever the underlying component is written in Typescript, the index file needs to be named index.ts. If it's named index.js, the build won't even generate an index.d.ts file. (The index file can also be named index.tsx, but that doesn't make sense unless it contains React markup.) I updated createClassWrapper() so that Typescript knows the type of the returned functional component: export function createClassWrapper<Props>( Component: ComponentClass<Props> ): FunctionComponent<Props> { ... } Note that the generated index.d.ts are a bit weird, for example /// <reference types="react" /> declare const Slider: import("react").FunctionComponent<import("./Slider").SliderProps>; If I add casting to the index.ts files themselves, ex: const Slider = createClassWrapper(SliderComponent) as FC<SliderProps>; That generates more canonical index.d.ts files: import { FC } from "react"; import { SliderProps } from './Slider'; declare const Slider: FC<SliderProps>; (So I can do that if you like.) Of course, the createClassWrapper() calls should be temporary, as all remaining class components should be converted to functional components. Refs carbon-design-system#13550, carbon-design-system#12557, carbon-design-system#13574.
Addresses errors like:
This contains two types of fixes:
Whenever the underlying component is written in Typescript, the index file needs to be named index.ts. If it's named index.js, the build won't even generate an index.d.ts file. (The index file can also be named index.tsx, but that doesn't make sense unless it contains React markup.)
I updated
createClassWrapper()
so that Typescript knows the type of the returned functional component:Note that the generated index.d.ts are a bit weird, for example
If I add casting to the index.ts files themselves, ex:
That generates more canonical index.d.ts files:
(So I can do that if you like.)
Of course, the
createClassWrapper()
calls should be temporary, as all remaining class components should be converted to functional components.Refs #13550, #12557, #13574.