gpt4 book ai didi

typescript - 如何从 TypeScript 的接口(interface)中排除键

转载 作者:搜寻专家 更新时间:2023-10-30 20:31:27 27 4
gpt4 key购买 nike

在 TypeScript 中,您可以像这样组合两种接口(interface)类型

interface Foo {
var1: string
}

interface Bar {
var2: string
}

type Combined = Foo & Bar

我不想组合键,而是想将键从一个界面排除到另一个界面。无论如何,你可以在 TypeScript 中做到这一点吗?

原因是,我有一个 HOC,它管理像这样的其他包装组件的属性值

export default function valueHOC<P> (
Comp: React.ComponentClass<P> | React.StatelessComponent<P>
): React.ComponentClass<P> {
return class WrappedComponent extends React.Component<P, State> {
render () {
return (
<Comp
{...this.props}
value={this.state.value}
/>
)
}
}

有了它我可以写

const ValuedComponent = valueHOC(MyComponent)

然后

<ValuedComponent />

但问题是,返回的组件类型也使用给定组件的 props 类型,因此 TypeScript 会提示并要求我提供 value prop。因此,我将不得不写类似的东西

<ValuedComponent value="foo" />

无论如何都不会使用该值。我在这里想要的是返回一个没有特定键的接口(interface),我想要这样的东西

React.ComponentClass<P - {value: string}>

那么返回的组件中将不需要。现在可以在 TypeScript 中使用吗?

最佳答案

在 TypeScript 2.8 中,您现在可以执行以下操作:

interface Foo {
attribute1: string;
optional2?: string;
excludePlease: string;
}

// Typescript 3.5+ defines Omit for you.
// In earlier Typescript versions define Omit:
// type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

// Use Omit to exclude one or more fields (use "excludePlease"|"field2"|"field3" etc to exclude multiple)
type Bar = Omit<Foo, "excludePlease">
const b: Bar = {
attribute1: ''
};

所以关于您的问题,以下可能是您想要的:

export default function valueHOC<P> (
Comp: React.ComponentClass<P> | React.StatelessComponent<P>
): React.ComponentClass<Omit<P, "value">> {
return class WrappedComponent extends React.Component<Omit<P, "value">, State> {
render () {
return (
<Comp
{...this.props}
value={this.state.value}
/>
)
}
}

关于typescript - 如何从 TypeScript 的接口(interface)中排除键,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44983560/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com