DAYMERE's questions

你能告诉我如何制作如下图所示的带有圆边的文本背景吗？

注意：文本和图像可以更改为任何所需的值。

我们需要您在类型操作方面的帮助。有这样一个基本接口（尚未最终确定）。

interface IFormData<Inputs> {
    data: Inputs;
    transformData?: (data: Inputs) => <какой то результат преобразования данных>;
    getData?: (values: Inputs или результат работы функции transformData) => ...
}

请注意，transformData 可能会也可能不会传递给函数，这是一个可选参数。

如何实现以便在传递transformData函数时，我们改变getData(values: ...)中的类型

接口功能

function transformer<T>({
    getData,
    transformData,
    data
}: IFormData<T>) {
    if(getData) {
        if(transformData) {
            getData(transformData(data)) // something to do
        } else {
            getData(data)
        }
    }
}

数据采集​​示例

变换数据的情况

const {getData} = transformer({
    data: {
        first_name: "",
        last_name: "string",
        age: 34
    },
    transformData: (data) => {
        return {
            fullname: data.first_name + " " + data.last_name,
            age: data.age
        }
    },
    getData(values) {
        в этой функции тип values = {
            fullname: string; 
            age: number
        }
    }
})

没有transformData的情况

const {getData} = transformer({
    data: {
        first_name: "",
        last_name: "string",
        age: 34
    },
    getData(values) {
        в этой функции тип values = {
            first_name: string;
            last_name: string 
            age: number
        }
    }
})

最低代码

如何实现像截图中那样的效果，使文本具有白色背景和圆角边缘？每张幻灯片的文本可能会有所不同。