如何为TypeScript中的style对象指定正确类型？

首先，先修正你代码里的一个小问题：style.key 应该改成 style[key]，否则会给style添加一个名为key的属性，而不是你传入的margin或padding。

接下来针对style变量的类型定义，提供两种可行方案：

方案一：联合类型限定返回结构 #

先把key参数的类型限定为"margin" | "padding"，再给style和函数返回值指定包含这两个可选属性的类型：

export const getPaddingOrMarginStyle = (arrValue: number[], key: "margin" | "padding"): { margin?: string; padding?: string } => {
  const style: { margin?: string; padding?: string } = {};

  if (arrValue.length === 4) {
    style[key] = `${arrValue[0]}px ${arrValue[1]}px ${arrValue[2]}px ${arrValue[3]}px`;
  } else if (arrValue.length === 2) {
    style[key] = `${arrValue[0]}px ${arrValue[1]}px`;
  } else if (arrValue.length === 1 && key !== 'margin') {
    style[key] = `${arrValue}px`;
  } else if (arrValue.length === 1 && key === 'margin') {
    style.margin = arrValue[0] === 0 ? `${arrValue}px auto` : `${arrValue}px`;
  }

  return style;
};

这个类型{ margin?: string; padding?: string }表示对象最多包含margin或padding其中一个属性，符合你的需求。

方案二：泛型实现精确类型匹配 #

如果希望返回类型严格对应传入的key（比如传margin就返回{ margin: string }，传padding就返回{ padding: string }），可以用泛型来实现：

type StyleKey = "margin" | "padding";

export const getPaddingOrMarginStyle = <K extends StyleKey>(arrValue: number[], key: K): Record<K, string> => {
  const style = {} as Record<K, string>;

  if (arrValue.length === 4) {
    style[key] = `${arrValue[0]}px ${arrValue[1]}px ${arrValue[2]}px ${arrValue[3]}px`;
  } else if (arrValue.length === 2) {
    style[key] = `${arrValue[0]}px ${arrValue[1]}px`;
  } else if (arrValue.length === 1) {
    style[key] = key === 'margin' && arrValue[0] === 0 
      ? `${arrValue}px auto` 
      : `${arrValue}px`;
  }

  return style;
};

这种方式下，TypeScript会根据你传入的key自动推断返回值的类型，类型检查更严格。

另外建议把原代码中的多个独立if改成else if，避免同一条件下多个逻辑块重复执行。

内容的提问来源于stack exchange，提问作者sewonshin