如何为Framer Motion+TypeScript实现类型安全的Variants与Custom属性？

当前做法的问题 #

你直接定义variants对象的方式，TypeScript无法自动推断出变体名称的约束，也无法关联custom属性的类型与变体函数的参数类型，因此会出现：

• initial/animate属性没有变体名称的自动补全提示
• custom属性传入非数值类型时不会触发TypeScript报错

正确实现方案 #

要实现类型安全和自动补全，需要明确为variants指定Variants类型，并绑定custom参数的类型。具体步骤如下：

1. 导入必要的类型 #

从framer-motion导入Variants类型，用于约束变体的结构：

import { motion, Variants } from "framer-motion";

2. 定义Custom参数类型并约束Variants #

先指定custom参数的类型（这里是number），再用Variants类型约束变体对象，确保变体函数的参数与custom类型完全匹配：

// 定义custom参数的类型
type CustomType = number;

// 用Variants约束变体，明确变体函数的参数类型
const variants: Variants<CustomType> = {
  initial: (custom: CustomType) => ({
    x: custom
  }),
  final: {
    x: 0,
    transition: {
      duration: 0.8
    }
  }
};

3. 使用motion组件 #

此时motion.div的initial/animate属性会自动补全"initial"和"final"选项，custom属性也会被强制要求传入number类型：

export default function App() {
  return (
    <motion.div
      className="App"
      variants={variants}
      custom={100} // 仅允许传入number类型，传入数组/对象会触发TypeScript报错
      initial="initial" // 自动补全可选的变体名称："initial"|"final"
      animate="final"
    >
      <h1>Framer Motion</h1>
      <h2>Testing with typescript</h2>
    </motion.div>
  );
}

额外说明 #

如果你的变体不需要custom参数，可以省略泛型参数，直接使用const variants: Variants = { ... }。如果需要更复杂的custom类型（比如对象），只需修改CustomType的定义即可，TypeScript会自动同步约束custom属性和变体函数的参数。

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