访问函数类型中的参数类型

Question

我有一个接收值和默认值的函数，如果该值是布尔值，那么我希望 return 类型是传入默认类型的类型。

函数如下：

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)

如有任何帮助，我们将不胜感激。

Answer 1

老实说，这种方法并不好，如果使用不当，通常会导致代码中出现错误，但这是一种适合您的方法：

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' (?)

您可以根据需要更改重载签名和内部逻辑。

访问函数类型中的参数类型

Access parameter types in function type

typescript

reactjs

tsx