From d203e1a446898bb867705d4191507f1fa196fa88 Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 23 Oct 2025 11:04:27 +0900
Subject: refactor(frontend): フロントエンドの型エラー解消 (#16694)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend-shared/js/emojilist.ts                      | 11 ++++++++---
 .../frontend/src/components/MkReactionsViewer.reaction.vue    |  6 +++---
 packages/frontend/src/components/MkSuperMenu.vue              |  4 +++-
 packages/frontend/src/directives/appear.ts                    |  3 ++-
 packages/frontend/src/directives/tooltip.ts                   |  5 +++--
 packages/frontend/src/directives/user-preview.ts              |  2 +-
 packages/frontend/src/type.ts                                 |  8 --------
 packages/frontend/src/types/misc.ts                           |  6 ++++++
 8 files changed, 26 insertions(+), 19 deletions(-)
 delete mode 100644 packages/frontend/src/type.ts
 create mode 100644 packages/frontend/src/types/misc.ts

diff --git a/packages/frontend-shared/js/emojilist.ts b/packages/frontend-shared/js/emojilist.ts
index 09bea06719..20ddd0f7d7 100644
--- a/packages/frontend-shared/js/emojilist.ts
+++ b/packages/frontend-shared/js/emojilist.ts
@@ -39,13 +39,18 @@ for (let i = 0; i < emojilist.length; i++) {
 
 export const emojiCharByCategory = _charGroupByCategory;
 
-export function getUnicodeEmoji(char: string): UnicodeEmojiDef | string {
+export function getUnicodeEmojiOrNull(char: string): UnicodeEmojiDef | null {
 	// Colorize it because emojilist.json assumes that
 	return unicodeEmojisMap.get(colorizeEmoji(char))
 		// カラースタイル絵文字がjsonに無い場合はテキストスタイル絵文字にフォールバックする
 		?? unicodeEmojisMap.get(char)
-		// それでも見つからない場合はそのまま返す（絵文字情報がjsonに無い場合、このフォールバックが無いとレンダリングに失敗する）
-		?? char;
+		// それでも見つからない場合はnullを返す
+		?? null;
+}
+
+export function getUnicodeEmoji(char: string): UnicodeEmojiDef | string {
+	// 絵文字が見つからない場合はそのまま返す（絵文字情報がjsonに無い場合、このフォールバックが無いとレンダリングに失敗する）
+	return getUnicodeEmojiOrNull(char) ?? char;
 }
 
 export function isSupportedEmoji(char: string): boolean {
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index d96f0e2420..7c60288883 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, inject, onMounted, useTemplateRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { getUnicodeEmoji } from '@@/js/emojilist.js';
+import { getUnicodeEmojiOrNull } from '@@/js/emojilist.js';
 import MkCustomEmojiDetailedDialog from './MkCustomEmojiDetailedDialog.vue';
 import type { MenuItem } from '@/types/menu';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
@@ -60,11 +60,11 @@ const buttonEl = useTemplateRef('buttonEl');
 const emojiName = computed(() => props.reaction.replace(/:/g, '').replace(/@\./, ''));
 
 const canToggle = computed(() => {
-	const emoji = customEmojisMap.get(emojiName.value) ?? getUnicodeEmoji(props.reaction);
+	const emoji = customEmojisMap.get(emojiName.value) ?? getUnicodeEmojiOrNull(props.reaction);
 
 	// TODO
 	//return !props.reaction.match(/@\w/) && $i && emoji && checkReactionPermissions($i, props.note, emoji);
-	return !props.reaction.match(/@\w/) && $i && emoji;
+	return props.reaction.match(/@\w/) == null && $i != null && emoji != null;
 });
 const canGetInfo = computed(() => !props.reaction.match(/@\w/) && props.reaction.includes(':'));
 const isLocalCustomEmoji = props.reaction[0] === ':' && props.reaction.includes('@.');
diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
index dbc673333c..236afa127c 100644
--- a/packages/frontend/src/components/MkSuperMenu.vue
+++ b/packages/frontend/src/components/MkSuperMenu.vue
@@ -64,6 +64,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts">
+import type { Awaitable } from '@/types/misc.js';
+
 export type SuperMenuDef = {
 	title?: string;
 	items: ({
@@ -80,7 +82,7 @@ export type SuperMenuDef = {
 		text: string;
 		danger?: boolean;
 		active?: boolean;
-		action: (ev: MouseEvent) => void | Promise<void>;
+		action: (ev: MouseEvent) => Awaitable<void>;
 	} | {
 		type?: 'link';
 		to: string;
diff --git a/packages/frontend/src/directives/appear.ts b/packages/frontend/src/directives/appear.ts
index f714871420..117dc397da 100644
--- a/packages/frontend/src/directives/appear.ts
+++ b/packages/frontend/src/directives/appear.ts
@@ -5,6 +5,7 @@
 
 import { throttle } from 'throttle-debounce';
 import type { Directive } from 'vue';
+import type { Awaitable } from '@/types/misc.js';
 
 interface HTMLElementWithObserver extends HTMLElement {
 	_observer_?: IntersectionObserver;
@@ -31,4 +32,4 @@ export const appearDirective = {
 	unmounted(src) {
 		if (src._observer_) src._observer_.disconnect();
 	},
-} as Directive<HTMLElementWithObserver, () => void>;
+} as Directive<HTMLElementWithObserver, (() => Awaitable<void>) | null | undefined>;
diff --git a/packages/frontend/src/directives/tooltip.ts b/packages/frontend/src/directives/tooltip.ts
index 9cfa8d657d..8839d9a939 100644
--- a/packages/frontend/src/directives/tooltip.ts
+++ b/packages/frontend/src/directives/tooltip.ts
@@ -15,7 +15,7 @@ const start = isTouchUsing ? 'touchstart' : 'mouseenter';
 const end = isTouchUsing ? 'touchend' : 'mouseleave';
 
 type TooltipDirectiveState = {
-	text: string;
+	text: string | null | undefined;
 	_close: null | (() => void);
 	showTimer: number | null;
 	hideTimer: number | null;
@@ -53,6 +53,7 @@ export const tooltipDirective = {
 
 		if (binding.arg === 'dialog') {
 			el.addEventListener('click', (ev) => {
+				if (binding.value == null) return;
 				ev.preventDefault();
 				ev.stopPropagation();
 				alert({
@@ -128,4 +129,4 @@ export const tooltipDirective = {
 		if (self.checkTimer) window.clearTimeout(self.checkTimer);
 		self.close();
 	},
-} as Directive<TooltipDirectiveElement, string, TooltipDirectiveModifiers, TooltipDirectiveArg>;
+} as Directive<TooltipDirectiveElement, string | null | undefined, TooltipDirectiveModifiers, TooltipDirectiveArg>;
diff --git a/packages/frontend/src/directives/user-preview.ts b/packages/frontend/src/directives/user-preview.ts
index 76e345a108..f81f5dbef8 100644
--- a/packages/frontend/src/directives/user-preview.ts
+++ b/packages/frontend/src/directives/user-preview.ts
@@ -131,4 +131,4 @@ export const userPreviewDirective = {
 		if (self == null) return;
 		self.preview.detach();
 	},
-} as Directive<UserPreviewDirectiveElement, string | Misskey.entities.UserDetailed>;
+} as Directive<UserPreviewDirectiveElement, string | Misskey.entities.UserDetailed | null | undefined>;
diff --git a/packages/frontend/src/type.ts b/packages/frontend/src/type.ts
deleted file mode 100644
index 5ff27158d2..0000000000
--- a/packages/frontend/src/type.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
-
-export type WithNonNullable<T, K extends keyof T> = T & { [P in K]-?: NonNullable<T[P]> };
diff --git a/packages/frontend/src/types/misc.ts b/packages/frontend/src/types/misc.ts
new file mode 100644
index 0000000000..3ddd732531
--- /dev/null
+++ b/packages/frontend/src/types/misc.ts
@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export type Awaitable <T> = T | Promise<T>;
-- 
cgit v1.2.3-freya