React 和 Typescript 接口“OR”运算符

Question

我开始使用 React 和 Typescript 开发应用程序。顺便说一句，我是两件事的新手。

我有一个 react 组件和一些接口，我希望该接口中的每个字段都是必需的，但如果实现了一个特定字段，则其他字段不再需要。

在这种情况下，如果我设置“对象”，我希望不需要实现其他 2 个字段。

interface ITextFieldProps {
    label: string,
    required: boolean,
    object?: any
}

export default class TextField extends React.Component<ITextFieldProps, any> {
    ...
}

希望有人能帮忙，干杯！

编辑

首先我要感谢所有的答案，我真的从他们每个人那里学到了很多。他们帮助我了解我的问题并找到最佳解决方案。

我将传递的对象是元数据，因此它仅在 http 调用后在运行时可用。话虽如此，我还是无法在开发时检查和输入它。

所以我使用 react props spread 解决了我的问题。

（今天typescript不支持，但总有一天会的，嘿嘿https://github.com/Microsoft/TypeScript/issues/2103）：

export interface IMetadata {
    label: string,
    required: boolean
}

interface TextFieldProps extends IMetadata {
    ...
}

这样我可以传递一个传播了道具的对象，然后当我调用 label="" 时，它会自动覆盖 {...this.metadata.nome} 中的标签：

<TextField {...this.metadata.nome} label="OverwriteLabel" />

编辑 2

正如丹尼尔所说： 不幸的是，JSX 中的类型检查有一个错误，请参阅：

https://github.com/Microsoft/TypeScript/issues/10171

他们计划在 2.1 中修复它。在那之前，这种技术不适用于 TSX。 （当它修复后，我会回来更新这个答案。）

Answer 1

你不能这样做，没有办法在接口中表示如果一个属性得到满足，那么另一个属性就不需要了。

你有两个选择（在我看来）：

(1) 将所有属性声明为可选：

interface ITextFieldProps {
    label?: string,
    required?: boolean,
    object?: any
}

然后检查该值是否有效：

function isValid(props: ITextFieldProps): boolean {
    return props.label || props.required != null || props.object;
}

(2) 定义一些扩展基础接口的接口：

interface ITextFieldPropsBase {}

interface ITextFieldPropsLabel extends ITextFieldPropsBase {
    label: string;
}

interface ITextFieldPropsBool extends ITextFieldPropsBase {
    value: boolean;
}

interface ITextFieldPropsAny extends ITextFieldPropsBase {
    object: any;
}

class TextField<T extends ITextFieldPropsBase> extends React.Component<T, any> { ... }

这样您每次只能获得其中一个属性。

---

编辑

@DanielEarwicker 在我的第二个示例中评论了如何将道具传递到组件中。
使用jsx时：

ReactDOM.render(<TextField label="hey" />, document.getElementById("container"));

错误是找不到label，但可以使用ReactDOM.render完成：

ReactDOM.render(React.createElement(TextField, { label: "hey" }), document.getElementById("container"));

---

第二次编辑

我的第二个建议似乎不适用于这种特定情况。
我从一个稍微不同的场景中得出它：

interface BaseProps {
    name: string;
}

abstract class BaseComponent<T extends BaseProps> extends React.Component<T, {}> {
    render() {
        return <div className={ this.props.name }>{ this.getContent() }</div>
    }

    protected abstract getContent(): JSX.Element;
}

interface DateProps extends BaseProps {
    date: Date;
}

class DateComponent extends BaseComponent<DateProps> {
    protected getContent(): JSX.Element {
        return <div>{ DateComponent.formatDate(this.props.date) }</div>
    }

    private static formatDate(date: Date): string {
        // ...
    }
}

因为我实际上为每个接口都有一个不同的组件类，所以我不需要做任何类型保护、强制转换或任何其他技巧。

@DanielEarwicker 的答案是 OP 描述的场景中的正确答案。

Answer 2

这是在 TypeScript 中使用联合类型完成的。

interface TextFieldPropsA {
    label: string,
    required: boolean
}

interface TextFieldPropsB {
    object: any
}

以下是定义这些联合的方法：

type TextFieldProps = TextFieldPropsA | TextFieldPropsB;

这字面意思是它必须是第一种或第二种类型（这正是您在问题中所要求的！我们是“或”-ing 两个接口）。

所以：

// no good
const test1: TextFieldProps = { }

// no good, still missing the label
const test2: TextFieldProps = {
    required: true
} 

// this is fine
const test1: TextFieldProps = {
    object: {}
}

（顺便提一下，I 前缀在 TypeScript 中并没有被广泛使用，因为类和函数类型都是接口，所以它实际上并没有告诉你任何有用的信息。）

更新 但是，您需要它来定义 React 道具，因此您可以限制使用 JSX 语法时允许的内容。不幸的是，JSX 中的类型检查有一个错误，请参阅：

https://github.com/Microsoft/TypeScript/issues/10171

他们计划在 2.1 中修复它。在那之前，这种技术不适用于 TSX。 （修复后我会回来更新这个答案！）

Answer 3

听起来这个组件的最小接口总是：

interface ITextFieldProps {
    label: string;
    required: boolean;
}

但有时您的对象的属性不止这两个。

如果是这样，那么您可以将更复杂的对象作为道具传递给组件。只要定义了这两个属性就可以了。

---

作为对您的 cmets 的回应，我警告不要让道具过于灵活 - 这样做的代价是使组件变得不必要地复杂。我建议始终传递命名的单个道具，而不是使用更通用的 object 道具。

我猜你可以使用这样的东西：

// use the object
const { label, required } = object;

// ...or use a mixture
const { label } = object;
const required = false;

// ...or define everything manually
const label = "label";
const required = true;

return <TextField label={label} required={required} />;

这样，最后一行在所有情况下都保持不变，所以 props 接口不需要做任何花哨的事情。