Force return types and arrow callbacks on functions

.eslintrc.js

@@ -26,6 +26,8 @@ module.exports = {
     'promise/no-return-in-finally': 'error',
     'promise/prefer-await-to-callbacks': 'error',
     'promise/prefer-await-to-then': 'error',
+    '@typescript-eslint/explicit-function-return-type': 'error',
+    'prefer-arrow-callback': 'error',
     // Force some component order stuff, formatting and such, for consistency
     'vue/component-name-in-template-casing': [
       'error',

components/Buttons/FilterButton.vue

@@ -283,13 +283,13 @@ export default Vue.extend({
     };
   },
   watch: {
-    itemsType() {
+    itemsType(): void {
       this.refreshItems();
     }
   },
   methods: {
     ...mapActions('snackbar', ['pushSnackbarMessage']),
-    async refreshItems() {
+    async refreshItems(): Promise<void> {
       try {
         const response = (
           await this.$api.filter.getQueryFiltersLegacy({
@@ -317,7 +317,7 @@ export default Vue.extend({
         });
       }
     },
-    emitFilterChange() {
+    emitFilterChange(): void {
       this.$emit('change', {
         status: this.selectedStatusFilters,
         features: this.selectedFeatureFilters,

components/Buttons/TypeButton.vue

@@ -45,7 +45,7 @@ export default Vue.extend({
     };
   },
   computed: {
-    items() {
+    items(): Array<Record<string, string>> {
       switch (this.type) {
         case 'movies':
           return [

components/Buttons/UserButton.vue

@@ -29,18 +29,23 @@
 import Vue from 'vue';
 import { mapActions } from 'vuex';
 
+interface MenuItem {
+  title: string;
+  action: () => void;
+}
+
 export default Vue.extend({
   data() {
     return {
       avatarSize: 48
     };
   },
   computed: {
-    menuItems() {
+    menuItems(): MenuItem[] {
       return [
         {
           title: this.$t('logout'),
-          action: () => {
+          action: (): void => {
             this.logoutUser();
           }
         }
@@ -50,7 +55,7 @@ export default Vue.extend({
   methods: {
     ...mapActions('user', ['clearUser']),
     ...mapActions('deviceProfile', ['clearDeviceProfile']),
-    logoutUser() {
+    logoutUser(): void {
       this.$disconnect();
       this.$auth.logout();
       this.clearDeviceProfile();

components/Forms/AddServerForm.vue

@@ -57,7 +57,7 @@ export default Vue.extend({
   },
   methods: {
     ...mapActions('servers', ['connectServer']),
-    connectToServer() {
+    connectToServer(): void {
       this.loading = true;
       this.connectServer(this.serverUrl);
       this.loading = false;

components/Forms/LoginForm.vue

@@ -72,7 +72,7 @@ export default Vue.extend({
   props: {
     user: {
       type: Object as () => UserDto,
-      default() {
+      default(): UserDto {
         return {};
       }
     }
@@ -97,7 +97,7 @@ export default Vue.extend({
     ...mapActions('user', ['loginRequest']),
     ...mapActions('deviceProfile', ['setDeviceProfile']),
     ...mapActions('snackbar', ['pushSnackbarMessage']),
-    async userLogin() {
+    async userLogin(): Promise<void> {
       if (!isEmpty(this.user)) {
         // If we have a user from the public user selector, set it as login
         this.login.username = this.user.Name || '';
@@ -108,7 +108,7 @@ export default Vue.extend({
       await this.loginRequest(this.login);
       this.loading = false;
     },
-    isEmpty(value: Record<never, never>) {
+    isEmpty(value: Record<never, never>): boolean {
       return isEmpty(value);
     }
   }

components/Item/Card.vue

@@ -93,31 +93,31 @@ export default Vue.extend({
     },
     shape: {
       type: [String, Boolean],
-      default: () => {
+      default: (): string | boolean => {
         return false;
       }
     },
     episode: {
       type: Boolean,
-      default: () => {
+      default: (): boolean => {
         return false;
       }
     },
     overlay: {
       type: Boolean,
-      default: () => {
+      default: (): boolean => {
         return true;
       }
     },
     noText: {
       type: Boolean,
-      default: () => {
+      default: (): boolean => {
         return false;
       }
     },
     noMargin: {
       type: Boolean,
-      default: () => {
+      default: (): boolean => {
         return false;
       }
     }

components/Item/ItemGrid.vue

@@ -49,7 +49,7 @@ export default Vue.extend({
     items: {
       type: Array,
       required: true,
-      default: () => {
+      default: (): BaseItemDto[] => {
         return [];
       }
     },

components/Item/ItemMenu.vue

@@ -50,7 +50,7 @@ export default Vue.extend({
         const menuItems = [] as MenuItem[];
         if (this.$auth.$state.user.Policy.IsAdministrator) {
           menuItems.push({
-            title: this.$t('editMetadata') as string,
+            title: this.$t('editMetadata'),
             action: () => {
               this.dialog = true;
             }

components/Item/MediaInfo.vue

@@ -52,7 +52,7 @@ export default Vue.extend({
   },
   computed: {
     runtimeValue: {
-      get() {
+      get(): string {
         const seconds = this.ticksToMs(this.item.RunTimeTicks);
         return this.$dateFns.formatDuration(
           intervalToDuration({ start: 0, end: seconds }),
@@ -63,7 +63,7 @@ export default Vue.extend({
       }
     },
     endsAtValue: {
-      get() {
+      get(): string {
         const seconds = this.ticksToMs(this.item.RunTimeTicks);
         return this.$dateFns.format(Date.now() + seconds, 'p');
       }
@@ -82,7 +82,7 @@ export default Vue.extend({
       // TODO: Use a Date object
       return this.$t('endsAt', {
         time: endTimeShort
-      }).toString();
+      });
     }
   }
 });

components/Item/Metadata/DateInput.vue

@@ -38,7 +38,7 @@ export default Vue.extend({
     };
   },
   methods: {
-    handleChange(value: string) {
+    handleChange(value: string): void {
       this.menu = false;
       this.$emit('update:date', value);
     }

components/Item/Metadata/ImageEditor.vue

@@ -76,15 +76,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { ImageInfo, ImageType } from '@jellyfin/client-axios';
+import { BaseItemDto, ImageInfo, ImageType } from '@jellyfin/client-axios';
 import imageHelper from '~/mixins/imageHelper';
 
 export default Vue.extend({
   mixins: [imageHelper],
   props: {
     metadata: {
       type: Object,
-      default: () => ({})
+      default: (): BaseItemDto => ({})
     }
   },
   data() {
@@ -94,7 +94,7 @@ export default Vue.extend({
     };
   },
   computed: {
-    generalImages() {
+    generalImages(): boolean {
       return this.$data.images.filter((image: ImageInfo) => {
         const { ImageType } = image;
         return (
@@ -104,39 +104,39 @@ export default Vue.extend({
         );
       });
     },
-    backdropImages() {
+    backdropImages(): ImageInfo[] {
       return this.$data.images.filter((image: ImageInfo) => {
         const { ImageType } = image;
         return ImageType === 'Backdrop';
       });
     }
   },
   watch: {
-    metadata() {
+    metadata(): void {
       this.getItemImageInfos();
     }
   },
   created() {
     this.getItemImageInfos();
   },
   methods: {
-    async getItemImageInfos() {
+    async getItemImageInfos(): Promise<void> {
       this.images = (
         await this.$api.image.getItemImageInfos({
           itemId: this.metadata.Id
         })
       ).data;
     },
-    imageFormat(imageInfo: ImageInfo) {
+    imageFormat(imageInfo: ImageInfo): string {
       return this.getImageUrlForElement(imageInfo.ImageType as ImageType, {
         itemId: this.metadata.Id,
         tag: imageInfo.ImageTag as string
       });
     },
-    handleSearch() {
+    handleSearch(): void {
       this.dialog = true;
     },
-    async handleDelete(item: ImageInfo) {
+    async handleDelete(item: ImageInfo): Promise<void> {
       await this.$api.image.deleteItemImage({
         itemId: this.metadata.Id,
         imageType: item.ImageType as ImageType,

components/Item/Metadata/ImageSearch.vue

@@ -95,20 +95,21 @@ import Vue from 'vue';
 import {
   ImageProviderInfo,
   RemoteImageInfo,
-  ImageType
+  ImageType,
+  BaseItemDto
 } from '@jellyfin/client-axios';
 
 export default Vue.extend({
   filters: {
-    fixed(val: number) {
+    fixed(val: number): string | number {
       if (!val) return val;
       return val.toFixed(1);
     }
   },
   props: {
     metadata: {
       type: Object,
-      default: () => ({})
+      default: (): BaseItemDto => ({})
     },
     dialog: {
       type: Boolean,
@@ -190,16 +191,16 @@ export default Vue.extend({
     }
   },
   watch: {
-    type() {
+    type(): void {
       this.getImages();
     },
-    source() {
+    source(): void {
       this.getImages();
     },
-    allLanguages() {
+    allLanguages(): void {
       this.getImages();
     },
-    dialog(value) {
+    dialog(value): void {
       if (value) {
         this.getRemoteImageProviders();
         this.getImages();
@@ -209,14 +210,14 @@ export default Vue.extend({
     }
   },
   methods: {
-    async getRemoteImageProviders() {
+    async getRemoteImageProviders(): Promise<void> {
       this.providers = (
         await this.$api.remoteImage.getRemoteImageProviders({
           itemId: this.metadata.Id
         })
       ).data;
     },
-    async getImages() {
+    async getImages(): Promise<void> {
       this.loading = true;
       this.images = (
         await this.$api.remoteImage.getRemoteImages({
@@ -229,12 +230,12 @@ export default Vue.extend({
 
       this.loading = false;
     },
-    imageFormat(url: string) {
+    imageFormat(url: string): string {
       return `${
         this.$axios.defaults.baseURL
       }/Images/Remote?imageUrl=${encodeURIComponent(url)}`;
     },
-    async handleDownload(item: RemoteImageInfo) {
+    async handleDownload(item: RemoteImageInfo): Promise<void> {
       this.loading = true;
       await this.$api.remoteImage.downloadRemoteImage({
         type: item.Type as ImageType,
@@ -245,7 +246,7 @@ export default Vue.extend({
       this.$emit('update:dialog', false);
       this.$emit('download-success', false);
     },
-    reset() {
+    reset(): void {
       this.providers = [];
       this.type = ImageType.Primary;
       this.source = 'All';