typescript 使用在多个位置返回数据的函数

whhtz7ly 于 2022-12-14 发布在 TypeScript

关注(0)|答案(1)|浏览(155)

编辑

如果data接受这样的代码就好了：

{
   error: boolean;
   errorText: string;
   ...anyOtherProperties
}

我在这里的用例是，我想有一个函数来验证我的表单字段，但是我需要将我的数据传递给它，它有一个唯一的接口绑定到它，然后我需要返回修改后的数据。
以下是一个示例：

const InvalidateAllFields = (error: unknown, data: UserInterface): UserInterface => {
    if (error instanceof z.ZodError) {
        const { fieldErrors } = error.flatten();
        for (const key of Object.keys(data)) {
            const indexKey = key as keyof UserInterface;
            const error = fieldErrors[indexKey];
            data[indexKey].error = !!error;
            data[indexKey].errorText = error?.[0] ?? '';
        }
    }
    return data;
};

由于UserInterface的原因，我不能以其他形式使用它，只能使用具有该接口的形式。
要在多个地方使用相同的函数，需要做些什么？

typescript

来源：https://stackoverflow.com/questions/74735454/using-a-function-that-returns-data-in-multiple-places

1条答案

按热度按时间

ddrv8njm1#

溶液

感谢@crashmstr，我做了一些研究，找到了我问题的答案。
使用泛型是解决这个问题的方法。
首先声明一个可以接收泛型并正确分析键的类型：

type DataType<T> = {
    [key in keyof T]: { error: boolean; message: string };
};

然后在声明函数时，重要的部分是将DataType扩展为泛型，然后将泛型用作data和return类型。

export const genericValidationFunc = <T extends DataType<T>>(
    errors: Record<string, { error: boolean; message: string }>,
    data: T
): T => {
    for (const key of Object.keys(data)) {
        const indexKey = key as keyof T;
        data[indexKey].error = !!errors[key]?.error;
        data[indexKey].message = errors[key]?.message ?? '';
    }

    return data;
};

现在，当你调用它，在任何需要它的地方使用它时，它只会指出你是否缺少DataType中需要的东西，其他任何东西都被忽略。
例如：

interface DataInterface {
    mydata: { text: ''; error: boolean; message: string };
}

let data: DataInterface = {
    mydata: { text: '', error: false, message: '' }
};

const errors = {
    mydata: { error: true, message: 'Hello World' }
};

// Now this doesn't give a warning, even though text is not 
//defined on my function as one of the returned values
data = genericValidationFunc <DataInterface>(errors, data);

虽然我测试了它，它对我的用例有效，但由于我还在学习打字脚本，这段代码中可能仍然有问题。

赞(0）回复(0）举报 2022-12-14

我来回答

typescript 使用在多个位置返回数据的函数

1条答案

溶液

相关问题

热门标签

最新问答