diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index 960e229dd3fa..e778b1641e6a 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -1,5 +1,5 @@
 <template>
-<div :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]">
+<div v-adaptive-bg :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]">
 	<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
 	<div class="body">
 		<span class="name"><MkUserName class="name" :user="user"/></span>
diff --git a/packages/client/src/directives/adaptive-bg.ts b/packages/client/src/directives/adaptive-bg.ts
new file mode 100644
index 000000000000..4be9cde3c699
--- /dev/null
+++ b/packages/client/src/directives/adaptive-bg.ts
@@ -0,0 +1,33 @@
+import { Directive } from 'vue';
+
+// eslint-disable-next-line import/no-default-export
+export default {
+	mounted(src) {
+		const isTransparent = (color?: string | null): boolean => {
+			if (!color) return false;
+			if (color === 'transparent') return true;
+			const [_r, _g, _b, alpha = null] = [...color.match(/\d+/g) ?? []];
+			return alpha === '0';
+		};
+
+		const getBgColor = (el: HTMLElement | null): string => {
+			if (!el) return 'transparent';
+			const { backgroundColor } = window.getComputedStyle(el);
+			if (backgroundColor && !isTransparent(backgroundColor)) {
+				return backgroundColor;
+			} else {
+				return getBgColor(el.parentElement);
+			}
+		};
+
+		const parentBg = getBgColor(src.parentElement);
+
+		const { backgroundColor: myBg } = window.getComputedStyle(src);
+
+		if (parentBg === myBg) {
+			src.style.backgroundColor = 'var(--bg)';
+		} else {
+			src.style.backgroundColor = myBg;
+		}
+	},
+} as Directive<HTMLElement>;
diff --git a/packages/client/src/directives/adaptive-border.ts b/packages/client/src/directives/adaptive-border.ts
index 5bd04024beef..2fa1d457c973 100644
--- a/packages/client/src/directives/adaptive-border.ts
+++ b/packages/client/src/directives/adaptive-border.ts
@@ -1,19 +1,28 @@
 import { Directive } from 'vue';
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(src, binding, vn) {
-		const getBgColor = (el: HTMLElement) => {
-			const style = window.getComputedStyle(el);
-			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
-				return style.backgroundColor;
+	mounted(src) {
+		const isTransparent = (color?: string | null): boolean => {
+			if (!color) return false;
+			if (color === 'transparent') return true;
+			const [_r, _g, _b, alpha = null] = [...color.match(/\d+/g) ?? []];
+			return alpha === '0';
+		};
+
+		const getBgColor = (el: HTMLElement | null): string => {
+			if (!el) return 'transparent';
+			const { backgroundColor } = window.getComputedStyle(el);
+			if (backgroundColor && !isTransparent(backgroundColor)) {
+				return backgroundColor;
 			} else {
-				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
+				return getBgColor(el.parentElement);
 			}
 		};
 
 		const parentBg = getBgColor(src.parentElement);
 
-		const myBg = window.getComputedStyle(src).backgroundColor;
+		const { backgroundColor: myBg } = window.getComputedStyle(src);
 
 		if (parentBg === myBg) {
 			src.style.borderColor = 'var(--divider)';
@@ -21,4 +30,4 @@ export default {
 			src.style.borderColor = myBg;
 		}
 	},
-} as Directive;
+} as Directive<HTMLElement>;
diff --git a/packages/client/src/directives/anim.ts b/packages/client/src/directives/anim.ts
index 04e1c6a40425..fd37109c0d48 100644
--- a/packages/client/src/directives/anim.ts
+++ b/packages/client/src/directives/anim.ts
@@ -1,7 +1,8 @@
 import { Directive } from 'vue';
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	beforeMount(src, binding, vn) {
+	beforeMount(src) {
 		src.style.opacity = '0';
 		src.style.transform = 'scale(0.9)';
 		// ページネーションと相性が悪いので
@@ -9,10 +10,10 @@ export default {
 		src.classList.add('_zoom');
 	},
 
-	mounted(src, binding, vn) {
+	mounted(src) {
 		window.setTimeout(() => {
 			src.style.opacity = '1';
 			src.style.transform = 'none';
 		}, 1);
 	},
-} as Directive;
+} as Directive<HTMLElement, number>;
diff --git a/packages/client/src/directives/appear.ts b/packages/client/src/directives/appear.ts
index a504d11ef9ae..1628d67a0bfb 100644
--- a/packages/client/src/directives/appear.ts
+++ b/packages/client/src/directives/appear.ts
@@ -1,7 +1,10 @@
 import { Directive } from 'vue';
 
+const map = new WeakMap<HTMLElement, IntersectionObserver>();
+
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(src, binding, vn) {
+	mounted(src, binding) {
 		const fn = binding.value;
 		if (fn == null) return;
 
@@ -10,13 +13,15 @@ export default {
 				fn();
 			}
 		});
-
 		observer.observe(src);
-
-		src._observer_ = observer;
+		map.set(src, observer);
 	},
 
-	unmounted(src, binding, vn) {
-		if (src._observer_) src._observer_.disconnect();
-	}
-} as Directive;
+	unmounted(src) {
+		const observer = map.get(src);
+		if (observer) {
+			observer.disconnect();
+			map.delete(src);
+		}
+	},
+} as Directive<HTMLElement, (() => void) | null | undefined>;
diff --git a/packages/client/src/directives/click-anime.ts b/packages/client/src/directives/click-anime.ts
index 5cd54c7323da..6b582e003a0d 100644
--- a/packages/client/src/directives/click-anime.ts
+++ b/packages/client/src/directives/click-anime.ts
@@ -1,17 +1,19 @@
 import { Directive } from 'vue';
 import { defaultStore } from '@/store';
+import { arrayAt } from '@/scripts/tms/utils';
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(el: HTMLElement, binding, vn) {
+	mounted(src) {
 		if (!defaultStore.state.animation) return;
 
-		const target = el.children[0];
+		const target = arrayAt(src.children, 0);
 
 		if (target == null) return;
 
 		target.classList.add('_anime_bounce_standBy');
 
-		el.addEventListener('mousedown', () => {
+		src.addEventListener('mousedown', () => {
 			target.classList.remove('_anime_bounce');
 
 			target.classList.add('_anime_bounce_standBy');
@@ -22,14 +24,14 @@ export default {
 			});
 		});
 
-		el.addEventListener('click', () => {
+		src.addEventListener('click', () => {
 			target.classList.add('_anime_bounce');
 			target.classList.remove('_anime_bounce_ready');
 		});
 
-		el.addEventListener('animationend', () => {
+		src.addEventListener('animationend', () => {
 			target.classList.remove('_anime_bounce');
 			target.classList.add('_anime_bounce_standBy');
 		});
 	},
-} as Directive;
+} as Directive<HTMLElement>;
diff --git a/packages/client/src/directives/container.ts b/packages/client/src/directives/container.ts
index 28cc9f4be205..da150e38db65 100644
--- a/packages/client/src/directives/container.ts
+++ b/packages/client/src/directives/container.ts
@@ -4,7 +4,7 @@ const map = new WeakMap<HTMLElement, ResizeObserver>();
 
 // eslint-disable-next-line import/no-default-export
 export default {
-	mounted(el: HTMLElement) {
+	mounted(el) {
 		const ro = new ResizeObserver(() => {
 			el.style.setProperty('--containerHeight', `${el.offsetHeight}px`);
 		});
@@ -12,11 +12,11 @@ export default {
 		map.set(el, ro);
 	},
 
-	unmounted(el: HTMLElement) {
+	unmounted(el) {
 		const ro = map.get(el);
 		if (ro) {
 			ro.disconnect();
 			map.delete(el);
 		}
 	},
-} as Directive;
+} as Directive<HTMLElement>;
diff --git a/packages/client/src/directives/follow-append.ts b/packages/client/src/directives/follow-append.ts
index b0e99628b0be..046a90f53fb2 100644
--- a/packages/client/src/directives/follow-append.ts
+++ b/packages/client/src/directives/follow-append.ts
@@ -1,13 +1,18 @@
 import { Directive } from 'vue';
 import { getScrollContainer, getScrollPosition } from '@/scripts/scroll';
 
+const map = new WeakMap<HTMLElement, ResizeObserver>();
+
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(src, binding, vn) {
+	mounted(src, binding) {
 		if (binding.value === false) return;
 
 		let isBottom = true;
 
-		const container = getScrollContainer(src)!;
+		const container = getScrollContainer(src);
+		if (!container) return;
+
 		container.addEventListener('scroll', () => {
 			const pos = getScrollPosition(container);
 			const viewHeight = container.clientHeight;
@@ -16,20 +21,21 @@ export default {
 		}, { passive: true });
 		container.scrollTop = container.scrollHeight;
 
-		const ro = new ResizeObserver((entries, observer) => {
+		const ro = new ResizeObserver(() => {
 			if (isBottom) {
 				const height = container.scrollHeight;
 				container.scrollTop = height;
 			}
 		});
-
 		ro.observe(src);
-
-		// TODO: 新たにプロパティを作るのをやめMapを使う
-		src._ro_ = ro;
+		map.set(src, ro);
 	},
 
-	unmounted(src, binding, vn) {
-		if (src._ro_) src._ro_.unobserve(src);
-	}
-} as Directive;
+	unmounted(src) {
+		const ro = map.get(src);
+		if (ro) {
+			ro.disconnect();
+			map.delete(src);
+		}
+	},
+} as Directive<HTMLElement, boolean>;
diff --git a/packages/client/src/directives/get-size.ts b/packages/client/src/directives/get-size.ts
index 76b54ea4b00e..32ca428d30b8 100644
--- a/packages/client/src/directives/get-size.ts
+++ b/packages/client/src/directives/get-size.ts
@@ -1,12 +1,12 @@
 import { Directive } from 'vue';
 
-const mountings = new Map<Element, {
+const mountings = new Map<HTMLElement, {
 	resize: ResizeObserver;
 	intersection?: IntersectionObserver;
 	fn: (w: number, h: number) => void;
 }>();
 
-function calc(src: Element) {
+const calc = (src: HTMLElement): void => {
 	const info = mountings.get(src);
 	const height = src.clientHeight;
 	const width = src.clientWidth;
@@ -30,25 +30,26 @@ function calc(src: Element) {
 	}
 
 	info.fn(width, height);
-}
+};
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(src, binding, vn) {
-		const resize = new ResizeObserver((entries, observer) => {
+	mounted(src, binding) {
+		const resize = new ResizeObserver(() => {
 			calc(src);
 		});
 		resize.observe(src);
 
-		mountings.set(src, { resize, fn: binding.value, });
+		mountings.set(src, { resize, fn: binding.value });
 		calc(src);
 	},
 
-	unmounted(src, binding, vn) {
+	unmounted(src, binding) {
 		binding.value(0, 0);
 		const info = mountings.get(src);
 		if (!info) return;
 		info.resize.disconnect();
 		if (info.intersection) info.intersection.disconnect();
 		mountings.delete(src);
-	}
-} as Directive<Element, (w: number, h: number) => void>;
+	},
+} as Directive<HTMLElement, (w: number, h: number) => void>;
diff --git a/packages/client/src/directives/hotkey.ts b/packages/client/src/directives/hotkey.ts
index d813a95074d8..ed53eacf3c68 100644
--- a/packages/client/src/directives/hotkey.ts
+++ b/packages/client/src/directives/hotkey.ts
@@ -1,24 +1,28 @@
 import { Directive } from 'vue';
-import { makeHotkey } from '../scripts/hotkey';
+import { Keymap, makeHotkey } from '../scripts/hotkey';
 
-export default {
-	mounted(el, binding) {
-		el._hotkey_global = binding.modifiers.global === true;
+const map = new WeakMap<HTMLElement, () => void>();
 
-		el._keyHandler = makeHotkey(binding.value);
+// eslint-disable-next-line import/no-default-export
+export default {
+	mounted(src, binding) {
+		const global = binding.modifiers.global === true;
+		const handler = makeHotkey(binding.value);
 
-		if (el._hotkey_global) {
-			document.addEventListener('keydown', el._keyHandler);
+		if (global) {
+			document.addEventListener('keydown', handler);
+			map.set(src, () => document.removeEventListener('keydown', handler));
 		} else {
-			el.addEventListener('keydown', el._keyHandler);
+			src.addEventListener('keydown', handler);
+			map.set(src, () => src.removeEventListener('keydown', handler));
 		}
 	},
 
-	unmounted(el) {
-		if (el._hotkey_global) {
-			document.removeEventListener('keydown', el._keyHandler);
-		} else {
-			el.removeEventListener('keydown', el._keyHandler);
+	unmounted(src) {
+		const stopHandler = map.get(src);
+		if (stopHandler) {
+			stopHandler();
+			map.delete(src);
 		}
-	}
-} as Directive;
+	},
+} as Directive<HTMLElement, Keymap>;
diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts
index 401a917cba6d..c8d870c5097a 100644
--- a/packages/client/src/directives/index.ts
+++ b/packages/client/src/directives/index.ts
@@ -11,18 +11,31 @@ import anim from './anim';
 import clickAnime from './click-anime';
 import panel from './panel';
 import adaptiveBorder from './adaptive-border';
+import adaptiveBg from './adaptive-bg';
+import container from './container';
 
-export default function(app: App) {
-	app.directive('userPreview', userPreview);
-	app.directive('user-preview', userPreview);
-	app.directive('size', size);
-	app.directive('get-size', getSize);
-	app.directive('ripple', ripple);
-	app.directive('tooltip', tooltip);
-	app.directive('hotkey', hotkey);
-	app.directive('appear', appear);
-	app.directive('anim', anim);
-	app.directive('click-anime', clickAnime);
-	app.directive('panel', panel);
-	app.directive('adaptive-border', adaptiveBorder);
-}
+import { typedEntries } from '@/scripts/tms/utils';
+
+// eslint-disable-next-line import/no-default-export
+export default (app: App): void => {
+	for (const [key, value] of typedEntries(directives)) {
+		app.directive(key, value);
+	}
+};
+
+export const directives = {
+	'userPreview': userPreview,
+	'user-preview': userPreview,
+	'size': size,
+	'get-size': getSize,
+	'ripple': ripple,
+	'tooltip': tooltip,
+	'hotkey': hotkey,
+	'appear': appear,
+	'anim': anim,
+	'click-anime': clickAnime,
+	'panel': panel,
+	'adaptive-border': adaptiveBorder,
+	'adaptive-bg': adaptiveBg,
+	'container': container,
+};
diff --git a/packages/client/src/directives/panel.ts b/packages/client/src/directives/panel.ts
index 8727183d3652..03f15f2f5b51 100644
--- a/packages/client/src/directives/panel.ts
+++ b/packages/client/src/directives/panel.ts
@@ -1,19 +1,28 @@
 import { Directive } from 'vue';
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(src, binding, vn) {
-		const getBgColor = (el: HTMLElement) => {
-			const style = window.getComputedStyle(el);
-			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
-				return style.backgroundColor;
+	mounted(src) {
+		const isTransparent = (color?: string | null): boolean => {
+			if (!color) return false;
+			if (color === 'transparent') return true;
+			const [_r, _g, _b, alpha = null] = [...color.match(/\d+/g) ?? []];
+			return alpha === '0';
+		};
+
+		const getBgColor = (el: HTMLElement | null): string => {
+			if (!el) return 'transparent';
+			const { backgroundColor } = window.getComputedStyle(el);
+			if (backgroundColor && !isTransparent(backgroundColor)) {
+				return backgroundColor;
 			} else {
-				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
+				return getBgColor(el.parentElement);
 			}
 		};
 
 		const parentBg = getBgColor(src.parentElement);
 
-		const myBg = getComputedStyle(document.documentElement).getPropertyValue('--panel');
+		const myBg = window.getComputedStyle(document.documentElement).getPropertyValue('--panel');
 
 		if (parentBg === myBg) {
 			src.style.backgroundColor = 'var(--bg)';
@@ -21,4 +30,4 @@ export default {
 			src.style.backgroundColor = 'var(--panel)';
 		}
 	},
-} as Directive;
+} as Directive<HTMLElement>;
diff --git a/packages/client/src/directives/ripple.ts b/packages/client/src/directives/ripple.ts
index c444a082ed50..4d41a2a45178 100644
--- a/packages/client/src/directives/ripple.ts
+++ b/packages/client/src/directives/ripple.ts
@@ -1,18 +1,21 @@
-import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import { Directive } from 'vue';
 import { popup } from '@/os';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(el, binding, vn) {
+	mounted(src, binding) {
 		// 明示的に false であればバインドしない
 		if (binding.value === false) return;
 
-		el.addEventListener('click', () => {
-			const rect = el.getBoundingClientRect();
+		src.addEventListener('click', () => {
+			const { offsetWidth: width, offsetHeight: height } = src;
+			const { top, left } = src.getBoundingClientRect();
 
-			const x = rect.left + (el.offsetWidth / 2);
-			const y = rect.top + (el.offsetHeight / 2);
+			const x = left + (width / 2);
+			const y = top + (height / 2);
 
 			popup(MkRippleEffect, { x, y }, {}, 'end');
 		});
-	}
-};
+	},
+} as Directive<HTMLElement, boolean>;
diff --git a/packages/client/src/directives/size.ts b/packages/client/src/directives/size.ts
index c472a528ac70..f86fa7176ebf 100644
--- a/packages/client/src/directives/size.ts
+++ b/packages/client/src/directives/size.ts
@@ -2,8 +2,8 @@ import { Directive } from 'vue';
 
 type Value = { max?: number[]; min?: number[]; };
 
-//const observers = new Map<Element, ResizeObserver>();
-const mountings = new Map<Element, {
+//const observers = new Map<HTMLElement, ResizeObserver>();
+const mountings = new Map<HTMLElement, {
 	value: Value;
 	resize: ResizeObserver;
 	intersection?: IntersectionObserver;
@@ -17,9 +17,9 @@ type ClassOrder = {
 
 const cache = new Map<string, ClassOrder>();
 
-function getClassOrder(width: number, queue: Value): ClassOrder {
-	const getMaxClass = (v: number) => `max-width_${v}px`;
-	const getMinClass = (v: number) => `min-width_${v}px`;
+const getClassOrder = (width: number, queue: Value): ClassOrder => {
+	const getMaxClass = (v: number): `max-width_${typeof v}px` => `max-width_${v}px`;
+	const getMinClass = (v: number): `min-width_${typeof v}px` => `min-width_${v}px`;
 
 	return {
 		add: [
@@ -29,20 +29,20 @@ function getClassOrder(width: number, queue: Value): ClassOrder {
 		remove: [
 			...(queue.max ? queue.max.filter(v => width > v).map(getMaxClass) : []),
 			...(queue.min ? queue.min.filter(v => width < v).map(getMinClass) : []),
-		]
+		],
 	};
-}
+};
 
-function applyClassOrder(el: Element, order: ClassOrder) {
+const applyClassOrder = (el: HTMLElement, order: ClassOrder): void => {
 	el.classList.add(...order.add);
 	el.classList.remove(...order.remove);
-}
+};
 
-function getOrderName(width: number, queue: Value): string {
+const getOrderName = (width: number, queue: Value): string => {
 	return `${width}|${queue.max ? queue.max.join(',') : ''}|${queue.min ? queue.min.join(',') : ''}`;
-}
+};
 
-function calc(el: Element) {
+const calc = (el: HTMLElement): void => {
 	const info = mountings.get(el);
 	const width = el.clientWidth;
 
@@ -74,11 +74,12 @@ function calc(el: Element) {
 		cache.set(getOrderName(width, info.value), order);
 		applyClassOrder(el, order);
 	}
-}
+};
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(src, binding, vn) {
-		const resize = new ResizeObserver((entries, observer) => {
+	mounted(src, binding) {
+		const resize = new ResizeObserver(() => {
 			calc(src);
 		});
 
@@ -92,16 +93,16 @@ export default {
 		resize.observe(src);
 	},
 
-	updated(src, binding, vn) {
+	updated(src, binding) {
 		mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value }));
 		calc(src);
 	},
 
-	unmounted(src, binding, vn) {
+	unmounted(src) {
 		const info = mountings.get(src);
 		if (!info) return;
 		info.resize.disconnect();
 		if (info.intersection) info.intersection.disconnect();
 		mountings.delete(src);
-	}
-} as Directive<Element, Value>;
+	},
+} as Directive<HTMLElement, Value>;
diff --git a/packages/client/src/directives/tooltip.ts b/packages/client/src/directives/tooltip.ts
index 5d13497b5f56..e7a0ab23e7ff 100644
--- a/packages/client/src/directives/tooltip.ts
+++ b/packages/client/src/directives/tooltip.ts
@@ -8,19 +8,20 @@ import { popup, alert } from '@/os';
 const start = isTouchUsing ? 'touchstart' : 'mouseover';
 const end = isTouchUsing ? 'touchend' : 'mouseleave';
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(el: HTMLElement, binding, vn) {
+	mounted(src, binding) {
 		const delay = binding.modifiers.noDelay ? 0 : 100;
 
-		const self = (el as any)._tooltipDirective_ = {} as any;
+		const self = (src as any)._tooltipDirective_ = {} as any;
 
-		self.text = binding.value as string;
+		self.text = binding.value;
 		self._close = null;
 		self.showTimer = null;
 		self.hideTimer = null;
 		self.checkTimer = null;
 
-		self.close = () => {
+		self.close = (): void => {
 			if (self._close) {
 				window.clearInterval(self.checkTimer);
 				self._close();
@@ -29,7 +30,7 @@ export default {
 		};
 
 		if (binding.arg === 'dialog') {
-			el.addEventListener('click', (ev) => {
+			src.addEventListener('click', (ev: MouseEvent) => {
 				ev.preventDefault();
 				ev.stopPropagation();
 				alert({
@@ -40,8 +41,8 @@ export default {
 			});
 		}
 
-		self.show = () => {
-			if (!document.body.contains(el)) return;
+		self.show = (): void => {
+			if (!document.body.contains(src)) return;
 			if (self._close) return;
 			if (self.text == null) return;
 
@@ -51,43 +52,43 @@ export default {
 				text: self.text,
 				asMfm: binding.modifiers.mfm,
 				direction: binding.modifiers.left ? 'left' : binding.modifiers.right ? 'right' : binding.modifiers.top ? 'top' : binding.modifiers.bottom ? 'bottom' : 'top',
-				targetElement: el,
+				targetElement: src,
 			}, {}, 'closed');
 
-			self._close = () => {
+			self._close = (): void => {
 				showing.value = false;
 			};
 		};
 
-		el.addEventListener('selectstart', ev => {
+		src.addEventListener('selectstart', ev => {
 			ev.preventDefault();
 		});
 
-		el.addEventListener(start, () => {
+		src.addEventListener(start, () => {
 			window.clearTimeout(self.showTimer);
 			window.clearTimeout(self.hideTimer);
 			self.showTimer = window.setTimeout(self.show, delay);
 		}, { passive: true });
 
-		el.addEventListener(end, () => {
+		src.addEventListener(end, () => {
 			window.clearTimeout(self.showTimer);
 			window.clearTimeout(self.hideTimer);
 			self.hideTimer = window.setTimeout(self.close, delay);
 		}, { passive: true });
 
-		el.addEventListener('click', () => {
+		src.addEventListener('click', () => {
 			window.clearTimeout(self.showTimer);
 			self.close();
 		});
 	},
 
-	updated(el, binding) {
-		const self = el._tooltipDirective_;
-		self.text = binding.value as string;
+	updated(src, binding) {
+		const self = (src as any)._tooltipDirective_;
+		self.text = binding.value;
 	},
 
-	unmounted(el, binding, vn) {
-		const self = el._tooltipDirective_;
+	unmounted(src) {
+		const self = (src as any)._tooltipDirective_;
 		window.clearInterval(self.checkTimer);
 	},
-} as Directive;
+} as Directive<HTMLElement, string>;
diff --git a/packages/client/src/directives/user-preview.ts b/packages/client/src/directives/user-preview.ts
index c46167662490..e27e329ab8d9 100644
--- a/packages/client/src/directives/user-preview.ts
+++ b/packages/client/src/directives/user-preview.ts
@@ -1,24 +1,28 @@
 import { defineAsyncComponent, Directive, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import autobind from 'autobind-decorator';
 import { popup } from '@/os';
 
 export class UserPreview {
-	private el;
-	private user;
-	private showTimer;
-	private hideTimer;
-	private checkTimer;
-	private promise;
-
-	constructor(el, user) {
+	private el: HTMLElement;
+	private user: Misskey.entities.User;
+	private showTimer: number | undefined;
+	private hideTimer: number | undefined;
+	private checkTimer: number | undefined;
+	private promise: {
+		cancel: () => void;
+	} | null;
+
+	constructor(el: HTMLElement, user: Misskey.entities.User) {
 		this.el = el;
 		this.user = user;
+		this.promise = null;
 
 		this.attach();
 	}
 
 	@autobind
-	private show() {
+	private show(): void {
 		if (!document.body.contains(this.el)) return;
 		if (this.promise) return;
 
@@ -27,7 +31,7 @@ export class UserPreview {
 		popup(defineAsyncComponent(() => import('@/components/MkUserPreview.vue')), {
 			showing,
 			q: this.user,
-			source: this.el
+			source: this.el,
 		}, {
 			mouseover: () => {
 				window.clearTimeout(this.hideTimer);
@@ -39,9 +43,9 @@ export class UserPreview {
 		}, 'closed');
 
 		this.promise = {
-			cancel: () => {
+			cancel: (): void => {
 				showing.value = false;
-			}
+			},
 		};
 
 		this.checkTimer = window.setInterval(() => {
@@ -54,7 +58,7 @@ export class UserPreview {
 	}
 
 	@autobind
-	private close() {
+	private close(): void {
 		if (this.promise) {
 			window.clearInterval(this.checkTimer);
 			this.promise.cancel();
@@ -63,34 +67,34 @@ export class UserPreview {
 	}
 
 	@autobind
-	private onMouseover() {
+	private onMouseover(): void {
 		window.clearTimeout(this.showTimer);
 		window.clearTimeout(this.hideTimer);
 		this.showTimer = window.setTimeout(this.show, 500);
 	}
 
 	@autobind
-	private onMouseleave() {
+	private onMouseleave(): void {
 		window.clearTimeout(this.showTimer);
 		window.clearTimeout(this.hideTimer);
 		this.hideTimer = window.setTimeout(this.close, 500);
 	}
 
 	@autobind
-	private onClick() {
+	private onClick(): void {
 		window.clearTimeout(this.showTimer);
 		this.close();
 	}
 
 	@autobind
-	public attach() {
+	public attach(): void {
 		this.el.addEventListener('mouseover', this.onMouseover);
 		this.el.addEventListener('mouseleave', this.onMouseleave);
 		this.el.addEventListener('click', this.onClick);
 	}
 
 	@autobind
-	public detach() {
+	public detach(): void {
 		this.el.removeEventListener('mouseover', this.onMouseover);
 		this.el.removeEventListener('mouseleave', this.onMouseleave);
 		this.el.removeEventListener('click', this.onClick);
@@ -98,8 +102,9 @@ export class UserPreview {
 	}
 }
 
+// eslint-disable-next-line import/no-default-export
 export default {
-	mounted(el: HTMLElement, binding, vn) {
+	mounted(el: HTMLElement, binding) {
 		if (binding.value == null) return;
 
 		// TODO: 新たにプロパティを作るのをやめMapを使う
@@ -109,10 +114,10 @@ export default {
 		self.preview = new UserPreview(el, binding.value);
 	},
 
-	unmounted(el, binding, vn) {
+	unmounted(el, binding) {
 		if (binding.value == null) return;
 
-		const self = el._userPreviewDirective_;
+		const self = (el as any)._userPreviewDirective_;
 		self.preview.detach();
-	}
-} as Directive;
+	},
+} as Directive<HTMLElement, Misskey.entities.User | null | undefined>;
diff --git a/packages/client/src/scripts/hotkey.ts b/packages/client/src/scripts/hotkey.ts
index bd8c3b6cab4e..8fe9fac3c35f 100644
--- a/packages/client/src/scripts/hotkey.ts
+++ b/packages/client/src/scripts/hotkey.ts
@@ -2,7 +2,7 @@ import keyCode from './keycode';
 
 type Callback = (ev: KeyboardEvent) => void;
 
-type Keymap = Record<string, Callback>;
+export type Keymap = Record<string, Callback>;
 
 type Pattern = {
 	which: string[];
@@ -17,12 +17,12 @@ type Action = {
 	allowRepeat: boolean;
 };
 
-const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, callback]): Action => {
-	const result = {
+const parseKeymap = (keymap: Keymap): Action[] => Object.entries(keymap).map(([patterns, callback]): Action => {
+	const result: Action = {
 		patterns: [],
 		callback,
-		allowRepeat: true
-	} as Action;
+		allowRepeat: true,
+	};
 
 	if (patterns.match(/^\(.*\)$/) !== null) {
 		result.allowRepeat = false;
@@ -34,7 +34,7 @@ const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, c
 			which: [],
 			ctrl: false,
 			alt: false,
-			shift: false
+			shift: false,
 		} as Pattern;
 
 		const keys = part.trim().split('+').map(x => x.trim().toLowerCase());
@@ -61,11 +61,11 @@ function match(ev: KeyboardEvent, patterns: Action['patterns']): boolean {
 		pattern.ctrl === ev.ctrlKey &&
 		pattern.shift === ev.shiftKey &&
 		pattern.alt === ev.altKey &&
-		!ev.metaKey
+		!ev.metaKey,
 	);
 }
 
-export const makeHotkey = (keymap: Keymap) => {
+export const makeHotkey = (keymap: Keymap): ((ev: KeyboardEvent) => void) => {
 	const actions = parseKeymap(keymap);
 
 	return (ev: KeyboardEvent) => {
diff --git a/packages/client/src/scripts/tms/utils.ts b/packages/client/src/scripts/tms/utils.ts
index 39961583bcf3..ad4ee249e372 100644
--- a/packages/client/src/scripts/tms/utils.ts
+++ b/packages/client/src/scripts/tms/utils.ts
@@ -44,7 +44,8 @@ export const typedEntries = <T extends Record<string, unknown>>(obj: T): TypedEn
 };
 
 // Array<T>.prototype.at(index: number): T | undefined;
-export const arrayAt = <T>(array: T[], index: number): T | undefined => {
+export const arrayAt = <T>(arrayLike: T[] | ArrayLike<T>, index: number): T | undefined => {
+	const array = Array.isArray(arrayLike) ? arrayLike : Array.from(arrayLike);
 	if (typeof Array.prototype.at === 'function') {
 		return array.at(index);
 	} else {