如何将字符串类型收窄为TS可辨识联合取值？以react-toast-notifications为例

问题根因 #

TS默认对对象内的字符串属性会做类型扩宽，你定义toastConfig的时候没有显式标注类型，所以appearance: "error"被推断成了string类型，而不是"error"字面量类型，自然和期望的AppearanceTypes联合类型不兼容。

最佳解决方案（按优先级排序） #

1. 显式给toastConfig标注类型（最推荐） #

直接复用第三方库导出的Options接口做类型标注，既能解决类型不匹配问题，还能获得完整的类型校验，避免你写错配置属性：

import type { Options } from 'react-toast-notifications';

export const toastConfig: Record<'error', Options> = {
  error: {
    appearance: "error",
    autoDismiss: true,
    transitionDuration: 400,
  },
}

如果有多个配置项（比如success、warning之类），直接在Record的第一个泛型参数里加即可，比如Record<'error' | 'success', Options>。

2. 使用as const冻结类型 #

如果你不想额外引入类型标注，可以给整个配置对象或者appearance属性加as const断言，让TS不要把字符串类型扩宽，保持字面量类型：

// 方式1：给单个属性加as const
export const toastConfig = {
  error: {
    appearance: "error" as const,
    autoDismiss: true,
    transitionDuration: 400,
  },
}

// 方式2：给整个对象加as const，所有属性都会保持字面量类型
export const toastConfig = {
  error: {
    appearance: "error",
    autoDismiss: true,
    transitionDuration: 400,
  },
} as const

类型断言是不是合理方案？ #

直接用as AppearanceTypes的断言确实能解决报错，但属于下策：它相当于绕过了TS的类型校验，如果你哪天不小心把appearance的值写成了拼写错误的erro，TS不会抛出任何错误，会直接认为你写的是合法值，留下运行时隐患。只有在临时调试、或者你100%确定取值正确的场景下可以临时用，不推荐作为长期解决方案。

获取联合类型所有可选取值的方法 #

TS的类型只存在于编译时，运行时会被完全抹除，所以没办法直接从AppearanceTypes类型拿到运行时的取值数组，你可以用下面的方式同步类型和运行时值：

1. 先定义和联合类型完全匹配的常量数组，用AppearanceTypes做类型标注保证一致性：

import type { AppearanceTypes } from 'react-toast-notifications';

export const ALL_APPEARANCES: AppearanceTypes[] = ['error', 'info', 'success', 'warning'];

2. 后续不管是类型校验还是运行时遍历取值，都用这个数组即可：如果后续第三方库更新了AppearanceTypes的取值，你修改这个数组的时候TS会自动校验是否匹配，避免不同步问题。

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