React TypeScript应用使用react-img-mapper报类型不兼容错误如何解决

报错核心原因 #

手动自定义的Map、MapAreas类型与组件库内置的类型定义完全独立，且自定义的MapAreas缺少组件库强制要求的5个必填属性（active、disabled、href、strokeColor、lineWidth），触发TS的结构类型校验不通过。

具体处理步骤 #

• 完全删除你手动声明的MapAreas、Map自定义类型，不要重复定义组件库已经导出的类型结构
• 直接从react-img-mapper导入官方提供的Map类型，对map配置对象做类型标注
• 按照类型要求为每个地图区域补全必填属性的默认值，暂时不需要用到的功能字段给合理空默认值即可

修正后可正常运行的代码 #

import img from './asetts/body-img.png';
// 显式导入组件库导出的Map类型，避免自定义类型不匹配
import ImageMapper, { type Map } from 'react-img-mapper';

const BodyImage: React.FC = () => {
    const AREAS_MAP: Map = {
        name: "mymap",
        areas: [
            {
                name: "one",
                shape: "circle",
                coords: [55, 440, 57],
                preFillColor: "green",
                fillColor: "blue",
                // 补全必填字段，无对应功能时设置中性默认值
                active: false,
                disabled: false,
                href: '',
                strokeColor: 'rgba(0,0,0,0)',
                lineWidth: 1
            },
            {
                name: "two",
                shape: "circle",
                coords: [185, 680, 117],
                preFillColor: "red",
                fillColor: "blue",
                active: false,
                disabled: false,
                href: '',
                strokeColor: 'rgba(0,0,0,0)',
                lineWidth: 1
            },
        ]
    }

    return (
        <div>
            <ImageMapper src={img} map={AREAS_MAP}/>
        </div>
    )
}

export default BodyImage

优化提示 #

如果后续需要新增多个地图区域，可以封装一个生成区域配置的工具函数，把固定的默认必填字段统一填充，减少重复代码；导入类型时使用type修饰符，可让生产构建自动剥离类型导入，避免增加冗余包体积。

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