TypeScript自定义React组件继承共享属性提示prop不存在如何解决

该问题本质是构建生成的类型声明文件的相对路径引用在外部项目中解析失效：

1. 编译后输出的lib/esm/index.d.ts中保留了import { SharedProps } from "./types/SharedProps"的引用语句，但构建产物目录lib/esm下不存在types子目录，也没有输出对应的SharedProps.d.ts文件
2. 外部项目加载该模块的类型声明时，找不到SharedProps的定义，TS会直接丢失CustomComponentProps继承链上的属性，仅识别直接定义在接口内的属性，最终触发cellsTall/cellsWide属性不存在的报错。

按优先级从高到低选择即可：

方案1：修正TS编译配置，确保所有类型文件正确输出到产物目录 #

修改模块根目录的tsconfig.json，调整编译范围和类型输出规则：

{
  "compilerOptions": {
    // 原有配置保留，新增/修改以下项
    "declaration": true,
    "declarationDir": "./lib/esm/types", // 统一指定类型文件输出路径，和声明文件里的引用路径匹配
  },
  "include": ["src/**/*"], // 替换原有的"src"配置，确保src下所有层级的.ts/.tsx/.d.ts文件都被纳入编译
  "exclude": ["node_modules", "lib"]
}

重新执行构建后，检查lib/esm/types目录下是否生成了SharedProps.d.ts文件，此时声明文件的引用路径可正常解析。

注意：因为你用link:..做本地软链依赖，修改配置后必须重启IDE的TS服务（VS Code可通过命令面板执行TypeScript: Restart TS Server），清除旧的类型缓存才会生效。

方案2：用类型打包工具合并所有声明，彻底规避路径引用问题 #

这是组件库场景的通用最优解，用工具把所有分散的类型声明合并为单个index.d.ts，不会保留跨文件的相对引用，直接把SharedProps的结构内联到最终声明里，从根源避免路径解析问题。
以常用的tsup构建工具为例，新增tsup.config.ts配置：

import { defineConfig } from 'tsup'

export default defineConfig({
  entry: ['src/index.tsx'],
  format: ['esm', 'cjs'],
  outDir: 'lib',
  dts: true, // 开启自动类型合并打包
  jsx: 'react-jsx',
  clean: true,
  esmInterop: true
})

执行构建后生成的lib/index.d.ts不会再有外部类型引用，所有Props属性都会被完整识别。

方案3：检查模块package.json的类型入口配置 #

确保模块根目录package.json的types字段正确指向编译后的主声明文件，路径必须和实际产物位置完全匹配，示例：

{
  "main": "lib/cjs/index.js",
  "module": "lib/esm/index.js",
  "types": "lib/esm/index.d.ts"
}

如果types字段指向错误、或者漏配，也会导致TS加载错误的类型文件，触发属性识别异常。

如果要快速验证问题根因，可以把SharedProps接口的定义直接写到src/index.tsx里，不单独拆分类型文件，重新编译后生成的声明文件不会有外部引用，此时外部项目可正常识别所有继承属性。但该方案不利于类型复用，仅适合临时验证。

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