Typescript中使用emotion/styled添加自定义属性报错如何解决？

根本原因 #

TypeScript 无法识别你给 styled 组件自定义的big属性，默认的组件属性类型里没有该字段，因此触发2339类型错误。
另外你原有代码的参数写法存在问题：({ big:boolean = false })是JS解构的重命名语法，不是给big指定boolean类型，相当于你把属性中的big值赋值给了名为boolean的变量，属于错误的TS类型标注写法。

解决方案 #

给 styled 组件显式传入自定义属性的泛型声明即可，有两种常用写法：

写法1：单独声明属性接口（可复用性更高） #

// 声明自定义属性类型
interface MaybeBigHeadingProps {
  big?: boolean;
}
// 给styled方法传入泛型指定自定义属性
const MaybeBigHeading = styled(Heading)<MaybeBigHeadingProps>(
  ({ big = false }) => [big && tw`text-4xl`]
);

写法2：内联声明属性类型（适合简单场景） #

// 直接在泛型位置声明属性类型
const MaybeBigHeading = styled(Heading)<{ big?: boolean }>(
  ({ big = false }) => [big && tw`text-4xl`]
);

修改后TypeScript就能正常识别big属性，报错会直接消失，功能和原有JS版本完全一致。

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