refactor(frontend): better type defs

This commit is contained in:
syuilo 2025-05-22 13:05:28 +09:00
parent 74c857e23d
commit e4db9b64df
3 changed files with 14 additions and 6 deletions

View File

@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPagination> </MkPagination>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup generic="T extends PagingCtx<'notes/mentions'>">
import { useTemplateRef } from 'vue'; import { useTemplateRef } from 'vue';
import type { PagingCtx } from '@/composables/use-pagination.js'; import type { PagingCtx } from '@/composables/use-pagination.js';
import MkNote from '@/components/MkNote.vue'; import MkNote from '@/components/MkNote.vue';
@ -41,7 +41,7 @@ import { globalEvents, useGlobalEvent } from '@/events.js';
import { isSeparatorNeeded, getSeparatorInfo } from '@/utility/timeline-date-separate.js'; import { isSeparatorNeeded, getSeparatorInfo } from '@/utility/timeline-date-separate.js';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
pagination: PagingCtx; pagination: T;
noGap?: boolean; noGap?: boolean;
disableAutoLoad?: boolean; disableAutoLoad?: boolean;
pullToRefresh?: boolean; pullToRefresh?: boolean;

View File

@ -40,16 +40,19 @@ SPDX-License-Identifier: AGPL-3.0-only
</component> </component>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup generic="T extends PagingCtx">
import type { PagingCtx } from '@/composables/use-pagination.js'; import type { PagingCtx } from '@/composables/use-pagination.js';
import type { UnwrapRef } from 'vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
import { usePagination } from '@/composables/use-pagination.js'; import { usePagination } from '@/composables/use-pagination.js';
import MkPullToRefresh from '@/components/MkPullToRefresh.vue'; import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
type Paginator = ReturnType<typeof usePagination<T['endpoint']>>;
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
pagination: PagingCtx; pagination: T;
disableAutoLoad?: boolean; disableAutoLoad?: boolean;
displayLimit?: number; displayLimit?: number;
pullToRefresh?: boolean; pullToRefresh?: boolean;
@ -58,7 +61,7 @@ const props = withDefaults(defineProps<{
pullToRefresh: true, pullToRefresh: true,
}); });
const paginator = usePagination({ const paginator: Paginator = usePagination({
ctx: props.pagination, ctx: props.pagination,
}); });
@ -70,6 +73,11 @@ function appearFetchMore() {
paginator.fetchOlder(); paginator.fetchOlder();
} }
defineSlots<{
empty: () => void;
default: (props: { items: UnwrapRef<Paginator['items']> }) => void;
}>();
defineExpose({ defineExpose({
paginator: paginator, paginator: paginator,
}); });

View File

@ -40,7 +40,7 @@ export type PagingCtx<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoint
canFetchDetection?: 'safe' | 'limit'; canFetchDetection?: 'safe' | 'limit';
}; };
export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Misskey.Endpoints[Endpoint]['res'] extends (infer I)[] ? I : never>(props: { export function usePagination<Endpoint extends keyof Misskey.Endpoints, T extends { id: string; } = (Misskey.Endpoints[Endpoint]['res'] extends (infer I)[] ? I extends { id: string } ? I : { id: string } : { id: string })>(props: {
ctx: PagingCtx<Endpoint>; ctx: PagingCtx<Endpoint>;
autoInit?: boolean; autoInit?: boolean;
autoReInit?: boolean; autoReInit?: boolean;