Skip to content

TypeScriptify ssn-field pack#8796

Merged
aduth merged 1 commit intomainfrom
aduth-typescriptify-ssn-field
Jul 18, 2023
Merged

TypeScriptify ssn-field pack#8796
aduth merged 1 commit intomainfrom
aduth-typescriptify-ssn-field

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Jul 18, 2023

🛠 Summary of changes

Continues to chip away at our remaining tsconfig.json excludes exceptions for TypeScript, by porting ssn-field.js to TypeScript.

There are more refactoring opportunities with this file, but I kept the changes limited for review sake:

📜 Testing Plan

Verify no regressions in the behavior of SSN field formatting.

changelog: Internal, Code Quality, Convert JavaScript to TypeScript
@aduth aduth requested a review from mitchellhenke July 18, 2023 14:21
const inputs = document.querySelectorAll('input.ssn-toggle[type="password"]');
const inputs = document.querySelectorAll<HTMLInputElement>('input.ssn-toggle[type="password"]');

if (inputs) {
Copy link
Contributor Author

@aduth aduth Jul 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Future refactoring opportunity: This condition is unnecessary since the return value of querySelectorAll will always be truthy, even if the result is empty.

!![] === true

toggle.addEventListener('change', sync);

function limitLength() {
function limitLength(this: HTMLInputElement) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Future refactoring opportunity: this is probably more trouble than it's worth, and we could either pass input as a parameter or reference input directly from the parent scope.

Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

if (inputs) {
[].slice.call(inputs).forEach((input) => {
const toggle = document.querySelector(`[aria-controls="${input.id}"]`);
inputs.forEach((input) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did inputs have forEach all along? or was this something we get as part of dropping IE?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is possible because of dropping IE: https://caniuse.com/mdn-api_nodelist_foreach

@aduth aduth merged commit c6fe256 into main Jul 18, 2023
@aduth aduth deleted the aduth-typescriptify-ssn-field branch July 18, 2023 20:05
@aduth aduth mentioned this pull request Jul 19, 2023
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