TypeScript如何从数字索引映射推导滑动方向字面量联合类型？

API 探路者

2026-10-4

类型问题解决方案

你当前的问题是显式给regionDirectionMap标注了值为string的类型注解，导致TypeScript将值的类型拓宽为通用字符串，无法保留具体字面量类型。可以按以下方式修改，不需要重复书写方向名称：

推荐方案（TS 4.9+）

使用as const固定字面量类型，同时用satisfies操作符校验映射结构符合要求，既保留原有的类型校验能力，也不会丢失字面量类型：

// 移除原有的显式类型注解，用as const保留字面量，satisfies校验结构符合要求
const regionDirectionMap = {
    0: 'right',
    1: 'top_right',
    2: 'top',
    3: 'top_left',
    4: 'left',
    5: 'bottom_left',
    6: 'bottom',
    7: 'bottom_right',
} as const satisfies { [index: number]: string };

// 可复用推导结果定义原来的RegionIndexToDirectionMap类型
type RegionIndexToDirectionMap = typeof regionDirectionMap;

type ValueOf<T> = T[keyof T];
// 此时SwipeDirection就是所有方向字面量组成的联合类型
export type SwipeDirection = ValueOf<typeof regionDirectionMap>;

低版本TS兼容方案

如果使用的TS版本低于4.9，没有satisfies支持，可以只加as const，单独做一次类型校验即可：

const regionDirectionMap = {
    0: 'right',
    1: 'top_right',
    2: 'top',
    3: 'top_left',
    4: 'left',
    5: 'bottom_left',
    6: 'bottom',
    7: 'bottom_right',
} as const;

// 单独校验映射结构符合要求
const _typeCheck: { [index: number]: string } = regionDirectionMap;

type ValueOf<T> = T[keyof T];
export type SwipeDirection = ValueOf<typeof regionDirectionMap>;