如何为 React 组件使用声明文件？答案

【问题标题】：How to make use declaration file for a React component?如何为 React 组件使用声明文件？
【发布时间】：2019-11-24 10:01:12
【问题描述】：

我想将类型和接口定义与我的组件代码分开。这将使 jsx 文件更小，更易于阅读。

我创建了以下两个文件：

./Header/Header.d.ts

export type HeaderProps = {
  logo?: string;
}

对于以下组件：

./Header/Header.tsx

import React from 'react';
import { HeaderProps } from './Header'; // gives error

const Header: React.FC<HeaderProps> = ({ logo }) => (
  <header>
    <img src={logo} alt="Logo" />
  </header>
);

但是我无法在我的组件中导入类型声明文件。我收到以下错误：

TS2614：模块“../Header/Header”没有导出的成员“HeaderProps”。你的意思是使用'import HeaderProps from '../Header/Header'吗？

我做错了吗？

【问题讨论】：

当我将文件重命名为 ./Header/Header.interface.ts 然后使用该文件名导入它时，它可以工作。我猜*.d.ts 是一种不同类型的文件，不应该用于此目的？

标签： reactjs typescript react-tsx

【解决方案1】：

当您在 .d.ts 上声明 HeaderPropsAFAIK 时，您不需要导入它

【讨论】：

感谢您的回复。你可能是对的，我的编辑器显示 Header.d.ts 文件是 Header.tsx 的子文件。但是当我删除导入时，组件如何知道类型定义？我收到错误 TS2304：找不到名称“HeaderProps”。
stackoverflow.com/a/21247316/8879305 更好的方法是在 Header 组件中声明类型并将其导出并可以在任何地方访问。
啊哈。所以.d.ts 文件是由 Typescript 本身生成的。所以它的功能只是将你正在开发的组件的 API 传递给其他组件，而不是在组件本身中重用它。