如何在 React 和 TypeScript 项目中使用 types.d.ts 文件答案

【问题标题】：How using types.d.ts file in React & TypeScript project如何在 React 和 TypeScript 项目中使用 types.d.ts 文件
【发布时间】：2020-08-17 06:15:08
【问题描述】：

我有 React 和 TypeScript 项目。这是我在某些组件中的文件夹结构，例如：

 - ComponentFolder
  - index.tsx
  - types.d.ts
  - ChildComponent
    - index.tsx

我知道如果我将我的类型放在组件目录根目录下的 types.d.ts 文件中，我可以在该目录的 childComponents 中使用这些类型。

所以我尝试了；

我的 types.d.ts 文件：

export type CommonProps = {
  openItem: string;
  getValue: (e: React.MouseEvent) => void;
};

在子组件中：

import * as React from "react";

const ChildComponent: React.FC<CommonProps> = (props) => {
  return (
    <div>
      {props.openItem}
    </div>
  );
};

export default ChildComponent;

但出现错误：

cannot find CommonProps error.

我如何知道目录中是否有一些文件 d.ts 我可以在此目录中使用这些类型而无需导入。

我在哪里弄错了？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

删除export 关键字。

type CommonProps = {
  openItem: string;
  getValue: (e: React.MouseEvent) => void;
};

【讨论】：

或从它的位置导入类型
@felixmosh 不是真的，关于 types.dev.ts 的全部目标是能够使用接口而不需要导入它。
我在哪里可以找到这方面的文档？我的问题是，如果我尝试导入类型，它也会停止工作。使用 import 或 export 关键字会破坏自动类型发现。
找到解释：stackoverflow.com/a/51114250/124416