Add Typescript types to Card, CardFooter, CardHeader

[sstrubberg]

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.

Tasks

Beta Give feedback

1. Change extension to .tsx via git (do not simply rename, see above)
2. Copy the PropTypes definitions above the component definition
3. Retool the PropTypes to be a TypeScript interface
4. Fix errors as they appear
5. Do NOT add types to internal components or functions that are not exported as part of the public API
6. Test your changes (see above)

Resources

Carbon’s guide on adding component types