feat(request): export _request

for custom response type

Author: wangcch

src/request.ts

@@ -14,7 +14,7 @@ export type _ResponseDataItemType<T> = T extends AxiosResponse<infer D1>
 
 export interface Resource<T, D = any, W = AxiosResponse>
   extends AxiosRequestConfig<D> {
-  _payload?: W extends AxiosResponse ? AxiosResponse<T> : T;
+  _payload?: W extends AxiosResponse ? AxiosResponse<T, D> : T;
 }
 
 export type Request<T = any, D = any, W = any> = (
@@ -71,12 +71,19 @@ export type RequestCallbackFn<T extends Request> = {
 /**
  * For TypeScript type deduction
  */
-export function request<T, D = any, W = AxiosResponse>(
+export function _request<T, D = any, W = false>(
   config: AxiosRequestConfig<D>,
 ): Resource<T, D, W> {
   return config;
 }
 
+/**
+ * For TypeScript type deduction
+ */
+export const request = <T, D = any, W = AxiosResponse<T, D>>(
+  config: AxiosRequestConfig<D>,
+) => _request<T, D, W>(config);
+
 export function createRequestError<
   T = any,
   D = any,

tests/request.test.ts

@@ -1,6 +1,7 @@
-import { describe, it, expect } from "vitest";
-import type { AxiosRequestConfig } from "axios";
-import { request, createRequestError } from "../src";
+import { describe, it, expect, expectTypeOf } from "vitest";
+import type { AxiosRequestConfig, AxiosResponse } from "axios";
+import type { Payload, Resource } from "../src";
+import { request, _request, createRequestError } from "../src";
 
 const config1 = { url: "/config1", method: "GET" } as AxiosRequestConfig;
 const config2 = {
@@ -62,3 +63,34 @@ describe("createRequestError", () => {
     expect(createRequestError({} as any).original).toStrictEqual({});
   });
 });
+
+describe("type checking", () => {
+  type DataType = { a: string; b?: number };
+  type ItemType = { z: string[] };
+  type DataType2 = DataType & { data?: ItemType };
+  const rq0 = () => _request<DataType>({});
+  const rq1 = () => request<DataType>({});
+  const rq2 = () => _request<DataType2>({});
+
+  it("request", () => {
+    expectTypeOf(rq0()).toEqualTypeOf<Resource<DataType, any, false>>();
+    expectTypeOf(rq1()).toEqualTypeOf<
+      Resource<DataType, any, AxiosResponse<DataType, any>>
+    >();
+
+    const c0 = null as unknown as Payload<typeof rq0>;
+    expectTypeOf(c0).toEqualTypeOf<DataType | undefined>();
+    const c1 = null as unknown as Payload<typeof rq0, true>;
+    expectTypeOf(c1).toEqualTypeOf<undefined>();
+
+    const c2 = null as unknown as Payload<typeof rq1>;
+    expectTypeOf(c2).toEqualTypeOf<AxiosResponse<DataType, any> | undefined>();
+    const c3 = null as unknown as Payload<typeof rq1, true>;
+    expectTypeOf(c3).toEqualTypeOf<DataType | undefined>();
+
+    const c4 = null as unknown as Payload<typeof rq2>;
+    expectTypeOf(c4).toEqualTypeOf<DataType2 | undefined>();
+    const c5 = null as unknown as Payload<typeof rq2, true>;
+    expectTypeOf(c5).toEqualTypeOf<ItemType | undefined>();
+  });
+});

tests/useRequest.test.ts

@@ -1,9 +1,9 @@
 import { describe, expect, test, vi, expectTypeOf } from "vitest";
 import { defineComponent, h } from "vue";
-import type { AxiosResponse, AxiosRequestConfig } from "axios";
+import type { AxiosResponse } from "axios";
 import axios from "axios";
 
-import AxiosUseVue, { useRequest, request } from "../src";
+import AxiosUseVue, { useRequest, _request } from "../src";
 import type { MockDataUserItem } from "./setup/mock-request";
 import {
   getAPIFuncs,
@@ -164,12 +164,9 @@ describe("useRequest", () => {
     });
     _instance.interceptors.response.use((d) => d.data);
 
-    const customRequest = <T, D = any>(config: AxiosRequestConfig) =>
-      request<T, D, false>(config);
-
     const [createRequest] = useRequest(
       (id: string) =>
-        customRequest<MockDataUserItem>({
+        _request<MockDataUserItem>({
           method: "get",
           url: `/user/${id}`,
         }),

tests/useResource.test.ts

@@ -1,9 +1,9 @@
 import { describe, expect, test, expectTypeOf } from "vitest";
 import { mount, flushPromises } from "@vue/test-utils";
-import type { AxiosResponse, AxiosRequestConfig } from "axios";
+import type { AxiosResponse } from "axios";
 import { computed, defineComponent, h, ref, unref, reactive } from "vue";
 
-import { useResource, request } from "../src";
+import { useResource, _request } from "../src";
 import type { MockDataUserItem } from "./setup/mock-request";
 import { getAPIFuncs, MOCK_DATA_USER_LIST } from "./setup/mock-request";
 
@@ -245,16 +245,13 @@ describe("useResource", () => {
   });
 
   test("types: custom response type", async () => {
-    const customRequest = <T, D = any>(config: AxiosRequestConfig) =>
-      request<T, D, false>(config);
-
     const Component = defineComponent({
       setup() {
         const id = ref("1");
 
         const [res] = useResource(
           (i: string) =>
-            customRequest<MockDataUserItem>({
+            _request<MockDataUserItem>({
               method: "get",
               url: `/user/${i}`,
             }),