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-check to 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 .tsx file and validate whether or not it accepts the props as you’ve defined them.

Resources

Carbon’s guide on adding component types