TypeScript泛型函数参数传递问题及Lottie loadAnimation类型错误求助

这个问题的根源在于你定义的AnimationConfigWithPath和AnimationConfigWithData默认继承了泛型参数为'svg'的AnimationConfig，导致它们的renderer属性只能接受'svg'或者undefined，而你传入的'canvas'不在这个范围内。下面是两种可行的解决方法：

方法1：修改类型定义，让配置类型支持泛型扩展 #

调整你的类型定义，让AnimationConfigWithPath和AnimationConfigWithData也支持泛型参数，这样就能根据传入的renderer自动推断正确的类型：

// 保留原AnimationConfig的泛型定义
export type AnimationConfig<T extends 'svg' | 'canvas' | 'html' = 'svg'> = { 
  container: Element; 
  renderer?: T; 
}

// 给两个配置类型添加泛型参数，继承对应泛型的AnimationConfig
export type AnimationConfigWithPath<T extends 'svg' | 'canvas' | 'html' = 'svg'> = AnimationConfig<T> & { path?: string; }
export type AnimationConfigWithData<T extends 'svg' | 'canvas' | 'html' = 'svg'> = AnimationConfig<T> & { animationData?: any; }

// 函数也改为支持泛型的版本
function loadAnimation<T extends 'svg' | 'canvas' | 'html' = 'svg'>(params: AnimationConfigWithPath<T> | AnimationConfigWithData<T>): AnimationItem;

修改后，你的调用代码不需要任何改动就能正常工作，TypeScript会自动根据你传入的renderer: 'canvas'推断出对应的泛型类型，不再报错。

方法2：调用时手动指定类型（不推荐，仅临时替代） #

如果你暂时不想修改类型定义，可以通过类型断言强制指定配置的类型：

lottie.loadAnimation({
  container: document.getElementById("test1")!,
  renderer: 'canvas',
  loop: true,
  autoplay: true,
  path: 'data.json'
} as AnimationConfigWithPath<'canvas'>)

不过这种方式不够优雅，也失去了TypeScript的类型检查优势，更推荐使用第一种方法从根源解决问题。

为什么原代码会报错？ #

原来的AnimationConfigWithPath是基于默认泛型T='svg'的AnimationConfig创建的，所以它的renderer属性类型被固定为'svg' | undefined。当你传入'canvas'时，TypeScript会检测到类型不匹配，因此抛出错误。通过给配置类型添加泛型参数，我们让renderer的类型可以根据实际传入的值动态调整，从而解决了类型冲突。

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