Add TypeScript types to `@carbon/react` components

[tay1orjones]

This issue is to track the implementation of TypeScript definitions for components exported from @carbon/react.

The lists below organize all exports from the package that need to have types added into three categories: high, medium, and low priority. There is a project board for this effort as well.

How to contribute

• If you'd like to contribute, please comment in the component issue stating your intent to work on an issue.
• If that person has not submitted a PR within 10 days, consider it available again.

Thanks so much for assisting with this huge effort! 🙏

Every checklist item below needs the following:

1. Add component types for all components listed in the title by following the adding component types documentation
2. Submit a pull request for the changes
   • Please keep pull requests as small as possible
   • Avoid adding additional components to a single PR unless necessary
   • Link to close the related issue, e.g. Closes #12513

---

High priority

DataTable

• [x] #12515
• [x] #12516
• [x] #12517
• [x] #12518
• [x] #12519
• [x] #12520
• [x] #12521
• [x] #12522
• [x] #12523
• [x] #12524
• [x] #12525
• [x] #12526
• [x] #12527
• [x] #12528
• [x] #12529
• [x] #12530
• [x] #12531
• [x] #12532
• [x] #12533
• [x] #12534
• [x] #12535
• [x] #12536

Grid

• [x] #12537

Inputs

• [x] #12654
• [x] #12655
• [x] #12538
• [x] #12539
• [x] #12540
• [x] #12541
• [x] #12542
• [x] #12543
• [x] #12544
• [x] #12545
• [ ] #12546
• [x] #12547
• [x] #12548
• [x] #12549
• [x] #12550
• [x] #12551
• [x] #12552
• [x] #12553
• [x] #12554
• [x] #12555
• [x] #12556
• [x] #12557
• [x] #12558
• [x] #12559
• [x] #12560
• [x] #12561
• [x] #12562
• [x] #12563
• [x] #12564
• [x] #12565
• [x] #12566

Medium priority

• [x] #13228
• [x] #13534
• [x] #13535
• [x] #13536
• [ ] #13237
• [x] #13230
• [x] #13537
• [x] #13538
• [x] #13539
• [x] #13540
• [ ] #13541
• [x] #13542
• [x] #13543
• [x] #13231

Low priority

• [x] #13544
• [x] #13545
• [x] #13546
• [x] #13229
• [x] #13547
• [x] #13548
• [ ] #13549
• [x] #13550
• [ ] #13551
• [ ] #13227
• [x] #13552
• [x] #13048
• [x] #13553
• [x] #13554
• [x] #13555
• [x] #13556
• [x] #13557
• [x] #13232
• [x] #13558
• [ ] #13559
• [x] #13560
• [x] #13561
• [x] #13562
• [x] #13563
• [x] #13564
• [x] #13565
• [ ] #13566
• [x] #13567
• [x] #13569
• [x] #13570
• [x] #13571
• [ ] #13572
• [x] #13573
• [x] #13574
• [x] #13575
• [x] #13576
• [x] #13577
• [x] #13578
• [x] #12657
• [x] #13579
• [x] #13580
• [ ] #13581

UIShell

• [x] #13582
• [x] #13583
• [x] #13584

UIShell Header

• [ ] #13585
• [x] #13586
• [ ] #13587
• [ ] #13588
• [ ] #13589
• [x] #13590
• [x] #13591
• [x] #13592
• [x] #13593
• [x] #13594
• [x] #13595

UIShell SideNav

• [x] #13596
• [x] #13597
• [x] #13598
• [x] #13599
• [x] #13600
• [x] #13601
• [x] #13602
• [x] #13603
• [ ] #13604
• [x] #13605
• [x] #13606
• [x] #13607
• [x] #13608

Menu-based components

• [x] #15177
• [ ] #15178

Hooks

• [x] #12656

Feature flagged components

• [ ] #15179

[HiggsGaama]

Hello, the https://github.com/carbon-design-system/carbon/tree/main/docs/guides repository doesn't contain any 'adding-component-types.md'.

[tw15egan]

@HiggsGaama It will be added once this PR is merged: https://github.com/carbon-design-system/carbon/pull/12514

[lewandom]

@tay1orjones I'd like to work on Dropdown component + it's dependencies: ListBox and FluidForm.

[tay1orjones]

@lewandom Awesome! Please comment on the individual component issues so interest/assignments are visible there in context

[lewandom]

@tay1orjones would you mind creating issues for the Medium priority list? I'd like to take over at a few of the items there.

[tw15egan]

@lewandom any in particular you wanted to tackle?

[AlexanderMelox]

I'll work on CopyButton

[lewandom]

@tw15egan I'm willing to take Notification family, but it also has (transitive) dependencies on things like Button + IconButton + Tooltip + Popover, or at least that's what I've figured out for now (maybe there's more). So I guess at least these listed. Thanks! :)

[tw15egan]

Opened issues for the components listed. Not letting me assign you just yet, but if you comment on whichever one you are actively working on, I should be able to tag you 👍🏻 Thanks!

[Ivangrasp]

I'm sure someone has already asked this, but I'm unable to find it. Has anyone worked on or proposed the idea to automate this? I cannot imagine this has not been proposed, so I'm assuming is not possible, but I'm interested in reading that discussion and understand why it might/is not be possible to do it.

[kubijo]

Hey guys. I intend to redirect company un-assigned time of me and my colleague to helping with this issue to hasten it's completion and ultimately unblock the upgrade for us.

Is there anything you'd like to point us to in addition to all that is already written around and better use our time?

If my past experience is anything to go by, we should have quite some time to offer, so I'd like it to be used well and to be able to show my employer how it's moving us forward.

Thanks for the work and all that jazz... Looking forward to working together.

[m4ttheweric]

Really interested in the outcome of this project! Looking at potentially adopting this for some cool projects, but the lack of comprehensive TS support is a potential prohibition. Love the work you are all doing, and just saying this to encourage any momentum you may have!

[FBachini]

I think ComboButton and its Menu (and Menu Items) are missing an issue here. I can work on them, but an issue here would be great to keep track of!

[tay1orjones]

@FBachini Thanks for pointing that out, I just created issues for Menu/MenuItem, ComboButton, and next/OverflowMenu.

[imp-dance]

Does anyone have experience using Carbon with Typescript in it's current state? We would love to upgrade at work, but this is quite the major blocker for us. It does seem like there's very few components left though. I'll try to punch out a few more as soon as I have the time.

[imp-dance]

The following issues can/should be closed:

• #13539
• #12528
• #12552
• #12566
• #13535
• #13536
• #13537
• #13548
• #13576

This leaves only a handful of open items! We're closing in. 🚀

[tay1orjones]

Thank you @imp-dance! I agree, just closed them. There's some teams within IBM using Carbon with Typescript in it's current state. The general consensus has been to use //ts-ignore on imports/components that don't yet have types.

[manuelvegadev]

Thank you @imp-dance! I agree, just closed them. There's some teams within IBM using Carbon with Typescript in it's current state. The general consensus has been to use //ts-ignore on imports/components that don't yet have types.

Just like me 😆

[imp-dance]

Thank you @imp-dance! I agree, just closed them. There's some teams within IBM using Carbon with Typescript in it's current state. The general consensus has been to use //ts-ignore on imports/components that don't yet have types.

Just like me 😆

I could always just declare the types manually using a declaration file as well I suppose. Wondering if we just bite the bullet and go ahead. I'm assuming the ones that are finished have their types shipped along with them in the new package now?

[tay1orjones]

@imp-dance Yep, that's another approach some have taken as well. And yes the d.ts files are automatically compiled and shipped as part of @carbon/react now.

[sstrubberg]

• Make sure all the types are fully exported.
• Cover those exports with tests
• Maybe eventually put them under semver
• Have documentation that clearly defines our stance and commitment to typescript support.
• Follow up with the community to see what else they need to be sucessful.

[lukababu]

I wanted to use the prop types for one of the components (ProgressBar). There is no export for the prop type. Is this something I could create a PR for or this is not part of the road map?

[Agile-fox]

@tay1orjones CheckboxGroup component seems to be missing from the list 😄

[jfroffice]

any updates on this MR.

Is it possible at least to merge the migrations that have been already done.

It would be helpful.

[imp-dance]

Does anyone have experience using Carbon with Typescript in it's current state? We would love to upgrade at work, but this is quite the major blocker for us. It does seem like there's very few components left though. I'll try to punch out a few more as soon as I have the time.

Just wanted to give an update here for anyone considering upgrading.

Updating was relatively painless. I'd definitely recommend anyone trying this to use the migration tools provided. After running these, we updated our SASS (which was a bit of a pain just because we've set it up unconventionally), then we went through the components that have changed (surprisingly few) and either wrapped them to not break our own behaviour, or just updated the interface wherever possible. After finally adding a few missing type definitions in a index.d.ts file everything is up and running again!

The missing type definitions should not be a blocker, there are so few left and it's pretty straight forward to just add your own type definitions for whatever is missing. Example:

// index.d.ts

type OverflowMenuProps = {...}; // use Storybook for reference

declare module "@carbon/react" {
   export * from "@carbon/react";
   export const OverflowMenu: (props: OverflowMenuProps) => React.ReactNode;
   // ....
}

[2nikhiltom]

Hey @Agile-fox

CheckboxGroup component seems to be missing from the list 😄

Good catch, it will be tracked via this issue

[Mechons]

Hi I'm getting this error while importing carbon component in my tsx file .

I'm using carbon/ react version "@carbon/react": "^1.33.0",.

please recommend how to resolve this

@jfroffice @tay1orjones