ibm-products
ibm-products copied to clipboard
Add Typescript types to TagSet
As we add Typescript support, want to call out a few helpful tips from the Carbon TypeScript guide that is largely relevant to our library as well.
Changing the extension via git
When changing the file extension — do not simply rename the file. Instead, change the extension via git.
For example,
git mv packages/ibm-products/src/components/ComponentName/ComponentName.js packages/ibm-products/src/components/ComponentName/ComponentName.tsx
Do not add types to internal components or functions
- Leave internals as
.js - Add a jsdoc type annotation of
/** @type any */ - Enable errors by adding
// @ts-checkto the first line in the file.
Testing changes
A few different options for testing changes —
- At the bottom of a file, write a dummy component that uses the component that you’re converting to ensure that you can still pass all appropriate props.
- Take a storybook example for a component, copy and paste it into the bottom of the
.tsxfile and validate whether or not it accepts the props as you’ve defined them.
### Tasks
- [ ] Change extension to `.tsx` **via git** (**do not simply rename**, see above)
- [ ] Copy the PropTypes definitions above the component definition
- [ ] Retool the PropTypes to be a TypeScript interface
- [ ] Fix errors as they appear
- [ ] Do NOT add types to internal components or functions that are not exported as part of the public API
- [ ] Test your changes (see above)
Resources
Carbon’s guide on adding component types
Should create separate issues for subcomponents.