首页 > 解决方案 > 如何从泛型函数(Typescript)中实现返回类型始终是可选的

问题描述

如何实现返回类型始终是函数中泛型返回类型的可选?

基本上,我希望返回类型(数据和错误)始终是可选的,因为其中之一将始终未定义。

Ts -> 声明

import getConfig from 'next/config';
import axios, { AxiosRequestConfig } from 'axios';

import { MethodCall } from './methods';

const { publicRuntimeConfig } = getConfig();


export interface HttpReturnSuccess<TData = unknown> {
    data: TData;
    error: undefined;
    isError: false;
}

export interface HttpReturnError<TError = unknown>
     {
    data: undefined;
    error: TError;
    isError: true;
}

export type HttpReturn<TData = unknown, TError = unknown> =
    | HttpReturnSuccess<TData>
    | HttpReturnError<TError>;

export interface HttpProps<TPayload> {
    method: MethodCall;
    path: string;
    data?: TPayload;
    config?: AxiosRequestConfig;
}

这是功能。我想要的是当它返回{data: Data, error: Error}它应该给我可选数据和错误的对象时。例如 ->{data?: Data, error?: Error}

const baseUrl = publicRuntimeConfig.baseUrl;

export const internalHttp = async <Data = unknown, Payload = unknown, Error = unknown>(
    props: HttpProps<Payload>
): Promise<HttpReturn<Data, Error>> => {
    const { method, path, data: body, config } = props;

    const returnedValue = {
        data: undefined,
        error: undefined,
        isError: false,
    };

    const url = baseUrl + ':' + path;

    const options = [body, config];

    if (method === MethodCall.Get) options.shift();

    try {
        const { data } = await axios[method]<Data>(url, ...options);

        returnedValue.data = data as Data;
    } catch (error) {
        returnedValue.error = error as Error;

        returnedValue.isError = true;
    }

    return returnedValue;
};

const {data} = internalHttp<{name: "amed"}>() 

// I want data to be Data | undefined. 

// TS suggestions -> data.name | I want -> data?.name -> this behaviour

标签: typescriptgenericsnext.js

解决方案


您应该能够提供与函数定义内联的返回类型:

export const internalHttp = async <
    Data = unknown,
    Payload = unknown,
    Error = unknown
>(
    props: HttpProps<Data ,Error>
) : {data: Data | undefined, error: Error | undefined, isError: boolean} => { ... }

推荐阅读