Framer Motion useTransform报string无法分配给Easing类型TS2322错误如何解决

这个报错本质是TypeScript类型推导的字面量收窄问题，同时和Framer Motion 5.3.3版本的类型定义细节有关：

• 你直接编写的"linear"默认会被TypeScript推导为通用string类型，而非Easing联合类型中定义的"linear"字面量子类型，因此触发string无法赋值给Easing类型的报错。
• 5.3.3版本的useTransform钩子的配置参数类型没有做自动的字面量类型关联，无法自动识别合法的ease字符串字面量。

方法1：添加类型收窄声明 #

给字符串添加as const断言，让TypeScript将其识别为字面量类型：

const opacity = useTransform(x, xRange, opacityRange, {clamp: true, ease: "linear" as const})

也可以直接导入Easing类型做断言：

import type { Easing } from 'framer-motion'
const opacity = useTransform(x, xRange, opacityRange, {clamp: true, ease: "linear" as Easing})

方法2：使用Framer Motion内置的ease常量 #

直接导入框架导出的预定义ease常量，天然符合类型要求：

import { linear } from 'framer-motion'
const opacity = useTransform(x, xRange, opacityRange, {clamp: true, ease: linear})

方法3：多段映射时传入ease数组 #

如果你的输入输出范围存在多个分段（本次示例中4个点位对应3个分段），也可以传入对应数量的ease值数组，同样添加类型收窄即可：

const opacity = useTransform(x, xRange, opacityRange, {
  clamp: true,
  ease: ["linear", "linear", "linear"] as const
})

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