如何从Framer Motion的motion组件推导对应的DOM元素类型（如m.div -> HTMLDivElement）

当然可以实现这个需求！在你使用的framer-motion@12.11.0版本中，TypeScript类型定义已经为motion组件内置了足够的信息，我们可以轻松封装出你想要的ToHTML类型工具。

具体实现方案 #

我们可以结合Framer Motion的MotionComponent类型和TypeScript原生的HTMLElementTagNameMap映射表，来构建这个类型工具：

import type { MotionComponent } from "framer-motion";

// 自定义类型工具：从motion组件推导对应的DOM元素类型
type ToHTML<T extends MotionComponent<any>> = T extends MotionComponent<infer Tag> 
  ? Tag extends keyof HTMLElementTagNameMap 
    ? HTMLElementTagNameMap[Tag] 
    : never 
  : never;

使用示例 #

接下来你就可以像预想的那样使用这个类型工具了：

import { motion as m } from "framer-motion";

// 类型会被自动推导为HTMLDivElement
type HTMLDivType = ToHTML<typeof m.div>;
// 类型会被自动推导为HTMLButtonElement
type HTMLButtonType = ToHTML<typeof m.button>;
// 同理，其他原生标签对应的motion组件也适用
type HTMLInputType = ToHTML<typeof m.input>;

原理说明 #

• MotionComponent<Tag>是Framer Motion中所有原生DOM标签对应的motion组件的基础类型，其中Tag就是对应的原生HTML标签名（比如"div"、"button"）。
• TypeScript内置的HTMLElementTagNameMap是一个预定义的类型映射，它把HTML标签名和对应的DOM元素类型关联了起来（比如"div"对应HTMLDivElement）。
• 我们通过类型推断（infer Tag）提取出motion组件对应的标签名，再通过HTMLElementTagNameMap找到对应的DOM元素类型。

这个技巧在需要在类型层面关联motion组件和它的原生DOM元素时非常实用，比如处理ref或者需要基于DOM元素类型做类型约束的场景。

内容来源于stack exchange