我有一個接收值和默認值的函式，如果該值是布林值，那么我希望回傳型別是傳入默認型別的型別。
繼承人的功能：
export type InferStyledValue<T> = (
value: string | number | boolean | undefined,
def: T
) => T;
export const inferStyledValue: InferStyledValue<T> = (value, def) => {
if (typeof value === "string") return value;
if (typeof value === "number") return `${value}px`;
if (typeof value === "boolean") return value && def;
return def;
};
默認值如下所示：
默認值當前不包含數字型別，但我計劃添加它們
const defaults = {
width: "100%",
height: "100%",
padding: "0",
margin: "0",
border: { width: "2px", radius: "8px", color: "#DDDDDD" },
};
函式呼叫如下所示：
inferStyledValue(border.radius, defaults.border.radius)
任何幫助將不勝感激，謝謝。
uj5u.com熱心網友回復：
老實說，這種方法并不好，如果使用不當，通常會導致代碼出現錯誤，但這里有一種方法對您有用：
function inferStyledValue(def: string, val?: string | number): string;
function inferStyledValue(
def: boolean,
val?: boolean | 'true' | 'false' | 0 | 1
): boolean;
function inferStyledValue(def: number, val?: string | number): number;
function inferStyledValue(def: any, val?: any) {
if (typeof def === 'string' && typeof val === 'string') return val;
if (typeof def === 'string' && typeof val === 'number') return `${val}px`;
if (typeof def === 'number' && typeof val === 'number') return val;
if (typeof def === 'number' && typeof val === 'string')
return parseInt(val, 10) || def;
if (typeof def === 'boolean' && typeof val === 'boolean') return val;
if (
typeof def === 'boolean' &&
(typeof val === 'string' || typeof val === 'number')
)
return Boolean(val);
return def;
}
const defaults = {
width: '100%',
height: '100%',
padding: '0',
margin: '0',
border: { width: true, radius: 1, color: '#DDDDDD' },
};
const inferreBool = inferStyledValue(defaults.border.width); // boolean , only accepts boolean | 'true' | 'false' | 0 | 1
const inferredNum = inferStyledValue(defaults.border.radius, '10'); // number , only accepts string | number
const inferredStr = inferStyledValue(defaults.border.color, 10); // string , only accepts string | number -> output '10px' (?)
您可以根據需要更改多載簽名和內部邏輯。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/468678.html