TypeScript类型定义中oppositePosition冒号的作用及实现问询

1. .d.ts声明文件的类型约定作用 #

你看到的utils.d.ts是TypeScript的声明文件，仅用于定义类型约束，不包含可执行逻辑：

export declare enum Position {
    Left = "left",
    Top = "top",
    Right = "right",
    Bottom = "bottom"
}
export declare const oppositePosition: {
    left: Position;
    right: Position;
    top: Position;
    bottom: Position;
};

• declare enum Position：声明一个字符串枚举，固定四个方向的常量值。
• declare const oppositePosition: { ... }：这是类型注解，冒号后的对象是对oppositePosition结构的描述——它的键是left/right/top/bottom字符串，每个键的值必须是Position枚举的成员。这部分只做类型约定，不需要写具体映射值，实际实现存放在模块的业务代码中。

2. 编译后JS代码的实际实现逻辑 #

Rollup编译生成的bundle.js是可执行的实际代码，核心逻辑如下：

var Position;
(function (Position) {
  Position["Left"] = "left";
  Position["Top"] = "top";
  Position["Right"] = "right";
  Position["Bottom"] = "bottom";
})(Position || (Position = {}));
const oppositePosition = {
  [Position.Left]: Position.Right,
  [Position.Right]: Position.Left,
  [Position.Top]: Position.Bottom,
  [Position.Bottom]: Position.Top
};

• TypeScript字符串枚举会被编译成自执行函数，生成包含方向键值对的对象（比如Position.Left对应字符串"left"）。
• oppositePosition使用对象计算属性（[Position.Left]）：以枚举的取值作为对象的键，对应的值设为相反方向的枚举值，最终生成一个方向映射表。运行时调用oppositePosition["right"]，就能直接获取到相反方向"left"。

3. 整体构造原理 #

• 声明文件（.d.ts）负责类型校验与提示，确保开发者使用oppositePosition时只能传入合法的方向键，同时获得正确的类型推导。
• 实际代码借助TypeScript枚举的编译特性和对象计算属性，构建方向反向映射的逻辑，编译后转为纯JS对象，实现高效的反向方向查找功能。

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