React项目导入已导出的interface时提示找不到模块问题求助

问题根本原因 #

你定义的ISigningCosmWasmClientContext是TypeScript专属的类型语法，不属于实际运行时的JS值，两类常见场景会导致导入失败：

1. 两个文件后缀为.js，原生JS不支持interface语法，类型定义会被编译器直接忽略，仅保留可执行的useSigningCosmWasmClient函数，自然无法导入接口
2. 项目已接入TS、文件后缀为.ts/.tsx，但开启了isolatedModules配置（Create React App等脚手架默认开启），未使用类型导入语法的情况下，类型会被误判为运行时值导入，最终报错找不到对应导出

对应解决方案 #

场景1：项目未接入TS，使用纯JS开发 #

不要用interface定义类型，改用JSDoc实现类型标注：

1. 在CosmWasmHooks.js中用JSDoc定义类型：

/**
 * @typedef {Object} ISigningCosmWasmClientContext
 * 此处补充你的属性定义，示例：
 * @property {string} userAddress
 * @property {(tx: object) => Promise} signTransaction
 */

export const useSigningCosmWasmClient = () => {
  // 原有函数实现
}

2. 在CosmWasmContext.js中直接导入函数，需要使用类型的地方通过JSDoc引入即可：

import { useSigningCosmWasmClient } from './CosmWasmHooks'

// 需要用到类型的位置用JSDoc引用
/** @type {import('./CosmWasmHooks').ISigningCosmWasmClientContext} */
const clientContext = {}

场景2：项目已接入TS，使用.ts/.tsx文件开发 #

使用TS专属的类型导入语法导入接口即可：

// 可合并为一行导入
import { useSigningCosmWasmClient, type ISigningCosmWasmClientContext } from './CosmWasmHooks'

// 也可以分开导入
import { useSigningCosmWasmClient } from './CosmWasmHooks'
import type { ISigningCosmWasmClientContext } from './CosmWasmHooks'

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