如何在TypeScript中实现带动态键的Position类型用于React组件

1. 先明确NotificationPositions联合类型 #

首先需要定义所有可能的位置值的联合类型，这是后续类型定义的基础：

type NotificationPositions = 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-left' | 'bottom-right';

2. 定义位置对应的Props类型 #

不要用any，明确每个位置对象的结构，这些属性都是React组件可接收的样式props，我们可以定义一个精准的类型：

type PositionStyleProps = {
  top?: string;
  right?: string;
  left?: string;
  bottom?: string;
  alignItems: 'center' | 'flex-start' | 'flex-end';
};

如果希望兼容所有React CSS样式属性，也可以直接继承内置类型：

type PositionStyleProps = React.CSSProperties;

3. 定义Position类型并修正变量类型 #

用Record工具类型实现“以NotificationPositions为键，对应值为PositionStyleProps”的类型，这比索引签名更直观且符合TypeScript规范：

type Position = Record<NotificationPositions, PositionStyleProps>;

const positions: Position = {
  'top': {
    top: "0",
    right: "0",
    left: "0",
    alignItems: "center",
  },
  "top-right": {
    top: "0",
    right: "0",
    alignItems: "flex-end",
  },
  "top-left": {
    top: "0",
    left: "0",
    alignItems: "flex-start",
  },
  'bottom': {
    bottom: "0",
    right: "0",
    left: "0",
    alignItems: "center",
  },
  "bottom-left": {
    bottom: "0",
    left: "0",
    alignItems: "flex-start",
  },
  "bottom-right": {
    bottom: "0",
    right: "0",
    alignItems: "flex-end",
  },
};

原写法的问题说明 #

你之前的interface Position { [key: NotificationPositions]: any }不符合TypeScript索引签名规则——索引签名的键类型只能是string、number或symbol，无法直接使用联合类型。而Record<K, V>工具类型正是专门处理“键为联合类型K，值为V”的对象类型场景，完美适配你的需求。

现在这个定义不仅能让positions对象获得完整的类型检查，React组件解构这些值时也能得到准确的类型提示，不会再因any丢失类型约束。

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