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

Posted 2023-03-13

【中文标题】如何在 React 和 TypeScript 项目中使用 types.d.ts 文件

【英文标题】：How using types.d.ts file in React & TypeScript project

【发布时间】：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 我可以在此目录中使用这些类型而无需导入。

我在哪里弄错了？

【参考方案1】：

删除export 关键字。

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

【讨论】：

或从它的位置导入类型

@felixmosh 不是真的，关于 types.dev.ts 的全部目标是能够使用接口而不需要导入它。

我在哪里可以找到这方面的文档？我的问题是，如果我尝试导入类型，它也会停止工作。使用 import 或 export 关键字会破坏自动类型发现。

找到解释：***.com/a/51114250/124416