如何结合TypeScript Record类型、代码补全与VSCode跳转定义？

问题根源 #

直接用Record<LGKey, ILinearGradientProps>注解对象时，TypeScript会将所有属性的类型统一为ILinearGradientProps，编辑器无法保留每个属性的原始定义位置信息，导致Go to Definition功能失效。

解决方案 #

方案一：const断言+映射类型约束（推荐） #

通过as const保留对象的字面量结构，再用映射类型确保每个属性符合目标类型，兼顾类型安全、代码补全和跳转功能：

import { ILinearGradientProps } from 'native-base';

type LGKey = 'primary' | 'secondary' | 'success';

// 用as const保留属性的原始定义结构
const _linearGradients = {
  primary: { colors: ['lightBlue.300', 'violet.800'], start: [0, 0], end: [1, 0] },
  secondary: { colors: ['green.300', 'teal.800'], start: [0, 0], end: [1, 0] },
  success: { colors: ['red.300', 'pink.800'], start: [0, 0], end: [1, 0] },
} as const;

// 映射类型确保每个属性都符合ILinearGradientProps类型
export const LinearGradients: { [K in LGKey]: ILinearGradientProps } = _linearGradients;

方案二：函数返回值类型约束 #

将渐变定义放在函数内部，通过函数返回值的Record类型做约束，编辑器能追踪到函数内的具体属性定义：

import { ILinearGradientProps } from 'native-base';

type LGKey = 'primary' | 'secondary' | 'success';

function createLinearGradients(): Record<LGKey, ILinearGradientProps> {
  return {
    primary: { colors: ['lightBlue.300', 'violet.800'], start: [0, 0], end: [1, 0] },
    secondary: { colors: ['green.300', 'teal.800'], start: [0, 0], end: [1, 0] },
    success: { colors: ['red.300', 'pink.800'], start: [0, 0], end: [1, 0] },
  };
}

export const LinearGradients = createLinearGradients();

说明 #

这并非TypeScript的固有限制，而是直接用Record注解对象时，类型信息覆盖了原始的字面量定义追踪信息。上述两种方案都无需逐个属性断言，同时满足：

• 严格的类型检查
• 定义和访问时的代码补全
• VSCode的Go to Definition功能正常

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