[#1980] Standardise Array Style for Frontend Files

[sopa301]

Fixes #1980

Proposed commit message

Standardise Array Usage

Array<T> and T[] can be used interchangeably in TypeScript. We can use
the same style consistently across the codebase to make it easier for
developers to read and understand array types.

In Vue, using T[] in defineComponent requires casting in the form of
"Array as PropType<T[]>", while Array<T> can be used as is. Therefore,
it would be more consistent to use Array<T> for .vue files.
Additionally, such a rule can be enforced more easily with eslint.

Let's include a rule for eslint to check array usage and change the
code to follow this rule.

Other information

[jonasongg]

Just a small nit, but might be better to avoid cluttering the commit with changes to other lines in .eslintrc.json!

[sopa301]

I've removed the unrelated lines. It was added by mistake by the IDE :P

[jonasongg]

LGTM!

[ckcherry23]

@sopa301

Interestingly, while TypeScript makes no distinction between the two styles, Vue (particularly in defineComponent) only accepts Array<T> directly, while requiring something like [] as T[] for the other style. I would like some input from someone with more experience in Vue on this.

For now, I have implemented the rule only for the TS files as the Vue side doesn't seem so clear-cut.

Thanks for your investigation regarding this! For defining arrays with the T[] syntax within Vue's defineComponent, you can try using Array as PropType<T[]>.

However, it does seem that Array<T> would be shorter and better for such use cases. If possible, switch to the Array<T> syntax for all array uses within defineComponent. Otherwise, we can standardise to Array as PropType<T[]>. Thanks!

[sopa301]

@ckcherry23 Thank you for the review! I'm thinking using Array for all Vue files is more consistent and enforceable, but I can change only the defineComponent code if needed. Or we could go with Array as PropType<T[]>. I'll try to check if the latter is enforceable via eslint.

[ckcherry23]

@sopa301 This looks good to me! Thanks for your work!

[ckcherry23]

@sopa301 Can you please resolve the merge conflicts?

[vvidday]

LGTM, nice job

[github-actions]

The following links are for previewing this pull request:

• Dashboard Preview: https://dashboard-2084-pr-reposense-reposense.surge.sh
• Docs Preview: https://docs-2084-pr-reposense-reposense.surge.sh