我来帮你搞定这个头疼的类型导入问题！你遇到的情况其实是TypeScript处理同名模块声明文件时的常见坑，下面给你几个清晰的解决方案：

方案一：正确配置同名.d.ts文件的导出 #

TypeScript会自动合并同名的.tsx和.d.ts文件的导出内容，但前提是你的声明文件里的接口要正确导出：

1. 修改items.d.ts，给接口加上export关键字：

// items.d.ts
export interface IItemProps {
  // 这里定义你的属性，比如：
  id: number;
  title: string;
  isCompleted: boolean;
}

2. 在items.tsx中直接从./items导入接口：

// items.tsx
import * as React from 'react';
// 这里会自动合并.tsx和.d.ts的导出内容
import { IItemProps } from './items';

const Item: React.FC<IItemProps> = ({ id, title, isCompleted }) => {
  return (
    <div>
      <span>{id}</span>
      <span style={{ textDecoration: isCompleted ? 'line-through' : 'none' }}>
        {title}
      </span>
    </div>
  );
};

export default Item;

方案二：改用独立类型文件（更直观，推荐） #

有时候.d.ts的合并规则容易让人混淆，不如直接把类型放在普通的.ts文件里，更清晰：

1. 新建src/app/itemTypes.ts（命名可以自定义，比如interfaces.ts也可以）：

// itemTypes.ts
export interface IItemProps {
  id: number;
  title: string;
  isCompleted: boolean;
}

2. 在items.tsx中导入这个独立的类型文件：

// items.tsx
import * as React from 'react';
import { IItemProps } from './itemTypes';

const Item: React.FC<IItemProps> = ({ id, title, isCompleted }) => {
  return (
    <div>
      <span>{id}</span>
      <span style={{ textDecoration: isCompleted ? 'line-through' : 'none' }}>
        {title}
      </span>
    </div>
  );
};

export default Item;

这种方式在大型项目里更易维护，类型文件和组件文件的职责划分更明确。

方案三：全局声明（不推荐，仅适用于全局通用类型） #

如果你想让IItemProps在整个项目里不用导入就能用，可以用全局声明，但不推荐在组件专用类型上这么做，容易引发类型冲突：

1. 修改items.d.ts：

// items.d.ts
declare global {
  interface IItemProps {
    id: number;
    title: string;
    isCompleted: boolean;
  }
}

// 必须添加这一行，让文件成为模块，否则全局声明不生效
export {};

2. 在items.tsx中直接使用：

// items.tsx
import * as React from 'react';

// 不用导入，直接用全局的IItemProps
const Item: React.FC<IItemProps> = ({ id, title, isCompleted }) => {
  return (
    <div>
      <span>{id}</span>
      <span style={{ textDecoration: isCompleted ? 'line-through' : 'none' }}>
        {title}
      </span>
    </div>
  );
};

export default Item;

额外注意点 #

• 检查你的tsconfig.json，确保include配置包含了src目录，这样TypeScript才能扫描到你的声明文件：

{
  "compilerOptions": {
    // 你的其他配置，比如jsx: "react-jsx"等
  },
  "include": ["src/**/*"]
}

• 不要在.d.ts文件里写任何组件实现代码，它只用来存放类型声明。

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