fix: correct exposure type of usePagination (#528)

* fix: correct exposure type of usePagination * refactor: a better implement * docs: modify README.md --------- Co-authored-by: Scott Hu <huzhen555@qq.com>
alovajs · Sep 3, 2024 · 103a1b1 · 103a1b1
1 parent 3be9a4c
commit 103a1b1
Show file tree

Hide file tree

Showing 15 changed files with 81 additions and 22 deletions.
diff --git a/.changeset/honest-lizards-grin.md b/.changeset/honest-lizards-grin.md
@@ -0,0 +1,5 @@
+---
+'alova': patch
+---
+
+fix: correct exposure type of useHook
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 <img width="200px" src="https://alova.js.org/img/logo-text-vertical.svg" />
 </p>
 
-<p align="center"><b>Creative next-generation request tools.<br />Extremely improve your API using efficiency and save brainpower Just one step</b></p>
+<p align="center"><b>Workflow-Streamlined next-generation request tools.<br />Extremely improve your API using efficiency and save brainpower Just one step</b></p>
 
 <p align="center">English | <a href="./README.zh-CN.md">Chinese</a></p>
 
@@ -18,7 +18,7 @@
 
 ## What is alova?
 
-Alova is an creative next-generation request tool. Starting from front-end and back-end collaboration and API consumption, it simplifies API consumption from 7 steps to only 1 step, saving you most of the work in requesting and making network requests very simple. Let's see how alova can help you simplify your work.
+alova(pronounced /əˈləʊva/) is a workflow-streamlined next-generation request tool. Starting from front-end and back-end collaboration and API integration, it streamline API integration workflow from 7 steps to only 1 step, extremely streamline API integration workflow and making network requests very simple. Let's see how alova can help you simplify your work.
 
 ![](https://alova.js.org/img/overview_flow_en.png)
 

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -2,7 +2,7 @@
   <img width="200px" src="https://alova.js.org/img/logo-text-vertical.svg" />
 </p>
 
-<p align="center"><b>创新的下一代请求工具<br />极致地提升你的API接入效率，节约大脑，仅需一步</b></p>
+<p align="center"><b>工作流精简的下一代请求工具<br />极致地简化你的API集成工作流，仅需一步</b></p>
 
 <p align="center"><a href="./README.md">📑English</a> | 中文</p>
 
@@ -18,7 +18,7 @@
 
 ## alova 是什么？
 
-alova 是一个创新的下一代请求工具，从前后端协作和 API 消费作为出发点，将 API 的消费从 7 步简化为只有 1 步，帮你在请求方面省去大部分的工作，让网络请求变得非常简单。我们来看看 alova 是如何帮你的简化工作的。
+alova（读作/əˈləʊva/）是一个流程精简的下一代请求工具，从前后端协作和 API 集成作为出发点，将 API 集成步骤从 7 步简化为只有 1 步，极致地简化 API 集成工作流，让网络请求变得非常简单。我们来看看 alova 是如何帮你的简化工作的。
 
 ![](https://alova.js.org/img/overview_flow_cn.png)
 

diff --git a/internal/testUtils.ts b/internal/testUtils.ts
@@ -49,3 +49,6 @@ export const generateContinuousNumbers = (
   const transformFn = typeof transform === 'object' ? (i: number) => transform[i] || i : transform;
   return Array.from({ length: Math.abs(end - start + 1) }).map((_, i) => transformFn(start + i));
 };
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const expectType = <T>(value: T) => {};
diff --git a/packages/alova/typings/clienthook/general.d.ts b/packages/alova/typings/clienthook/general.d.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { FrameworkReadableState, FrameworkState } from '@alova/shared/FrameworkState';
 import { EventManager } from '@alova/shared/createEventManager';
+import type { IsUnknown } from '@alova/shared/types';
 import {
   AlovaGenerics,
   FetchRequestState,
@@ -206,13 +207,14 @@ export interface UseHookExportedState<AG extends AlovaGenerics>
     ExportedState<Progress, AG['StatesExport']>,
     ExportedState<Progress, AG['StatesExport']>
   > {}
-export interface UseHookExposure<AG extends AlovaGenerics = AlovaGenerics> extends UseHookExportedState<AG> {
+export interface UseHookExposure<AG extends AlovaGenerics = AlovaGenerics, SelfType = unknown>
+  extends UseHookExportedState<AG> {
   abort: () => void;
   update: StateUpdater<UseHookExportedState<AG>, AG['StatesExport']>;
   send: SendHandler<AG['Responded']>;
-  onSuccess(handler: SuccessHandler<AG>): this;
-  onError(handler: ErrorHandler<AG>): this;
-  onComplete(handler: CompleteHandler<AG>): this;
+  onSuccess(handler: SuccessHandler<AG>): IsUnknown<SelfType, this, SelfType>;
+  onError(handler: ErrorHandler<AG>): IsUnknown<SelfType, this, SelfType>;
+  onComplete(handler: CompleteHandler<AG>): IsUnknown<SelfType, this, SelfType>;
   __proxyState: ProxyStateGetter<UseHookExportedState<AG>>;
   __referingObj: ReferingObject;
 }

diff --git a/packages/alova/typings/clienthook/hooks/useCaptcha.d.ts b/packages/alova/typings/clienthook/hooks/useCaptcha.d.ts
@@ -16,7 +16,7 @@ export type CaptchaHookConfig<AG extends AlovaGenerics> = {
 /**
  * useCaptcha返回值
  */
-export interface CaptchaExposure<AG extends AlovaGenerics> extends UseHookExposure<AG> {
+export interface CaptchaExposure<AG extends AlovaGenerics> extends UseHookExposure<AG, CaptchaExposure<AG>> {
   /**
    * 当前倒计时，每秒-1，当倒计时到0时可再次发送验证码
    */

diff --git a/packages/alova/typings/clienthook/hooks/useForm.d.ts b/packages/alova/typings/clienthook/hooks/useForm.d.ts
@@ -59,7 +59,7 @@ export type RestoreHandler = () => void;
 /**
  * useForm返回值
  */
-export interface FormExposure<AG extends AlovaGenerics, F> extends UseHookExposure<AG> {
+export interface FormExposure<AG extends AlovaGenerics, F> extends UseHookExposure<AG, FormExposure<AG, F>> {
   /**
    * 表单数据
    */

diff --git a/packages/alova/typings/clienthook/hooks/usePagination.d.ts b/packages/alova/typings/clienthook/hooks/usePagination.d.ts
@@ -55,9 +55,8 @@ export interface PaginationHookConfig<AG extends AlovaGenerics, ListData> extend
    */
   watchingStates?: AG['StatesExport']['Watched'][];
 }
-
 export interface UsePaginationExposure<AG extends AlovaGenerics, ListData extends unknown[]>
-  extends Omit<UseHookExposure<AG>, 'update'> {
+  extends Omit<UseHookExposure<AG, UsePaginationExposure<AG, ListData>>, 'update'> {
   page: ExportedState<number, AG['StatesExport']>;
   pageSize: ExportedState<number, AG['StatesExport']>;
   data: ExportedState<

diff --git a/packages/alova/typings/clienthook/hooks/useRetriable.d.ts b/packages/alova/typings/clienthook/hooks/useRetriable.d.ts
@@ -45,7 +45,7 @@ export interface RetriableFailEvent<AG extends AlovaGenerics> extends AlovaError
 /**
  * useRetriableRequest返回值
  */
-export interface RetriableExposure<AG extends AlovaGenerics> extends UseHookExposure<AG> {
+export interface RetriableExposure<AG extends AlovaGenerics> extends UseHookExposure<AG, RetriableExposure<AG>> {
   /**
    * 停止重试，只在重试期间调用有效
    * 停止后将立即触发onFail事件

diff --git a/packages/client/test/type/exposure.spec.ts b/packages/client/test/type/exposure.spec.ts
@@ -0,0 +1,49 @@
+import { createAlova } from 'alova';
+import { usePagination, useRequest } from 'alova/client';
+import GlobalFetch from 'alova/fetch';
+import vueHook from 'alova/vue';
+import { expectType } from 'root/testUtils';
+import { Ref } from 'vue';
+
+const VueAlovaInst = createAlova({
+  statesHook: vueHook,
+  requestAdapter: GlobalFetch()
+});
+
+const Getter = <T>() => VueAlovaInst.Get<T>('');
+
+describe('hook exposure', () => {
+  test('useRequest', () => {
+    const useHookExposure = useRequest(Getter<number>, {
+      immediate: false
+    });
+    type UseHookExposure = typeof useHookExposure;
+
+    expectType<Ref<number>>(useHookExposure.data);
+    expectType<Ref<number>>(useHookExposure.onSuccess(() => {}).data);
+    expectType<UseHookExposure>(useHookExposure.onSuccess(() => {}));
+    expectType<UseHookExposure>(
+      useHookExposure
+        .onSuccess(() => {})
+        .onSuccess(() => {})
+        .onSuccess(() => {})
+    );
+  });
+
+  test('usePagination', () => {
+    const paginationExposure = usePagination(Getter<{ data: number[] }>, {
+      data: r => r.data
+    });
+    type PaginationExposure = typeof paginationExposure;
+
+    expectType<Ref<number[]>>(paginationExposure.data);
+    expectType<Ref<number[]>>(paginationExposure.onSuccess(() => {}).data);
+    expectType<PaginationExposure>(paginationExposure.onSuccess(() => {}));
+    expectType<PaginationExposure>(
+      paginationExposure
+        .onSuccess(() => {})
+        .onSuccess(() => {})
+        .onSuccess(() => {})
+    );
+  });
+});
diff --git a/packages/client/typings/clienthook/general.d.ts b/packages/client/typings/clienthook/general.d.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { FrameworkReadableState, FrameworkState } from '@alova/shared/FrameworkState';
 import { EventManager } from '@alova/shared/createEventManager';
+import type { IsUnknown } from '@alova/shared/types';
 import {
   AlovaGenerics,
   FetchRequestState,
@@ -206,13 +207,14 @@ export interface UseHookExportedState<AG extends AlovaGenerics>
     ExportedState<Progress, AG['StatesExport']>,
     ExportedState<Progress, AG['StatesExport']>
   > {}
-export interface UseHookExposure<AG extends AlovaGenerics = AlovaGenerics> extends UseHookExportedState<AG> {
+export interface UseHookExposure<AG extends AlovaGenerics = AlovaGenerics, SelfType = unknown>
+  extends UseHookExportedState<AG> {
   abort: () => void;
   update: StateUpdater<UseHookExportedState<AG>, AG['StatesExport']>;
   send: SendHandler<AG['Responded']>;
-  onSuccess(handler: SuccessHandler<AG>): this;
-  onError(handler: ErrorHandler<AG>): this;
-  onComplete(handler: CompleteHandler<AG>): this;
+  onSuccess(handler: SuccessHandler<AG>): IsUnknown<SelfType, this, SelfType>;
+  onError(handler: ErrorHandler<AG>): IsUnknown<SelfType, this, SelfType>;
+  onComplete(handler: CompleteHandler<AG>): IsUnknown<SelfType, this, SelfType>;
   __proxyState: ProxyStateGetter<UseHookExportedState<AG>>;
   __referingObj: ReferingObject;
 }

diff --git a/packages/client/typings/clienthook/hooks/useCaptcha.d.ts b/packages/client/typings/clienthook/hooks/useCaptcha.d.ts
@@ -16,7 +16,7 @@ export type CaptchaHookConfig<AG extends AlovaGenerics> = {
 /**
  * useCaptcha返回值
  */
-export interface CaptchaExposure<AG extends AlovaGenerics> extends UseHookExposure<AG> {
+export interface CaptchaExposure<AG extends AlovaGenerics> extends UseHookExposure<AG, CaptchaExposure<AG>> {
   /**
    * 当前倒计时，每秒-1，当倒计时到0时可再次发送验证码
    */

diff --git a/packages/client/typings/clienthook/hooks/useForm.d.ts b/packages/client/typings/clienthook/hooks/useForm.d.ts
@@ -59,7 +59,7 @@ export type RestoreHandler = () => void;
 /**
  * useForm返回值
  */
-export interface FormExposure<AG extends AlovaGenerics, F> extends UseHookExposure<AG> {
+export interface FormExposure<AG extends AlovaGenerics, F> extends UseHookExposure<AG, FormExposure<AG, F>> {
   /**
    * 表单数据
    */

diff --git a/packages/client/typings/clienthook/hooks/usePagination.d.ts b/packages/client/typings/clienthook/hooks/usePagination.d.ts
@@ -55,9 +55,8 @@ export interface PaginationHookConfig<AG extends AlovaGenerics, ListData> extend
    */
   watchingStates?: AG['StatesExport']['Watched'][];
 }
-
 export interface UsePaginationExposure<AG extends AlovaGenerics, ListData extends unknown[]>
-  extends Omit<UseHookExposure<AG>, 'update'> {
+  extends Omit<UseHookExposure<AG, UsePaginationExposure<AG, ListData>>, 'update'> {
   page: ExportedState<number, AG['StatesExport']>;
   pageSize: ExportedState<number, AG['StatesExport']>;
   data: ExportedState<

diff --git a/packages/client/typings/clienthook/hooks/useRetriable.d.ts b/packages/client/typings/clienthook/hooks/useRetriable.d.ts
@@ -45,7 +45,7 @@ export interface RetriableFailEvent<AG extends AlovaGenerics> extends AlovaError
 /**
  * useRetriableRequest返回值
  */
-export interface RetriableExposure<AG extends AlovaGenerics> extends UseHookExposure<AG> {
+export interface RetriableExposure<AG extends AlovaGenerics> extends UseHookExposure<AG, RetriableExposure<AG>> {
   /**
    * 停止重试，只在重试期间调用有效
    * 停止后将立即触发onFail事件