Add TypeScript types for @carbon/icons

[artemkolotilkin]

Since @carbon/icons-angular package is outdated and no longer maintained, I'm trying to use @carbon/icons package in my Angular project. Unfortunately, Angular complains that types are missing. It would be great to have them added.

[tay1orjones]

Thanks for reporting. Types are slowly being added by the community, focusing on the react components first #12513.

Icons haven't really been looked at or discussed yet, but an idea for @carbon/icons-react is up at #12034

[lewandom]

I did some research on this + a bit of (mostly unsuccessful) experiments.

What I've been successful with is I've been able to convert the Icon.js file into Icon.tsx and get it properly recognized and transformed by @carbon/icon-build-helpers (with a bit of babel configs tuning) to produce JS code. This means that we at least have some TS source to generate TS definitions for the base Icon type.

The bad news is, @carbon/icon-build-helpers uses rollup virtual plugin, which is not supported by the rollup typescript plugin: rollup/plugins#567. Therefore, we don't get any TS definitions (even for the aforementioned base Icon component) directly out of the build process. Even if we could feed virtual code into rollup typescript plugin, we'd get the definitions for base types only, and not for the generated JS code (or the definitions would be useless).

Based on the above, I see 2 options:

1. Convert generated code from JS (uses Babel AST to generate) to TS (need to research how we can generate TS code) and write to temporary files instead of virtual memory.
2. Leave JS generation as it is, and experiment with generating TS definition (.d.ts) files separately, e.g. using TS compiler in a standalone manner for the Icon class and bypassing it completely for the generated code (again need to investigate possible options to generate TS code).

@tay1orjones any suggestions / thoughts?

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.