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 consistent types to functions #1245

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

add consistent types to functions #1245

wants to merge 1 commit into from

Conversation

micahchiang
Copy link
Contributor

@micahchiang micahchiang commented Jul 29, 2024

Chromatic

https://mc-ts-updates--65a6e2ed2314f7b8f98609d8.chromatic.com


Description

Some of our functions contain things like return types and parameter types while others do not. Many functions also include JSDoc annotations that include parameter types and descriptions. While this is helpful, it doesn't necessarily provide the static type checking we may want from Typescript.

For example, the replaceName function in our instance of the file input upgrader. While the s parameter is given the String type in its JSDoc comment, it's never assigned a type in the parameter list and defaults to any, which introduces a potential silent failure like this:

Screenshot from 2024-07-29 12-54-20

Assigning the s parameter an explicit type of string gets us the intellisense we'd expect from the typescript server:

Screenshot from 2024-07-29 12-54-42

This pull request adds types to our function type expressions that were missing them.

Signed-off-by: Micah Chiang <micahkchiang@gmail.com>
@micahchiang micahchiang changed the title add consistent types to call signatures add consistent types to functions Jul 29, 2024
Copy link
Contributor

@Andrew565 Andrew565 left a comment

Choose a reason for hiding this comment

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

Just a few suggestions!


private dismiss = () => {
private dismiss = (): string => {
Copy link
Contributor

Choose a reason for hiding this comment

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

This returns void, not a string.

private validateBreadcrumbs(breadcrumbList: Breadcrumb[] | string) {
private validateBreadcrumbs(
breadcrumbList: Breadcrumb[] | string,
): boolean | Breadcrumb[] {
Copy link
Contributor

Choose a reason for hiding this comment

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

If you make the return type : false | Breadcrumb[] it will simplify the logic above (separate comment there).

@@ -69,9 +69,10 @@ export class VaBreadcrumbs {
@Watch('breadcrumbList')
watchBreadcrumbListHandler(breadcrumbList) {
if (!this.breadcrumbList?.length) return;
let potentialBreadcrumbs = this.validateBreadcrumbs(breadcrumbList);
let potentialBreadcrumbs: Breadcrumb[] | boolean =
Copy link
Contributor

Choose a reason for hiding this comment

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

If you adjust the return type for validateBreadcrumbs to be false | Breadcrumb[] then you don't need to specify the type of potentialBreadcrumbs explicitly.

if (potentialBreadcrumbs) {
this.updateBreadCrumbList(potentialBreadcrumbs);
this.updateBreadCrumbList(potentialBreadcrumbs as Breadcrumb[]);
Copy link
Contributor

Choose a reason for hiding this comment

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

If you adjust the return type as stated above, you can remove as Breadcrumb[] here.

@@ -237,10 +240,11 @@ export class VaBreadcrumbs {
if (this.uswds) {
if (!this.breadcrumbList?.length) return;

let potentialBreadcrumbs = this.validateBreadcrumbs(this.breadcrumbList);
let potentialBreadcrumbs: Breadcrumb[] | boolean =
Copy link
Contributor

Choose a reason for hiding this comment

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

Same as above, can remove typing here if you adjust validateBreadcrumbs.


if (potentialBreadcrumbs) {
this.updateBreadCrumbList(potentialBreadcrumbs);
this.updateBreadCrumbList(potentialBreadcrumbs as Breadcrumb[]);
Copy link
Contributor

Choose a reason for hiding this comment

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

Same as above.

@@ -300,17 +301,16 @@ const removeOldPreviews = (dropTarget, instructions) => {
* @param {Object} fileNames - The selected files found in the fileList object.
* @param {Array} fileStore - The array of uploaded file names created from the fileNames object.
*/
const updateStatusMessage = (statusElement, fileNames, fileStore) => {
const updateStatusMessage = (statusElement: HTMLDivElement | Element, fileNames: FileList | File[], fileStore: string[]): void => {
Copy link
Contributor

Choose a reason for hiding this comment

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

This can be simplified to statusElement: Element as every element will match that type.

const multiple = fileInputEl.getAttribute('multiple'); // TODO: Double-check this works correctly when multiple is re-enabled
const fileNames = multiple ? e.target.files : [e.target.files[0]];
const fileNames = multiple ? (e.target as HTMLInputElement).files : [(e.target as HTMLInputElement).files[0]];
Copy link
Contributor

Choose a reason for hiding this comment

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

Instead of casting the type twice, you could store e.target as a separate variable and cast it once maybe?

@@ -148,12 +149,12 @@ export const days = {
* Return true if the year is a leap year.
* (Exported for testing purposes)
*/
export function checkLeapYear(year: number) {
export function checkLeapYear(year: number): boolean {
Copy link
Contributor

Choose a reason for hiding this comment

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

I'd love to rename this to isLeapYear but that may be more trouble than it's worth for what's essentially a personal preference.

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