[#2002] Add explicit return type annotations to TypeScript functions …

…in *.vue files (#2125) Many frontend functions lack return types after migration to TypeScript, which can cause errors due to TypeScript's attempted type inference being incorrect. Specifying return type explicitly can allow TypeScript to catch errors before the code is run. Let us add return type annotations to TypeScript functions within Vue files. --------- Co-authored-by: David <[email protected]>
reposense · Apr 13, 2024 · 2692f0f · 2692f0f
1 parent b139a95
commit 2692f0f
Show file tree

Hide file tree

Showing 12 changed files with 259 additions and 154 deletions.
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -97,7 +97,9 @@
  "default": "generic",
  "readonly": "generic"
  }
- ]
+ ],
+ "no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": ["error"]
  }
  }
  ]

diff --git a/frontend/src/app.vue b/frontend/src/app.vue
@@ -38,7 +38,16 @@ const app = defineComponent({
  components: {
  LoadingOverlay,
  },
- data() {
+ data(): {
+ repos: { [key: string]: Repo },
+ users: Array<Repo>
+ userUpdated: boolean,
+ loadingOverlayOpacity: number,
+ tabType: string,
+ creationDate: string,
+ reportGenerationTime: string,
+ errorMessages: { [key: string]: ErrorMessage }
+ } {
  return {
  repos: {} as { [key: string]: Repo },
  users: [] as Array<Repo>,
@@ -56,17 +65,17 @@ const app = defineComponent({
  ...mapState(['loadingOverlayCount', 'loadingOverlayMessage', 'isTabActive']),
  },
  watch: {
- '$store.state.tabZoomInfo': function () {
+ '$store.state.tabZoomInfo': function (): void {
  if (this.$store.state.tabZoomInfo.isRefreshing) {
  return;
  }
  this.activateTab('zoom');
  },
- '$store.state.tabAuthorshipInfo': function () {
+ '$store.state.tabAuthorshipInfo': function (): void {
  this.activateTab('authorship');
  },
  },
- created() {
+ created(): void {
  try {
  window.decodeHash();
  } catch (error) {
@@ -76,7 +85,7 @@ const app = defineComponent({
  },
  methods: {
  // model functions //
- updateReportZip(evt: Event) {
+ updateReportZip(evt: Event): void {
  this.users = [];
  const target = evt.target as HTMLInputElement;
  if (target.files === null) {
@@ -92,14 +101,14 @@ const app = defineComponent({
  .then(() => this.updateReportView());
  },
 
- updateReportDir() {
+ updateReportDir(): void {
  window.REPORT_ZIP = null;
 
  this.users = [];
  this.updateReportView();
  },
 
- async updateReportView() {
+ async updateReportView(): Promise<void> {
  this.$store.commit('updateLoadingOverlayMessage', loadingResourcesMessage);
  this.userUpdated = false;
  await this.$store.dispatch('incrementLoadingOverlayCountForceReload', 1);
@@ -131,7 +140,7 @@ const app = defineComponent({
  this.$store.commit('incrementLoadingOverlayCount', -1);
  }
  },
- getUsers() {
+ getUsers(): void {
  const full: Array<Repo> = [];
  Object.keys(this.repos).forEach((repo) => {
  if (this.repos[repo].users) {
@@ -142,7 +151,7 @@ const app = defineComponent({
  },
 
  // handle opening of sidebar //
- activateTab(tabName: string) {
+ activateTab(tabName: string): void {
  if (this.$refs.tabWrapper) {
  (this.$refs.tabWrapper as HTMLElement).scrollTop = 0;
  }
@@ -153,7 +162,7 @@ const app = defineComponent({
  window.encodeHash();
  },
 
- renderAuthorShipTabHash(minDate: string, maxDate: string) {
+ renderAuthorShipTabHash(minDate: string, maxDate: string): void {
  const hash = window.hashParams;
  const info: AuthorshipInfo = {
  author: hash.tabAuthor,
@@ -173,7 +182,7 @@ const app = defineComponent({
  }
  },
 
- renderZoomTabHash() {
+ renderZoomTabHash(): void {
  const hash = window.hashParams;
  const zoomInfo: ZoomInfo = {
  isRefreshing: true,
@@ -196,7 +205,7 @@ const app = defineComponent({
  }
  },
 
- renderTabHash() {
+ renderTabHash(): void {
  const hash = window.hashParams;
  if (!hash.tabOpen) {
  return;
@@ -217,15 +226,15 @@ const app = defineComponent({
  }
  },
 
- getRepoSenseHomeLink() {
+ getRepoSenseHomeLink(): string {
  const version = window.repoSenseVersion;
  if (!version) {
  return `${window.HOME_PAGE_URL}/RepoSense/`;
  }
  return `${window.HOME_PAGE_URL}`;
  },
 
- getRepoLink() {
+ getRepoLink(): string | undefined {
  const { REPOS, hashParams } = window;
  const { location, branch } = REPOS[hashParams.tabRepo];
 

diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
@@ -84,7 +84,7 @@ export default defineComponent({
  default: false,
  },
  },
- data() {
+ data(): {rampSize: number} {
  return {
  rampSize: 0.01 as number,
  };
@@ -100,16 +100,16 @@ export default defineComponent({
  },
 
  methods: {
- getLink(commit: CommitResult) {
+ getLink(commit: CommitResult): string | undefined {
  return window.getCommitLink(commit.repoId, commit.hash);
  },
- getContributions(commit: CommitResult | Commit) {
+ getContributions(commit: CommitResult | Commit): number {
  return commit.insertions + commit.deletions;
  },
- isDeletesContribution(commit: CommitResult | Commit) {
+ isDeletesContribution(commit: CommitResult | Commit): boolean {
  return commit.insertions === 0 && commit.deletions > 0;
  },
- getWidth(slice: CommitResult | Commit) {
+ getWidth(slice: CommitResult | Commit): number {
  // Check if slice contains 'isMergeCommit' attribute
  if ('isMergeCommit' in slice && slice.isMergeCommit) {
  return this.mergeCommitRampSize;
@@ -124,17 +124,17 @@ export default defineComponent({
  const newSize = 100 * (slice.insertions / +this.avgsize);
  return Math.max(newSize * this.rampSize, 0.5);
  },
- getContributionMessageByCommit(slice: Commit, commit: CommitResult) {
+ getContributionMessageByCommit(slice: Commit, commit: CommitResult): string {
  return `[${slice.date}] ${commit.messageTitle}: +${commit.insertions} -${commit.deletions} lines `;
  },
- getContributionMessage(slice: Commit) {
+ getContributionMessage(slice: Commit): string {
  let title = this.tframe === 'day'
  ? `[${slice.date}] Daily `
  : `[${slice.date} till ${slice.endDate}] Weekly `;
  title += `contribution: +${slice.insertions} -${slice.deletions} lines`;
  return title;
  },
- openTabZoom(user: User, slice: Commit, evt: MouseEvent) {
+ openTabZoom(user: User, slice: Commit, evt: MouseEvent): void {
  // prevent opening of zoom tab when cmd/ctrl click
  if (window.isMacintosh ? evt.metaKey : evt.ctrlKey) {
  return;
@@ -171,27 +171,27 @@ export default defineComponent({
  },
 
  // position for commit granularity
- getCommitPos(i: number, total: number) {
+ getCommitPos(i: number, total: number): number {
  return (((total - i - 1) * window.DAY_IN_MS) / total)
  / (this.getTotalForPos(this.sdate, this.udate) + window.DAY_IN_MS);
  },
  // position for day granularity
- getSlicePos(date: string) {
+ getSlicePos(date: string): number {
  const total = this.getTotalForPos(this.sdate, this.udate);
  return (new Date(this.udate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
  },
 
  // get duration in miliseconds between 2 date
- getTotalForPos(sinceDate: string, untilDate: string) {
+ getTotalForPos(sinceDate: string, untilDate: string): number {
  return new Date(untilDate).valueOf() - new Date(sinceDate).valueOf();
  },
- getRampColor(commit: CommitResult, slice: Commit) {
+ getRampColor(commit: CommitResult, slice: Commit): number | '-deletes' {
  if (this.isDeletesContribution(commit)) {
  return '-deletes';
  }
  return this.getSliceColor(slice);
  },
- getSliceColor(slice: Commit) {
+ getSliceColor(slice: Commit): number | '-deletes' {
  if (this.isDeletesContribution(slice)) {
  return '-deletes';
  }
@@ -203,13 +203,13 @@ export default defineComponent({
  },
 
  // Prevent browser from switching to new tab when clicking ramp
- rampClick(evt: MouseEvent) {
+ rampClick(evt: MouseEvent): void {
  const isKeyPressed = window.isMacintosh ? evt.metaKey : evt.ctrlKey;
  if (isKeyPressed) {
  evt.preventDefault();
  }
  },
- getReportLink() {
+ getReportLink(): string | undefined {
  if (this.isWidgetMode) {
  const url = window.location.href;
  const regexToRemoveWidget = /([?&])((chartIndex|chartGroupIndex)=\d+)/g;

diff --git a/frontend/src/components/c-resizer.vue b/frontend/src/components/c-resizer.vue
@@ -34,9 +34,9 @@ const GUIDE_BAR_WIDTH = 2;
  * parameters, i.e. an event of type MouseEvent.
  */
 // eslint-disable-next-line no-unused-vars
-const throttledEvent = (delay: number, handler: (event: MouseEvent) => unknown) => {
+const throttledEvent = (delay: number, handler: (event: MouseEvent) => unknown): ((event: MouseEvent) => void) => {
  let lastCalled = 0;
- return (event: MouseEvent) => {
+ return (event: MouseEvent): void => {
  if (Date.now() - lastCalled > delay) {
  lastCalled = Date.now();
  handler(event);
@@ -47,7 +47,11 @@ const throttledEvent = (delay: number, handler: (event: MouseEvent) => unknown)
 export default defineComponent({
  name: 'c-resizer',
 
- data() {
+ data(): {
+ guideWidth: number,
+ flexWidth: number,
+ isResizing: boolean
+ } {
  return {
  guideWidth: (0.5 * window.innerWidth - (GUIDE_BAR_WIDTH / 2)) / window.innerWidth,
  flexWidth: 0.5,
@@ -56,23 +60,23 @@ export default defineComponent({
  },
 
  computed: {
- appStyles() {
+ appStyles(): string {
  return this.isResizing
  ? 'user-select: none; cursor: col-resize;'
  : '';
  },
 
- guideStyles() {
+ guideStyles(): string {
  return this.isResizing
  ? `display: block; right: ${this.guideWidth * 100}%;`
  : '';
  },
 
- rightContainerStyles() {
+ rightContainerStyles(): string {
  return `flex: 0 0 ${this.flexWidth * 100}%;`;
  },
 
- mouseMove() {
+ mouseMove(): Function {
  if (this.isResizing) {
  return throttledEvent(25, (event: MouseEvent) => {
  this.guideWidth = (
@@ -94,17 +98,17 @@ export default defineComponent({
  },
 
  methods: {
- registerMouseMove() {
+ registerMouseMove(): void {
  this.isResizing = true;
  },
 
- deregisterMouseMove() {
+ deregisterMouseMove(): void {
  this.isResizing = false;
  this.flexWidth = (this.guideWidth * window.innerWidth + (GUIDE_BAR_WIDTH / 2))
  / window.innerWidth;
  },
 
- closeTab() {
+ closeTab(): void {
  this.$store.commit('updateTabState', false);
  },
  },

diff --git a/frontend/src/components/c-segment-collection.vue b/frontend/src/components/c-segment-collection.vue
@@ -24,13 +24,15 @@ export default defineComponent({
  required: true,
  },
  },
- data() {
+ data(): {
+ isRendered: boolean,
+ } {
  return {
  isRendered: false,
  };
  },
  methods: {
- visibilityChanged(isVisible: boolean) {
+ visibilityChanged(isVisible: boolean): void {
  if (isVisible) {
  this.isRendered = true;
  }

diff --git a/frontend/src/components/c-segment.vue b/frontend/src/components/c-segment.vue
@@ -49,7 +49,11 @@ export default defineComponent({
  required: true,
  },
  },
- data() {
+ data(): {
+ isOpen: boolean,
+ canOpen: boolean,
+ transparencyValue: string,
+ } {
  return {
  isOpen: (this.segment.knownAuthor !== null) || this.segment.lines.length < 5 as boolean,
  canOpen: (this.segment.knownAuthor === null) && this.segment.lines.length > 4 as boolean,
@@ -62,7 +66,7 @@ export default defineComponent({
  }),
  },
  methods: {
- toggleCode() {
+ toggleCode(): void {
  this.isOpen = !this.isOpen;
  },
  },