diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 9b52391b50..7899f4ecf6 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -78,7 +78,26 @@
           }
         ],
         "@typescript-eslint/member-delimiter-style": "error",
-        "@typescript-eslint/type-annotation-spacing": "error"
+        "@typescript-eslint/type-annotation-spacing": "error",
+        "@typescript-eslint/array-type": [
+          "error",
+          {
+            "default": "array-simple",
+            "readonly": "array-simple"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.vue"],
+      "rules": {
+        "@typescript-eslint/array-type": [
+          "error",
+          {
+            "default": "generic",
+            "readonly": "generic"
+          }
+        ]
       }
     }
   ]
diff --git a/frontend/src/app.vue b/frontend/src/app.vue
index b167450c7c..24651b6390 100644
--- a/frontend/src/app.vue
+++ b/frontend/src/app.vue
@@ -41,7 +41,7 @@ const app = defineComponent({
   data() {
     return {
       repos: {} as { [key: string]: Repo },
-      users: [] as Repo[],
+      users: [] as Array<Repo>,
       userUpdated: false,
 
       loadingOverlayOpacity: 1,
@@ -132,7 +132,7 @@ const app = defineComponent({
       }
     },
     getUsers() {
-      const full: Repo[] = [];
+      const full: Array<Repo> = [];
       Object.keys(this.repos).forEach((repo) => {
         if (this.repos[repo].users) {
           full.push(this.repos[repo]);
diff --git a/frontend/src/components/c-ramp.vue b/frontend/src/components/c-ramp.vue
index 6367fc7932..55e130d7ec 100644
--- a/frontend/src/components/c-ramp.vue
+++ b/frontend/src/components/c-ramp.vue
@@ -149,7 +149,7 @@ export default defineComponent({
           ...dailyCommit,
           commitResults: dailyCommit.commitResults.map((commitResult) => ({ ...commitResult, isOpen: true })),
         }),
-      ) as Commit[];
+      ) as Array<Commit>;
 
       const info = {
         zRepo: user.repoName,
diff --git a/frontend/src/components/c-stacked-bar-chart.vue b/frontend/src/components/c-stacked-bar-chart.vue
index 56a3398f55..4825aae309 100644
--- a/frontend/src/components/c-stacked-bar-chart.vue
+++ b/frontend/src/components/c-stacked-bar-chart.vue
@@ -9,13 +9,13 @@
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 import { Bar } from '../types/types';
 
 export default defineComponent({
   props: {
     bars: {
-      type: Array as PropType<Bar[]>,
+      type: Array<Bar>,
       required: true,
     },
   },
diff --git a/frontend/src/components/c-summary-charts.vue b/frontend/src/components/c-summary-charts.vue
index 09e5727aab..c97410880a 100644
--- a/frontend/src/components/c-summary-charts.vue
+++ b/frontend/src/components/c-summary-charts.vue
@@ -374,7 +374,7 @@ export default defineComponent({
   },
   data() {
     return {
-      drags: [] as number[],
+      drags: [] as Array<number>,
       activeRepo: null as string | null,
       activeUser: null as string | null,
       activeTabType: null as string | null,
@@ -430,12 +430,12 @@ export default defineComponent({
     getFileTypeContributionBars(
       fileTypeContribution: AuthorFileTypeContributions,
       checkedFileTypeContribution: number | undefined,
-    ): Bar[] {
+    ): Array<Bar> {
       let currentBarWidth = 0;
       const fullBarWidth = 100;
       const contributionPerFullBar = (this.avgContributionSize * 2);
 
-      const allFileTypesContributionBars: Bar[] = [];
+      const allFileTypesContributionBars: Array<Bar> = [];
       if (contributionPerFullBar === 0) {
         return allFileTypesContributionBars;
       }
@@ -481,8 +481,8 @@ export default defineComponent({
       return allFileTypesContributionBars;
     },
 
-    getFileTypes(repo: User[]): string[] {
-      const fileTypes: string[] = [];
+    getFileTypes(repo: Array<User>): Array<string> {
+      const fileTypes: Array<string> = [];
       repo.forEach((user) => {
         Object.keys(user.fileTypeContribution).forEach((fileType) => {
           if (this.checkedFileTypes.includes(fileType) && !fileTypes.includes(fileType)) {
@@ -493,12 +493,12 @@ export default defineComponent({
       return fileTypes;
     },
 
-    getGroupTotalContribution(group: User[]): number {
+    getGroupTotalContribution(group: Array<User>): number {
       return group.reduce((acc, ele) => acc + (ele.checkedFileTypeContribution ?? 0), 0);
     },
 
-    getContributionBars(totalContribution: number): Bar[] {
-      const res: Bar[] = [];
+    getContributionBars(totalContribution: number): Array<Bar> {
+      const res: Array<Bar> = [];
       const contributionLimit = (this.avgContributionSize * 2);
       if (contributionLimit === 0) {
         return res;
@@ -543,7 +543,7 @@ export default defineComponent({
       return repo.location;
     },
 
-    getRepoIcon(repo: User): string[] {
+    getRepoIcon(repo: User): Array<string> {
       const domainName = window.REPOS[repo.repoId].location.domainName;
 
       switch (domainName) {
@@ -559,7 +559,7 @@ export default defineComponent({
     },
 
     // triggering opening of tabs //
-    openTabAuthorship(user: User, repo: User[], index: number, isMerged: boolean): void {
+    openTabAuthorship(user: User, repo: Array<User>, index: number, isMerged: boolean): void {
       const {
         minDate, maxDate, checkedFileTypes,
       } = this;
@@ -634,12 +634,12 @@ export default defineComponent({
       // Set height of iframe according to number of charts to avoid scrolling
       let totalChartHeight = 0;
       if (!isChartIndexProvided) {
-        totalChartHeight += (this.$refs[`summary-charts-${chartGroupIndex}`] as HTMLElement[])[0].clientHeight;
+        totalChartHeight += (this.$refs[`summary-charts-${chartGroupIndex}`] as Array<HTMLElement>)[0].clientHeight;
       } else {
-        totalChartHeight += (this.$refs[`summary-chart-${chartIndex}`] as HTMLElement[])[0].clientHeight;
+        totalChartHeight += (this.$refs[`summary-chart-${chartIndex}`] as Array<HTMLElement>)[0].clientHeight;
         totalChartHeight += this.filterGroupSelection === 'groupByNone'
           ? 0
-          : (this.$refs[`summary-charts-title-${chartGroupIndex}`] as HTMLElement[])[0].clientHeight;
+          : (this.$refs[`summary-charts-title-${chartGroupIndex}`] as Array<HTMLElement>)[0].clientHeight;
       }
 
       const margins = 30;
@@ -682,7 +682,7 @@ export default defineComponent({
       const regexToRemoveWidget = /([?&])((chartIndex|chartGroupIndex)=\d+)/g;
       return url.replace(regexToRemoveWidget, '');
     },
-    getRepo(repo: Repo[]) {
+    getRepo(repo: Array<Repo>) {
       if (this.isChartGroupWidgetMode && this.isChartWidgetMode) {
         return [repo[this.chartIndex!]];
       }
@@ -748,7 +748,7 @@ export default defineComponent({
       return (Math.round(((index + 1) * 1000) / this.filtered.length) / 10).toFixed(1);
     },
 
-    getGroupName(group: User[]): string {
+    getGroupName(group: Array<User>): string {
       return window.getGroupName(group, this.filterGroupSelection);
     },
 
@@ -767,7 +767,7 @@ export default defineComponent({
       this.$store.commit('updateMergedGroup', info);
     },
 
-    getAuthorDisplayName(repo: User[]): string {
+    getAuthorDisplayName(repo: Array<User>): string {
       return window.getAuthorDisplayName(repo);
     },
 
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 145ead4415..0d212752b5 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -3,7 +3,7 @@ import {
 } from 'vue-router';
 import Home from '../views/c-home.vue';
 
-const routes: Array<RouteRecordRaw> = [
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
     component: Home,
diff --git a/frontend/src/views/c-authorship.vue b/frontend/src/views/c-authorship.vue
index 706f650396..b901e8f4fe 100644
--- a/frontend/src/views/c-authorship.vue
+++ b/frontend/src/views/c-authorship.vue
@@ -217,10 +217,10 @@ const filesSortDict = {
 function authorshipInitialState() {
   return {
     isLoaded: false,
-    selectedFiles: [] as AuthorshipFile[],
+    selectedFiles: [] as Array<AuthorshipFile>,
     filterType: FilterType.Checkboxes,
-    selectedFileTypes: [] as string[],
-    fileTypes: [] as string[],
+    selectedFileTypes: [] as Array<string>,
+    fileTypes: [] as Array<string>,
     filesLinesObj: {} as { [key: string]: number },
     fileTypeBlankLinesObj: {} as { [key: string]: number },
     filesSortType: FilesSortType.LinesOfCode,
@@ -235,7 +235,7 @@ function authorshipInitialState() {
   };
 }
 
-const repoCache: string[] = [];
+const repoCache: Array<string> = [];
 
 export default defineComponent({
   name: 'c-authorship',
@@ -480,7 +480,7 @@ export default defineComponent({
       this.setInfoHash();
     },
 
-    getAuthors(file: AuthorshipFile): (string | null)[] {
+    getAuthors(file: AuthorshipFile): Array<string | null> {
       return Array.from(new Set(file.segments?.map((segment) => segment.knownAuthor)
         .filter(Boolean))).sort().slice(0, 50);
     },
@@ -495,7 +495,7 @@ export default defineComponent({
     },
 
     scrollFileIntoView(file: AuthorshipFile): void {
-      const fileElement = (this.$refs[file.path] as HTMLElement[])[0];
+      const fileElement = (this.$refs[file.path] as Array<HTMLElement>)[0];
       if (this.isElementAboveViewport(fileElement)) {
         fileElement.scrollIntoView(true);
       }
@@ -503,13 +503,13 @@ export default defineComponent({
 
     onTitleTooltipHover(tooltipTextElement: string, titleTextElement: string): void {
       this.onTooltipHover(tooltipTextElement);
-      const titleElement = (this.$refs[titleTextElement] as HTMLElement[])[0];
+      const titleElement = (this.$refs[titleTextElement] as Array<HTMLElement>)[0];
       titleElement.classList.add('max-zIndex');
     },
 
     resetTitleTooltip(tooltipTextElement: string, titleTextElement: string): void {
       this.resetTooltip(tooltipTextElement);
-      const titleElement = (this.$refs[titleTextElement] as HTMLElement[])[0];
+      const titleElement = (this.$refs[titleTextElement] as Array<HTMLElement>)[0];
       titleElement.classList.remove('max-zIndex');
     },
 
@@ -517,11 +517,11 @@ export default defineComponent({
       return name === '-';
     },
 
-    splitSegments(lines: Line[]): { segments: AuthorshipFileSegment[]; blankLineCount: number; } {
+    splitSegments(lines: Array<Line>): { segments: Array<AuthorshipFileSegment>; blankLineCount: number; } {
       // split into segments separated by knownAuthor
       let lastState: string | null;
       let lastId = -1;
-      const segments: AuthorshipFileSegment[] = [];
+      const segments: Array<AuthorshipFileSegment> = [];
       let blankLineCount = 0;
 
       lines.forEach((line, lineCount) => {
@@ -577,10 +577,10 @@ export default defineComponent({
       this.$store.commit('updateAuthorColors', authorColors);
     },
 
-    processFiles(files: FileResult[]): void {
+    processFiles(files: Array<FileResult>): void {
       const SINGLE_FILE_LINE_COUNT_THRESHOLD = 2000;
       const SINGLE_FILE_CHAR_COUNT_THRESHOLD = 1000000;
-      const res: AuthorshipFile[] = [];
+      const res: Array<AuthorshipFile> = [];
       const fileTypeBlanksInfoObj: { [key: string]: number } = {};
 
       files.filter((file) => this.isValidFile(file)).forEach((file) => {
diff --git a/frontend/src/views/c-summary.vue b/frontend/src/views/c-summary.vue
index 3ac769d57f..1d8887f45e 100644
--- a/frontend/src/views/c-summary.vue
+++ b/frontend/src/views/c-summary.vue
@@ -160,7 +160,7 @@ export default defineComponent({
   },
   props: {
     repos: {
-      type: Array as PropType<Repo[]>,
+      type: Array<Repo>,
       required: true,
     },
     errorMessages: {
@@ -176,9 +176,9 @@ export default defineComponent({
   },
   data() {
     return {
-      checkedFileTypes: [] as string[],
-      fileTypes: [] as string[],
-      filtered: [] as User[][],
+      checkedFileTypes: [] as Array<string>,
+      fileTypes: [] as Array<string>,
+      filtered: [] as Array<Array<User>>,
       filterSearch: '',
       filterGroupSelection: FilterGroupSelection.GroupByRepos,
       sortGroupSelection: SortGroupSelection.GroupTitleDsc, // UI for sorting groups
@@ -248,7 +248,7 @@ export default defineComponent({
       },
       set(value: boolean) {
         if (value) {
-          const mergedGroups: string[] = [];
+          const mergedGroups: Array<string> = [];
           this.filtered.forEach((group) => {
             mergedGroups.push(this.getGroupName(group));
           });
@@ -451,7 +451,7 @@ export default defineComponent({
       }
     },
 
-    getGroupName(group: User[]) {
+    getGroupName(group: Array<User>) {
       return window.getGroupName(group, this.filterGroupSelection);
     },
 
@@ -482,13 +482,13 @@ export default defineComponent({
 
     getFilteredRepos() {
       // array of array, sorted by repo
-      const full: User[][] = [];
+      const full: Array<Array<User>> = [];
 
       // create deep clone of this.repos to not modify the original content of this.repos
       // when merging groups
-      const groups = this.hasMergedGroups() ? JSON.parse(JSON.stringify(this.repos)) as Repo[] : this.repos;
+      const groups = this.hasMergedGroups() ? JSON.parse(JSON.stringify(this.repos)) as Array<Repo> : this.repos;
       groups.forEach((repo) => {
-        const res: User[] = [];
+        const res: Array<User> = [];
 
         // filtering
         repo.users?.forEach((user) => {
@@ -527,7 +527,7 @@ export default defineComponent({
       if (this.filterGroupSelection === 'groupByNone' || !allGroupsMerged) {
         this.$store.commit('updateMergedGroup', []);
       } else {
-        const mergedGroups: string[] = [];
+        const mergedGroups: Array<string> = [];
         this.filtered.forEach((group) => {
           mergedGroups.push(this.getGroupName(group));
         });
@@ -543,11 +543,11 @@ export default defineComponent({
       });
     },
 
-    mergeGroupByIndex(filtered: User[][], groupIndex: number) {
+    mergeGroupByIndex(filtered: Array<Array<User>>, groupIndex: number) {
       const dateToIndexMap: { [key: string]: number } = {};
       const dailyIndexMap: { [key: string]: number } = {};
-      const mergedCommits: Commit[] = [];
-      const mergedDailyCommits: DailyCommit[] = [];
+      const mergedCommits: Array<Commit> = [];
+      const mergedDailyCommits: Array<DailyCommit> = [];
       const mergedFileTypeContribution: AuthorFileTypeContributions = {};
       let mergedVariance = 0;
       let totalMergedCheckedFileTypeCommits = 0;
@@ -583,7 +583,7 @@ export default defineComponent({
       commit: Commit | DailyCommit,
       user: User,
       dateToIndexMap: { [key: string]: number },
-      merged: Commit[] | DailyCommit[],
+      merged: Array<Commit> | Array<DailyCommit>,
     ) {
       const {
         commitResults, date,
@@ -659,7 +659,7 @@ export default defineComponent({
         return;
       }
 
-      const res: Commit[] = [];
+      const res: Array<Commit> = [];
 
       const nextMondayDate = this.dateRounding(sinceDate, 0); // round up for the next monday
 
@@ -676,7 +676,7 @@ export default defineComponent({
       user.commits = res;
     },
 
-    pushCommitsWeek(sinceMs: number, untilMs: number, res: Commit[], commits: Commit[]) {
+    pushCommitsWeek(sinceMs: number, untilMs: number, res: Array<Commit>, commits: Array<Commit>) {
       const diff = Math.round(Math.abs((untilMs - sinceMs) / window.DAY_IN_MS));
       const weekInMS = window.DAY_IN_MS * 7;
 
@@ -700,7 +700,7 @@ export default defineComponent({
       }
     },
 
-    addLineContributionWeek(endOfWeekMs: number, week: Commit, commits: Commit[]) {
+    addLineContributionWeek(endOfWeekMs: number, week: Commit, commits: Array<Commit>) {
       // commits are not contiguous, meaning there are gaps of days without
       // commits, so we are going to check each commit's date and make sure
       // it is within the duration of a week
@@ -873,11 +873,11 @@ export default defineComponent({
       const {
         zSince, zUntil, zTimeFrame, zIsMerged, zFilterSearch,
       } = info;
-      const filtered: User[][] = [];
+      const filtered: Array<Array<User>> = [];
 
-      const groups: Repo[] = JSON.parse(JSON.stringify(this.repos));
+      const groups: Array<Repo> = JSON.parse(JSON.stringify(this.repos));
 
-      const res: User[] = [];
+      const res: Array<User> = [];
       groups.forEach((repo) => {
         repo.users?.forEach((user) => {
           // only filter users that match with zoom user and previous searched user
diff --git a/frontend/src/views/c-zoom.vue b/frontend/src/views/c-zoom.vue
index f8feeb6ec2..51494f0b92 100644
--- a/frontend/src/views/c-zoom.vue
+++ b/frontend/src/views/c-zoom.vue
@@ -171,8 +171,8 @@ function zoomInitialState() {
     commitsSortType: CommitsSortType.Time,
     toReverseSortedCommits: true,
     isCommitsFinalized: false,
-    selectedFileTypes: [] as string[],
-    fileTypes: [] as string[],
+    selectedFileTypes: [] as Array<string>,
+    fileTypes: [] as Array<string>,
   };
 }
 
@@ -240,12 +240,12 @@ export default defineComponent({
       return tempUser;
     },
 
-    selectedCommits(): Commit[] {
+    selectedCommits(): Array<Commit> {
       if (this.isSelectAllChecked) {
         return this.filteredUser.commits;
       }
 
-      const commits = [] as Commit[];
+      const commits = [] as Array<Commit>;
       this.filteredUser.commits.forEach((commit) => {
         const filteredCommit = { ...commit };
         filteredCommit.commitResults = [];
@@ -333,7 +333,7 @@ export default defineComponent({
       this.selectedFileTypes = this.fileTypes.slice();
     },
 
-    getContributionBars(slice: CommitResult): Bar[] {
+    getContributionBars(slice: CommitResult): Array<Bar> {
       let currentBarWidth = 0;
       const fullBarWidth = 100;
 
@@ -345,7 +345,7 @@ export default defineComponent({
       const contributionPerFullBar = avgContributionSize;
 
       const diffstatMappings: { [key: string]: number } = { limegreen: slice.insertions, red: slice.deletions };
-      const allContributionBars: Bar[] = [];
+      const allContributionBars: Array<Bar> = [];
 
       if (contributionPerFullBar === 0) {
         return allContributionBars;
@@ -502,7 +502,7 @@ export default defineComponent({
       window.encodeHash();
     },
 
-    containsAtLeastOneSelected(fileTypes: string[]): boolean {
+    containsAtLeastOneSelected(fileTypes: Array<string>): boolean {
       for (let i = 0; i < fileTypes.length; i += 1) {
         if (this.selectedFileTypes.includes(fileTypes[i])) {
           return true;