Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add TypeScript types for JavaScript components #413

Merged
merged 5 commits into from
Mar 1, 2024
Merged

Conversation

aduth
Copy link
Contributor

@aduth aduth commented Mar 1, 2024

🛠 Summary of changes

Includes TypeScript types in the published NPM package for JavaScript components.

This basically republishes @uswds/uswds DefinitelyTyped types, with corrected LGDS aliases and missing type definitions for newer components. There were a handful of different errors with the DefinitelyTyped types, and I may work to propose an upstream patch to resolve these, which would hopefully allow the typings of this package to be simplified.

This doesn't include enforcement that the typings exactly reflect the exported components, which I'd like to add in future iterations to provide similar guarantees to what's asserted in test/components/index.test.js.

📜 Testing Plan

I tested this in identity-idp by changing its @18f/identity-design-system dependency to point to the local filesystem copy and verifying that component references include autocompletion and type validation.

diff --git a/package.json b/package.json
index b6af77174..be85052f8 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "build:css": "build-sass app/assets/stylesheets/*.css.scss app/components/*.scss --load-path=app/assets/stylesheets --out-dir=app/assets/builds"
   },
   "dependencies": {
-    "@18f/identity-design-system": "^8.1.2",
+    "@18f/identity-design-system": "file:../identity-design-system",
     "@babel/core": "^7.20.7",
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",

In identity-idp:

  1. Apply patch above
  2. Clear and reinstall dependencies: rm -rf node_modules && yarn
  3. Run TypeCheck: yarn typecheck
  4. (Optional) Check auto-completion support in supported IDE such as VS Code

Example (app/javascript/packages/clipboard-button/clipboard-button-element.ts):

image

@aduth
Copy link
Contributor Author

aduth commented Mar 1, 2024

There were a handful of different errors with the DefinitelyTyped types, and I may work to propose an upstream patch to resolve these, which would hopefully allow the typings of this package to be simplified.

Upstream: DefinitelyTyped/DefinitelyTyped#68863

@aduth aduth merged commit 6c68c10 into main Mar 1, 2024
2 checks passed
@aduth aduth deleted the aduth-typescript-types branch March 1, 2024 19:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants