refactor(frontend): Reactivityで型を明示するように (#12791)

* refactor(frontend): Reactivityで型を明示するように

* fix: プロパティの参照が誤っているのを修正

* fix: 初期化の値を空配列に書き換えていた部分をnullに置き換え

packages/frontend/src/widgets/WidgetActivity.calendar.vue

@@ -36,7 +36,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 const props = defineProps<{
-	activity: any[]
+	activity: {
+		total: number;
+		notes: number;
+		replies: number;
+		renotes: number;
+	}[]
 }>();
 
 for (const d of props.activity) {

packages/frontend/src/widgets/WidgetActivity.chart.vue

@@ -36,17 +36,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref } from 'vue';
 const props = defineProps<{
-	activity: any[]
+	activity: {
+		total: number;
+		notes: number;
+		replies: number;
+		renotes: number;
+	}[]
 }>();
 
 const viewBoxX = ref(147);
 const viewBoxY = ref(60);
 const zoom = ref(1);
 const pos = ref(0);
-const pointsNote = ref<any>(null);
-const pointsReply = ref<any>(null);
-const pointsRenote = ref<any>(null);
-const pointsTotal = ref<any>(null);
+const pointsNote = ref<string>();
+const pointsReply = ref<string>();
+const pointsRenote = ref<string>();
+const pointsTotal = ref<string>();
 
 function dragListen(fn) {
 	window.addEventListener('mousemove', fn);

packages/frontend/src/widgets/WidgetActivity.vue

@@ -12,8 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div>
 		<MkLoading v-if="fetching"/>
 		<template v-else>
-			<XCalendar v-show="widgetProps.view === 0" :activity="[].concat(activity)"/>
-			<XChart v-show="widgetProps.view === 1" :activity="[].concat(activity)"/>
+			<XCalendar v-show="widgetProps.view === 0" :activity="activity ?? []"/>
+			<XChart v-show="widgetProps.view === 1" :activity="activity ?? []"/>
 		</template>
 	</div>
 </MkContainer>
@@ -59,7 +59,12 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 	emit,
 );
 
-const activity = ref(null);
+const activity = ref<{
+	total: number;
+	notes: number;
+	replies: number;
+	renotes: number;
+}[] | null>(null);
 const fetching = ref(true);
 
 const toggleView = () => {

packages/frontend/src/widgets/WidgetFederation.vue

@@ -26,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
@@ -56,8 +57,8 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
-const instances = ref([]);
-const charts = ref([]);
+const instances = ref<Misskey.entities.FederationInstance[]>([]);
+const charts = ref<Misskey.entities.ChartsInstanceResponse[]>([]);
 const fetching = ref(true);
 
 const fetch = async () => {

packages/frontend/src/widgets/WidgetInstanceCloud.vue

@@ -19,6 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { shallowRef } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
@@ -48,7 +49,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 );
 
 const cloud = shallowRef<InstanceType<typeof MkTagCloud> | null>();
-const activeInstances = shallowRef(null);
+const activeInstances = shallowRef<Misskey.entities.FederationInstance[] | null>(null);
 
 function onInstanceClick(i) {
 	os.pageWindow(`/instance-info/${i.host}`);

packages/frontend/src/widgets/WidgetPhotos.vue

@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onUnmounted, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import { useStream } from '@/stream.js';
@@ -57,7 +58,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 );
 
 const connection = useStream().useChannel('main');
-const images = ref([]);
+const images = ref<Misskey.entities.DriveFile[]>([]);
 const fetching = ref(true);
 
 const onDriveFileCreated = (file) => {

packages/frontend/src/widgets/WidgetSlideshow.vue

@@ -18,6 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, ref, shallowRef } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import * as os from '@/os.js';
@@ -49,7 +50,7 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 	emit,
 );
 
-const images = ref([]);
+const images = ref<Misskey.entities.DriveFile[]>([]);
 const fetching = ref(true);
 const slideA = shallowRef<HTMLElement>();
 const slideB = shallowRef<HTMLElement>();

packages/frontend/src/widgets/WidgetTrends.vue

@@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
@@ -54,7 +55,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
-const stats = ref([]);
+const stats = ref<Misskey.entities.HashtagsTrendResponse>([]);
 const fetching = ref(true);
 
 const fetch = () => {

packages/frontend/src/widgets/WidgetUserList.vue

@@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import { GetFormResultType } from '@/scripts/form.js';
 import MkContainer from '@/components/MkContainer.vue';
@@ -58,8 +59,8 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 	emit,
 );
 
-const list = ref();
-const users = ref([]);
+const list = ref<Misskey.entities.UserList>();
+const users = ref<Misskey.entities.UserDetailed[]>([]);
 const fetching = ref(true);
 
 async function chooseList() {

packages/frontend/src/widgets/server-metric/cpu-mem.vue

@@ -76,11 +76,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { v4 as uuid } from 'uuid';
 
 const props = defineProps<{
 	connection: any,
-	meta: any
+	meta: Misskey.entities.ServerInfoResponse
 }>();
 
 const viewBoxX = ref<number>(50);
@@ -94,10 +95,10 @@ const cpuPolylinePoints = ref<string>('');
 const memPolylinePoints = ref<string>('');
 const cpuPolygonPoints = ref<string>('');
 const memPolygonPoints = ref<string>('');
-const cpuHeadX = ref<any>(null);
-const cpuHeadY = ref<any>(null);
-const memHeadX = ref<any>(null);
-const memHeadY = ref<any>(null);
+const cpuHeadX = ref<number>();
+const cpuHeadY = ref<number>();
+const memHeadX = ref<number>();
+const memHeadY = ref<number>();
 const cpuP = ref<string>('');
 const memP = ref<string>('');
 

packages/frontend/src/widgets/server-metric/cpu.vue

@@ -16,11 +16,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import XPie from './pie.vue';
 
 const props = defineProps<{
 	connection: any,
-	meta: any
+	meta: Misskey.entities.ServerInfoResponse
 }>();
 
 const usage = ref<number>(0);

packages/frontend/src/widgets/server-metric/disk.vue

@@ -17,11 +17,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import XPie from './pie.vue';
 import bytes from '@/filters/bytes.js';
 
 const props = defineProps<{
-	meta: any; // TODO
+	meta: Misskey.entities.ServerInfoResponse;
 }>();
 
 const usage = computed(() => props.meta.fs.used / props.meta.fs.total);

packages/frontend/src/widgets/server-metric/index.vue

@@ -21,6 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onUnmounted, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, Widget, WidgetComponentExpose } from '../widget.js';
 import XCpuMemory from './cpu-mem.vue';
 import XNet from './net.vue';
@@ -65,7 +66,7 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
 	emit,
 );
 
-const meta = ref(null);
+const meta = ref<Misskey.entities.ServerInfoResponse | null>(null);
 
 os.apiGet('server-info', {}).then(res => {
 	meta.value = res;

packages/frontend/src/widgets/server-metric/mem.vue

@@ -17,12 +17,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import XPie from './pie.vue';
 import bytes from '@/filters/bytes.js';
 
 const props = defineProps<{
 	connection: any,
-	meta: any
+	meta: Misskey.entities.ServerInfoResponse
 }>();
 
 const usage = ref<number>(0);

packages/frontend/src/widgets/server-metric/net.vue

@@ -50,11 +50,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import bytes from '@/filters/bytes.js';
 
 const props = defineProps<{
 	connection: any,
-	meta: any
+	meta: Misskey.entities.ServerInfoResponse
 }>();
 
 const viewBoxX = ref<number>(50);
@@ -64,10 +65,10 @@ const inPolylinePoints = ref<string>('');
 const outPolylinePoints = ref<string>('');
 const inPolygonPoints = ref<string>('');
 const outPolygonPoints = ref<string>('');
-const inHeadX = ref<any>(null);
-const inHeadY = ref<any>(null);
-const outHeadX = ref<any>(null);
-const outHeadY = ref<any>(null);
+const inHeadX = ref<number>();
+const inHeadY = ref<number>();
+const outHeadX = ref<number>();
+const outHeadY = ref<number>();
 const inRecent = ref<number>(0);
 const outRecent = ref<number>(0);