TypeScript中如何让对象属性引用错误指向引用处而非定义处

要让Mesh的material属性错误提示定位在引用处而非materials定义处，核心是调整泛型的约束逻辑——让materials的键集合先被确定，再用这个集合约束meshes中的引用，而不是让两者共同决定泛型范围。

解决方案1：用函数辅助泛型推断（推荐） #

利用TypeScript函数的泛型推断特性，先自动捕获materials的键类型，再用该类型约束meshes的material取值：

type Material = string;
type Mesh<MaterialId extends string> = {
  material: MaterialId;
};

function createLibrary<M extends string>(lib: {
  materials: Record<M, Material>;
  meshes: Record<string, Mesh<M>>;
}) {
  return lib;
}

// 错误用法示例：此处"wood"会直接报错
const badLib = createLibrary({
  materials: { metal: "shiny", plastic: "matte" },
  meshes: {
    cube: { material: "wood" } // 错误提示：类型"wood"不能赋值给类型"metal" | "plastic"
  }
});

解决方案2：基于materials类型的泛型接口 #

将materials的具体类型作为泛型参数，用keyof提取其键来约束meshes：

type Material = string;

interface Library<T extends Record<string, Material>> {
  materials: T;
  meshes: Record<string, { material: keyof T }>;
}

// 手动指定泛型的错误示例
const badLib: Library<{ metal: string; plastic: string }> = {
  materials: { metal: "shiny", plastic: "matte" },
  meshes: {
    cube: { material: "wood" } // 错误提示："wood"不能赋值给"metal" | "plastic"
  }
};

// 结合函数自动推断（无需手动写泛型）
function createLibrary<T extends Record<string, Material>>(lib: Library<T>) {
  return lib;
}

const badLibAuto = createLibrary({
  materials: { metal: "shiny", plastic: "matte" },
  meshes: {
    cube: { material: "wood" } // 同样在引用处报错
  }
});

原写法的问题根源 #

你最初的泛型定义中，MaterialId是被materials和meshes共同约束的——TypeScript会尝试找到一个能同时满足materials的键集合和meshes中material取值的MaterialId。当meshes出现未在materials中定义的键时，TypeScript会认为MaterialId应该包含这个新键，进而提示materials缺少该属性，而非meshes的引用错误。

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