TypeScript传入特定字符串报错：为何str无法匹配'foo'|'bar'联合类型？

问题原因 #

你遇到的问题源于TypeScript的默认类型推断行为：当声明const arr = ['foo', 'bar']时，编译器会默认将数组推断为string[]类型，而非('foo' | 'bar')[]。这是因为数组在TypeScript中默认是可变的，编译器假设你后续可能会向数组添加其他字符串元素，因此不会自动将元素类型窄化为具体的字面量联合类型。最终forEach回调里的str类型被推断为string，无法匹配Type中name要求的'foo' | 'bar'字面量联合类型，触发类型错误。

解决方案 #

有几种方式可以修正这个问题：

1. 使用as const断言（推荐）

通过as const将数组断言为只读的字面量数组，强制编译器保留元素的具体字面量类型：

const arr = ['foo', 'bar'] as const;

此时arr的类型变为readonly ['foo', 'bar']，forEach回调中的str类型会被正确推断为'foo' | 'bar'，可以直接传递给update函数。

2. 显式指定数组类型

直接为数组声明元素类型为'foo' | 'bar'，明确告诉编译器数组只能包含这两个值：

const arr: ('foo' | 'bar')[] = ['foo', 'bar'];

3. 提取联合类型（适用于需要复用场景）

如果需要在多个地方使用这个联合类型，可以通过typeof提取数组元素的类型：

const arr = ['foo', 'bar'] as const;
type NameType = typeof arr[number]; // 得到 'foo' | 'bar'

type Type = {
  name: NameType;
}

修改后的示例代码 #

使用as const的完整代码如下：

import { useEffect } from 'react'

type Type = {
  name: 'foo' | 'bar'
}

const Demo = () => {
  const update = ({ name }: Type) => console.log('logging: ', name)

  useEffect(() => {
    const arr = ['foo', 'bar'] as const;

    arr.forEach((str) => {
      update({
        name: str,
      })
    })
  }, [])

  return null
}

export default Demo

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