TypeScript动态对象访问难题：无需类型转换的解决方案探讨

针对你遇到的动态拆分字符串后无法类型安全访问对象的问题，有两种无需类型转换的方案，核心是让TypeScript能关联拆分后的键与原对象的结构：

方案一：用映射类型自动生成variant并搭配类型守卫 #

首先利用TypeScript的模板字面量类型和映射类型，自动从FontTheme生成合法的variant类型，避免手动枚举；再通过类型守卫函数，确保拆分后的element和size是FontTheme的合法键：

import React from "react";

const FontTheme = {
  headline: {
    small: { fontSize: 12 },
    medium: { fontSize: 16 },
    large: { fontSize: 20 },
  },
  label: {
    tiny: { fontSize: 4 },
    small: { fontSize: 12 },
  },
  button: {
    small: { fontSize: 12 },
  },
} as const;

// 从FontTheme自动提取合法的元素和尺寸类型
type FontElement = keyof typeof FontTheme;
type FontSize<E extends FontElement> = keyof typeof FontTheme[E];
// 自动生成所有合法的variant组合
type TextVariant = `${FontElement}-${FontSize<FontElement>}`;

interface TextComponentProps {
  variant: TextVariant;
}

// 类型守卫：验证element是否属于FontTheme的合法键
function isFontElement(value: string): value is FontElement {
  return value in FontTheme;
}

// 类型守卫：验证size是否是对应element下的合法尺寸键
function isFontSizeForElement<E extends FontElement>(element: E, value: string): value is FontSize<E> {
  return value in FontTheme[element];
}

function TextComponent({ variant }: TextComponentProps) {
  const [element, size] = variant.split("-");

  // 先验证element合法性
  if (!isFontElement(element)) {
    throw new Error(`无效元素类型: ${element}`);
  }
  // 再验证对应element下的size合法性
  if (!isFontSizeForElement(element, size)) {
    throw new Error(`元素${element}不存在尺寸${size}`);
  }

  // 此时TypeScript可完全推断styles类型，无需类型转换
  const styles = {
    ...FontTheme[element][size],
  };

  console.log(styles);
  return <h1 style={styles}>Text</h1>;
}

export { TextComponent };

方案说明 #

1. 自动生成variant类型：通过提取FontTheme的键并结合模板字面量，自动组合出所有合法的variant值，避免手动维护枚举列表，减少出错概率。
2. 类型守卫验证：两个类型守卫函数在运行期验证拆分后的值是否合法，通过后TypeScript就能正确推断出FontTheme[element][size]的类型，完全不需要as类型断言。

方案二：预存映射表（更简洁的写法） #

如果不想写类型守卫，可以预先建立variant到对应样式的映射表，直接通过variant就能拿到类型安全的样式：

import React from "react";

const FontTheme = {
  headline: {
    small: { fontSize: 12 },
    medium: { fontSize: 16 },
    large: { fontSize: 20 },
  },
  label: {
    tiny: { fontSize: 4 },
    small: { fontSize: 12 },
  },
  button: {
    small: { fontSize: 12 },
  },
} as const;

// 预先生成所有variant到样式的映射表
const VariantStyles = (() => {
  const result: Record<string, typeof FontTheme[keyof typeof FontTheme][keyof typeof FontTheme[keyof typeof FontTheme]]> = {};
  for (const element of Object.keys(FontTheme) as (keyof typeof FontTheme)[]) {
    for (const size of Object.keys(FontTheme[element]) as (keyof typeof FontTheme[typeof element])[]) {
      result[`${element}-${size}`] = FontTheme[element][size];
    }
  }
  return result as const;
})();

// 自动生成合法的variant类型
type TextVariant = keyof typeof VariantStyles;

interface TextComponentProps {
  variant: TextVariant;
}

function TextComponent({ variant }: TextComponentProps) {
  // 直接通过variant获取样式，完全类型安全
  const styles = VariantStyles[variant];

  console.log(styles);
  return <h1 style={styles}>Text</h1>;
}

export { TextComponent };

方案说明 #

通过立即执行函数预先生成所有variant对应的样式映射表，TypeScript会自动推断出VariantStyles的键就是所有合法的variant值，直接通过variant索引就能拿到类型正确的样式，代码更简洁，无需处理拆分后的验证逻辑。

关于泛型的说明 #

泛型在这里确实无法直接解决问题——因为split返回的是string[]，TypeScript在编译期无法知晓运行时拆分后的具体值。但上面的两种方案都是在编译期建立了variant与FontTheme结构的类型关联，同时在运行期做了合法性验证，既保证了类型安全，又支持动态的variant参数。

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