refactor(frontend): Formまわりの型強化 (#16260)

* refactor(frontend): Formまわりの型強化

* fix

* avoid non-null assertion and add null check for safety

* refactor

* avoid non-null assertion and add null check for safety

* Update clip.vue

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

1 files changed, 10 insertions, 9 deletions

diff --git a/packages/frontend/src/widgets/WidgetSlideshow.vue b/packages/frontend/src/widgets/WidgetSlideshow.vue
index 3fe8cfa7e6..8e5dc9e8d3 100644
--- a/packages/frontend/src/widgets/WidgetSlideshow.vue
+++ b/packages/frontend/src/widgets/WidgetSlideshow.vue
@@ -22,7 +22,7 @@ import * as Misskey from 'misskey-js';
 import { useInterval } from '@@/js/use-interval.js';
 import { useWidgetPropsManager } from './widget.js';
 import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
-import type { GetFormResultType } from '@/utility/form.js';
+import type { FormWithDefault, GetFormResultType } from '@/utility/form.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
@@ -32,15 +32,15 @@ const name = 'slideshow';
 
 const widgetPropsDef = {
 	height: {
-		type: 'number' as const,
+		type: 'number',
 		default: 300,
 	},
 	folderId: {
-		type: 'string' as const,
-		default: null,
+		type: 'string',
+		default: null as string | null,
 		hidden: true,
 	},
-};
+} satisfies FormWithDefault;
 
 type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 
@@ -59,7 +59,7 @@ const slideA = useTemplateRef('slideA');
 const slideB = useTemplateRef('slideB');
 
 const change = () => {
-	if (images.value.length === 0) return;
+	if (images.value.length === 0 || slideA.value == null || slideB.value == null) return;
 
 	const index = Math.floor(Math.random() * images.value.length);
 	const img = `url(${ images.value[index].url })`;
@@ -73,11 +73,12 @@ const change = () => {
 
 		slideA.value.style.backgroundImage = img;
 
-		slideB.value.classList.remove('anime');
+		slideB.value!.classList.remove('anime');
 	}, 1000);
 };
 
 const fetch = () => {
+	if (slideA.value == null || slideB.value == null) return;
 	fetching.value = true;
 
 	misskeyApi('drive/files', {
@@ -87,8 +88,8 @@ const fetch = () => {
 	}).then(res => {
 		images.value = res;
 		fetching.value = false;
-		slideA.value.style.backgroundImage = '';
-		slideB.value.style.backgroundImage = '';
+		slideA.value!.style.backgroundImage = '';
+		slideB.value!.style.backgroundImage = '';
 		change();
 	});
 };