示例

Question

我有一个名为 Widget 的接口，它在我的整个项目中使用。但是，它也用作名为 Widget 的组件的道具。

处理这个问题的最佳方法是什么？我应该更改 Widget 接口的名称吗？我见过其他人谈论不使用 IWidget，但没有人谈论要做什么。谢谢！

Answer 1

约定是使用 Props 后缀。

示例

对于 Widget，它将是 WidgetProps。

Answer 2

虽然，正如建议的那样，让 Props 接口以 Prop 为后缀是一个很好的做法，如果因为组件和接口具有相同的名称而发生名称冲突，并且您绝对不能做任何事情关于它，您始终可以在导入时重命名。同样，不是最佳实践。

// interfaces/Widget.ts

//Ideally, this should be renamed as WidgetProps wherever possible
export interface Widget {
  myProp: number;
}

export default Widget;

//Widget.tsx
import * as React from "react";
import { Widget as WidgetProps } from "./interfaces/Widget";
// or, if it is default export
// import WidgetProps  from './interfaces/Widget';

export const Widget = (props: WidgetProps) => (
  <div>{/** do something with props */}</div>
);

接口命名约定（接口名称与组件名称冲突）

2 个答案:

示例