refactor(frontend): フロントエンドの型エラー解消

package.json

@@ -67,6 +67,7 @@
 	},
 	"devDependencies": {
 		"@misskey-dev/eslint-plugin": "2.1.0",
+		"@types/js-yaml": "4.0.9",
 		"@types/node": "22.17.2",
 		"@typescript-eslint/eslint-plugin": "8.40.0",
 		"@typescript-eslint/parser": "8.40.0",

packages/frontend/.storybook/fakes.ts

@@ -127,7 +127,7 @@ export function galleryPost(isSensitive = false) {
 	}
 }
 
-export function file(isSensitive = false) {
+export function file(isSensitive = false): entities.DriveFile {
 	return {
 		id: 'somefileid',
 		createdAt: '2016-12-28T22:49:51.000Z',

packages/frontend/src/aiscript/api.ts

@@ -86,7 +86,7 @@ export function createAiScriptEnv(opts: { storageKey: string, token?: string })
 				throw new errors.AiScriptRuntimeError('expected param');
 			}
 			utils.assertObject(param);
-			return misskeyApi(ep.value, utils.valToJs(param) as object, actualToken).then(res => {
+			return misskeyApi(ep.value as keyof Misskey.Endpoints, utils.valToJs(param) as object, actualToken).then(res => {
 				return utils.jsToVal(res);
 			}, err => {
 				return values.ERROR('request_failed', utils.jsToVal(err));

packages/frontend/src/components/MkAuthConfirm.vue

@@ -167,9 +167,13 @@ async function init() {
 		for (const user of usersRes) {
 			if (users.value.has(user.id)) continue;
 
+			const account = accounts.find(a => a.id === user.id);
+
+			if (!account || account.token == null) continue;
+
 			users.value.set(user.id, {
 				...user,
-				token: accounts.find(a => a.id === user.id)!.token,
+				token: account.token,
 			});
 		}
 	}

packages/frontend/src/components/MkAutocomplete.vue

@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkCustomEmoji v-if="'isCustomEmoji' in emoji && emoji.isCustomEmoji" :name="emoji.emoji" :class="$style.emoji" :fallbackToImage="true"/>
 			<MkEmoji v-else :emoji="emoji.emoji" :class="$style.emoji"/>
 			<!-- eslint-disable-next-line vue/no-v-html -->
-			<span v-if="q" :class="$style.emojiName" v-html="sanitizeHtml(emoji.name.replace(q, `<b>${q}</b>`))"></span>
+			<span v-if="q != null && typeof q === 'string'" :class="$style.emojiName" v-html="sanitizeHtml(emoji.name.replace(q, `<b>${q}</b>`))"></span>
 			<span v-else v-text="emoji.name"></span>
 			<span v-if="emoji.aliasOf" :class="$style.emojiAlias">({{ emoji.aliasOf }})</span>
 		</li>
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</li>
 	</ol>
 	<ol v-else-if="type === 'mfmParam' && mfmParams.length > 0" ref="suggests" :class="$style.list">
-		<li v-for="param in mfmParams" tabindex="-1" :class="$style.item" @click="complete(type, q.params.toSpliced(-1, 1, param).join(','))" @keydown="onKeydown">
+		<li v-for="param in mfmParams" tabindex="-1" :class="$style.item" @click="completeMfmParam(param)" @keydown="onKeydown">
 			<span>{{ param }}</span>
 		</li>
 	</ol>
@@ -194,6 +194,11 @@ const mfmParams = ref<string[]>([]);
 const select = ref(-1);
 const zIndex = os.claimZIndex('high');
 
+function completeMfmParam(param: string) {
+	if (props.type !== 'mfmParam') throw new Error('Invalid type');
+	complete('mfmParam', props.q.params.toSpliced(-1, 1, param).join(','));
+}
+
 function complete<T extends keyof CompleteInfo>(type: T, value: CompleteInfo[T]['payload']) {
 	emit('done', { type, value });
 	emit('closed');

packages/frontend/src/components/MkCropperDialog.stories.impl.ts

@@ -38,7 +38,7 @@ export const Default = {
 		};
 	},
 	args: {
-		file: file(),
+		imageFile: file(),
 		aspectRatio: NaN,
 	},
 	parameters: {

packages/frontend/src/components/MkDrive.vue

@@ -699,7 +699,7 @@ useGlobalEvent('driveFoldersDeleted', (folders) => {
 	}
 });
 
-let connection: Misskey.ChannelConnection<Misskey.Channels['drive']> | null = null;
+let connection: Misskey.IChannelConnection<Misskey.Channels['drive']> | null = null;
 
 onMounted(() => {
 	if (store.s.realtimeMode) {

packages/frontend/src/components/MkEmbedCodeGenDialog.vue

@@ -160,7 +160,7 @@ const embedPreviewUrl = computed(() => {
 
 const isEmbedWithScrollbar = computed(() => embedRouteWithScrollbar.includes(props.entity));
 const header = ref(props.params?.header ?? true);
-const maxHeight = ref(props.params?.maxHeight !== 0 ? props.params?.maxHeight ?? undefined : 500);
+const maxHeight = ref(props.params?.maxHeight !== 0 ? props.params?.maxHeight ?? null : 500);
 
 const colorMode = ref<'light' | 'dark' | 'auto'>(props.params?.colorMode ?? 'auto');
 const rounded = ref(props.params?.rounded ?? true);

packages/frontend/src/components/MkFormDialog.vue

@@ -41,11 +41,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkSwitch>
 				<MkSelect v-else-if="v.type === 'enum'" v-model="values[k]">
 					<template #label><span v-text="v.label || k"></span><span v-if="v.required === false"> ({{ i18n.ts.optional }})</span></template>
-					<option v-for="option in v.enum" :key="option.value" :value="option.value">{{ option.label }}</option>
+					<option v-for="option in v.enum" :key="getEnumKey(option)" :value="getEnumValue(option)">{{ getEnumLabel(option) }}</option>
 				</MkSelect>
 				<MkRadios v-else-if="v.type === 'radio'" v-model="values[k]">
 					<template #label><span v-text="v.label || k"></span><span v-if="v.required === false"> ({{ i18n.ts.optional }})</span></template>
-					<option v-for="option in v.options" :key="option.value" :value="option.value">{{ option.label }}</option>
+					<option v-for="option in v.options" :key="getRadioKey(option)" :value="option.value">{{ option.label }}</option>
 				</MkRadios>
 				<MkRange v-else-if="v.type === 'range'" v-model="values[k]" :min="v.min" :max="v.max" :step="v.step" :textConverter="v.textConverter">
 					<template #label><span v-text="v.label || k"></span><span v-if="v.required === false"> ({{ i18n.ts.optional }})</span></template>
@@ -77,7 +77,7 @@ import MkRange from './MkRange.vue';
 import MkButton from './MkButton.vue';
 import MkRadios from './MkRadios.vue';
 import XFile from './MkFormDialog.file.vue';
-import type { Form } from '@/utility/form.js';
+import type { EnumItem, Form, RadioFormItem } from '@/utility/form.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n.js';
 
@@ -99,7 +99,11 @@ const dialog = useTemplateRef('dialog');
 const values = reactive({});
 
 for (const item in props.form) {
-	values[item] = props.form[item].default ?? null;
+	if ('default' in props.form[item]) {
+		values[item] = props.form[item].default ?? null;
+	} else {
+		values[item] = null;
+	}
 }
 
 function ok() {
@@ -115,4 +119,20 @@ function cancel() {
 	});
 	dialog.value?.close();
 }
+
+function getEnumLabel(e: EnumItem) {
+	return typeof e === 'string' ? e : e.label;
+}
+
+function getEnumValue(e: EnumItem) {
+	return typeof e === 'string' ? e : e.value;
+}
+
+function getEnumKey(e: EnumItem) {
+	return typeof e === 'string' ? e : typeof e.value === 'string' ? e.value : JSON.stringify(e.value);
+}
+
+function getRadioKey(e: RadioFormItem['options'][number]) {
+	return typeof e.value === 'string' ? e.value : JSON.stringify(e.value);
+}
 </script>

packages/frontend/src/components/MkInput.vue

@@ -43,7 +43,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
+type SupportedTypes = 'text' | 'password' | 'email' | 'url' | 'tel' | 'number' | 'search';
+type ModelValueType<T extends SupportedTypes> =
+	T extends 'number' ? number :
+	T extends 'text' | 'password' | 'email' | 'url' | 'tel' | 'search' ? string :
+	never;
+</script>
+
+<script lang="ts" setup generic="T extends SupportedTypes = 'text'">
 import { onMounted, onUnmounted, nextTick, ref, useTemplateRef, watch, computed, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
 import { useInterval } from '@@/js/use-interval.js';
@@ -55,8 +63,8 @@ import { Autocomplete } from '@/utility/autocomplete.js';
 import { genId } from '@/utility/id.js';
 
 const props = defineProps<{
-	modelValue: string | number | null;
-	type?: InputHTMLAttributes['type'];
+	modelValue: ModelValueType<T> | null;
+	type?: T;
 	required?: boolean;
 	readonly?: boolean;
 	disabled?: boolean;
@@ -83,7 +91,7 @@ const emit = defineEmits<{
 	(ev: 'change', _ev: KeyboardEvent): void;
 	(ev: 'keydown', _ev: KeyboardEvent): void;
 	(ev: 'enter', _ev: KeyboardEvent): void;
-	(ev: 'update:modelValue', value: string | number): void;
+	(ev: 'update:modelValue', value: ModelValueType<T>): void;
 }>();
 
 const { modelValue, type, autofocus } = toRefs(props);

packages/frontend/src/components/MkInstanceStats.vue

@@ -89,6 +89,7 @@ import { Chart } from 'chart.js';
 import type { HeatmapSource } from '@/components/MkHeatmap.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkChart from '@/components/MkChart.vue';
+import type { ChartSrc } from '@/components/MkChart.vue';
 import { useChartTooltip } from '@/composables/use-chart-tooltip.js';
 import { $i } from '@/i.js';
 import * as os from '@/os.js';
@@ -107,7 +108,7 @@ const shouldShowFederation = computed(() => instance.federation !== 'none' || $i
 
 const chartLimit = 500;
 const chartSpan = ref<'hour' | 'day'>('hour');
-const chartSrc = ref('active-users');
+const chartSrc = ref<ChartSrc>('active-users');
 const heatmapSrc = ref<HeatmapSource>('active-users');
 const subDoughnutEl = useTemplateRef('subDoughnutEl');
 const pubDoughnutEl = useTemplateRef('pubDoughnutEl');

packages/frontend/src/components/MkNote.vue

@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:class="[$style.root, { [$style.showActionsOnlyHover]: prefer.s.showNoteActionsOnlyHover, [$style.skipRender]: prefer.s.skipNoteRender }]"
 	tabindex="0"
 >
-	<MkNoteSub v-if="appearNote.replyId && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
+	<MkNoteSub v-if="appearNote.replyId && !renoteCollapsed" :note="appearNote?.reply ?? null" :class="$style.replyTo"/>
 	<div v-if="pinned" :class="$style.tip"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
 	<div v-if="isRenote" :class="$style.renote">
 		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
@@ -99,7 +99,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div v-if="isEnabledUrlPreview">
 						<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/>
 					</div>
-					<div v-if="appearNote.renoteId" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
+					<div v-if="appearNote.renoteId" :class="$style.quote"><MkNoteSimple :note="appearNote?.renote ?? null" :class="$style.quoteNote"/></div>
 					<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false">
 						<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
 					</button>

packages/frontend/src/components/MkPagination.vue

@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkButton>
 					<MkLoading v-else/>
 				</div>
-				<slot :items="unref(paginator.items)" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot>
+				<slot :items="getValue(paginator.items)" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot>
 				<div v-if="direction === 'down' || direction === 'both'" v-show="downButtonVisible">
 					<MkButton v-if="!downButtonLoading" :class="$style.more" primary rounded @click="downButtonClick">
 						{{ i18n.ts.loadMore }}
@@ -90,6 +90,10 @@ function onContextmenu(ev: MouseEvent) {
 	}], ev);
 }
 
+function getValue(v: IPaginator['items']) {
+	return unref(v) as UnwrapRef<T['items']>;
+}
+
 if (props.autoLoad) {
 	onMounted(() => {
 		props.paginator.init();
@@ -134,7 +138,7 @@ function downButtonClick() {
 
 defineSlots<{
 	empty: () => void;
-	default: (props: { items: UnwrapRef<T['items']> }) => void;
+	default: (props: { items: UnwrapRef<T['items']>, fetching: boolean }) => void;
 }>();
 </script>
 

packages/frontend/src/components/MkServerSetupWizard.vue

@@ -134,7 +134,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<div>
 				<div><b>{{ i18n.ts._serverSettings.entrancePageStyle }}:</b></div>
-				<div>{{ serverSettings.clientOptions.entrancePageStyle }}</div>
+				<div>{{ serverSettings.clientOptions?.entrancePageStyle }}</div>
 			</div>
 
 			<div>
@@ -240,12 +240,12 @@ const serverSettings = computed<Misskey.entities.AdminUpdateMetaRequest>(() => {
 		enableReactionsBuffering,
 		clientOptions: {
 			entrancePageStyle: q_use.value === 'open' ? 'classic' : 'simple',
-		},
+		} as any,
 	};
 });
 
-const defaultPolicies = computed<Partial<Record<typeof ROLE_POLICIES[number], any>>>(() => {
-	let driveCapacityMb;
+const defaultPolicies = computed<Partial<Misskey.entities.RolePolicies>>(() => {
+	let driveCapacityMb: Misskey.entities.RolePolicies['driveCapacityMb'] | undefined;
 	if (q_use.value === 'single') {
 		driveCapacityMb = 8192;
 	} else if (q_use.value === 'group') {
@@ -254,7 +254,7 @@ const defaultPolicies = computed<Partial<Record<typeof ROLE_POLICIES[number], an
 		driveCapacityMb = 100;
 	}
 
-	let rateLimitFactor;
+	let rateLimitFactor: Misskey.entities.RolePolicies['rateLimitFactor'] | undefined;
 	if (q_use.value === 'single') {
 		rateLimitFactor = 0.3;
 	} else if (q_use.value === 'group') {
@@ -269,7 +269,7 @@ const defaultPolicies = computed<Partial<Record<typeof ROLE_POLICIES[number], an
 		}
 	}
 
-	let userListLimit;
+	let userListLimit: Misskey.entities.RolePolicies['userListLimit'] | undefined;
 	if (q_use.value === 'single') {
 		userListLimit = 100;
 	} else if (q_use.value === 'group') {
@@ -278,7 +278,7 @@ const defaultPolicies = computed<Partial<Record<typeof ROLE_POLICIES[number], an
 		userListLimit = 3;
 	}
 
-	let antennaLimit;
+	let antennaLimit: Misskey.entities.RolePolicies['antennaLimit'] | undefined;
 	if (q_use.value === 'single') {
 		antennaLimit = 100;
 	} else if (q_use.value === 'group') {
@@ -287,7 +287,7 @@ const defaultPolicies = computed<Partial<Record<typeof ROLE_POLICIES[number], an
 		antennaLimit = 0;
 	}
 
-	let webhookLimit;
+	let webhookLimit: Misskey.entities.RolePolicies['webhookLimit'] | undefined;
 	if (q_use.value === 'single') {
 		webhookLimit = 100;
 	} else if (q_use.value === 'group') {
@@ -296,35 +296,35 @@ const defaultPolicies = computed<Partial<Record<typeof ROLE_POLICIES[number], an
 		webhookLimit = 0;
 	}
 
-	let canImportFollowing;
+	let canImportFollowing: Misskey.entities.RolePolicies['canImportFollowing'];
 	if (q_use.value === 'single') {
 		canImportFollowing = true;
 	} else {
 		canImportFollowing = false;
 	}
 
-	let canImportMuting;
+	let canImportMuting: Misskey.entities.RolePolicies['canImportMuting'];
 	if (q_use.value === 'single') {
 		canImportMuting = true;
 	} else {
 		canImportMuting = false;
 	}
 
-	let canImportBlocking;
+	let canImportBlocking: Misskey.entities.RolePolicies['canImportBlocking'];
 	if (q_use.value === 'single') {
 		canImportBlocking = true;
 	} else {
 		canImportBlocking = false;
 	}
 
-	let canImportUserLists;
+	let canImportUserLists: Misskey.entities.RolePolicies['canImportUserLists'];
 	if (q_use.value === 'single') {
 		canImportUserLists = true;
 	} else {
 		canImportUserLists = false;
 	}
 
-	let canImportAntennas;
+	let canImportAntennas: Misskey.entities.RolePolicies['canImportAntennas'];
 	if (q_use.value === 'single') {
 		canImportAntennas = true;
 	} else {
@@ -355,6 +355,7 @@ function applySettings() {
 			maintainerEmail: q_adminEmail.value === '' ? undefined : q_adminEmail.value,
 		}, props.token),
 		misskeyApi('admin/roles/update-default-policies', {
+			// @ts-expect-error バックエンド側の型
 			policies: defaultPolicies.value,
 		}, props.token),
 	]).then(() => {

packages/frontend/src/components/MkSignupDialog.form.vue

@@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkCaptcha v-if="instance.enableMcaptcha" ref="mcaptcha" v-model="mCaptchaResponse" :class="$style.captcha" provider="mcaptcha" :sitekey="instance.mcaptchaSiteKey" :instanceUrl="instance.mcaptchaInstanceUrl"/>
 			<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :class="$style.captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
 			<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
-			<MkCaptcha v-if="instance.enableTestcaptcha" ref="testcaptcha" v-model="testcaptchaResponse" :class="$style.captcha" provider="testcaptcha"/>
+			<MkCaptcha v-if="instance.enableTestcaptcha" ref="testcaptcha" v-model="testcaptchaResponse" :class="$style.captcha" provider="testcaptcha" :sitekey="null"/>
 			<MkButton type="submit" :disabled="shouldDisableSubmitting" large gradate rounded data-cy-signup-submit style="margin: 0 auto;">
 				<template v-if="submitting">
 					<MkLoading :em="true" :colored="false"/>

packages/frontend/tsconfig.json

@@ -22,6 +22,7 @@
 		"isolatedModules": true,
 		"useDefineForClassFields": true,
 		"verbatimModuleSyntax": true,
+		"skipLibCheck": true,
 		"baseUrl": ".",
 		"paths": {
 			"@/*": ["./src/*"],
@@ -46,8 +47,6 @@
 	},
 	"compileOnSave": false,
 	"include": [
-		"./build.ts",
-		"./lib/**/*.ts",
 		"./src/**/*.ts",
 		"./src/**/*.vue",
 		"./test/**/*.ts",
@@ -55,7 +54,6 @@
 		"./@types/**/*.ts"
 	],
 	"exclude": [
-		".storybook/**/*",
 		"./src/**/*.stories.ts"
 	]
 }

packages/misskey-js/etc/misskey-js.api.md

@@ -2809,7 +2809,7 @@ type ModerationLog = {
     id: ID;
     createdAt: DateString;
     userId: User['id'];
-    user: UserDetailedNotMe | null;
+    user: UserDetailedNotMe;
 } & ({
     type: 'updateServerSettings';
     info: ModerationLogPayloads['updateServerSettings'];
@@ -3538,6 +3538,7 @@ type SignupRequest = {
     'g-recaptcha-response'?: string | null;
     'turnstile-response'?: string | null;
     'm-captcha-response'?: string | null;
+    'testcaptcha-response'?: string | null;
 };
 
 // @public (undocumented)

packages/misskey-js/src/entities.ts

@@ -269,6 +269,7 @@ export type SignupRequest = {
 	'g-recaptcha-response'?: string | null;
 	'turnstile-response'?: string | null;
 	'm-captcha-response'?: string | null;
+	'testcaptcha-response'?: string | null;
 };
 
 export type SignupResponse = MeDetailed & {