泛型场景下反引号包裹字符串字面量类型为何失效？

一、两个Path类型的行为差异 #

先看定义的两个类型：

type PathBare<T> = keyof T & string
type PathWrapped<T> = `${keyof T & string}`

两者都用来获取对象的字符串键联合类型，但在泛型场景下表现完全不同：

具体类型场景（无泛型） #

当传入具体类型Named时，两者等价，都是"name" | "foo"，所以下面的赋值都正常：

type Named = { name: string, foo: string }
const a1: PathWrapped<Named> = 'name' // 正常
const a2: PathBare<Named> = 'name' // 正常

泛型约束场景 #

当T是受Named约束的泛型时，差异显现：

function foo<T extends Named>(arg: T): T {
    const b1: PathWrapped<T> = 'name' // 报错：类型“string”不能赋值给类型`${keyof T & string}`
    const b2: PathBare<T> = 'name' // 正常
    return arg
}

原因在于：

• PathBare<T>是keyof T & string，由于T继承自Named，TypeScript能明确keyof T必然包含'name'，所以'name'是PathBare<T>的子类型，赋值合法。
• PathWrapped<T>通过字符串字面量插值生成，TypeScript在泛型上下文里会将其视为动态的字符串联合类型，无法确认具体字面量'name'是否属于这个联合，因此拒绝赋值。

二、react-hook-form场景的问题本质 #

你的实际场景里，react-hook-form的Path<T>类型采用了类似PathWrapped<T>的实现（通过字符串插值支持嵌套路径），所以遇到了同样的问题：

import { useEffect } from 'react'
import { useForm } from 'react-hook-form'

type Named = { name: string }

function useFormWithNamedData<T extends Named>(data: T) {
    const { setValue } = useForm({ defaultValues: async () => data })
    useEffect(() => {
        setValue('name', 'foo') // 报错：类型“"name"”不能赋值给类型“Path<T>”
    }, [])
    return {setValue}
}
// 外部调用正常：支持传入额外键并调用setValue('foo', 'c')
useFormWithNamedData({ name: 'a', foo: 'b' }).setValue('foo', 'c')

而非泛型版本虽然内部赋值正常，但外部调用时无法支持扩展的键，不符合需求：

function useFormWithNamedDataNonGeneric(data: Named) {
    const { setValue } = useForm({ defaultValues: async () => data })
    useEffect(() => {
        setValue('name', 'foo') // 正常
    }, [])
    return {setValue}
}
// 外部调用报错：setValue只接受'name'，无法处理'foo'
useFormWithNamedDataNonGeneric({ name: 'a', foo: 'b' }).setValue('foo', 'c')

核心原因总结 #

TypeScript对泛型类型的字符串字面量插值和直接keyof引用的类型推断逻辑不同：

• keyof T在泛型约束下会保留“包含约束类型所有键”的信息，TypeScript能确认具体键属于这个集合。
• ${keyof T}这类插值生成的类型，在泛型上下文里会被视为不确定的字符串联合，丢失了“包含约束类型键”的推导信息，导致具体字面量无法直接赋值。

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