如何从 TypeScript 的接口中排除键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44983560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to exclude a key from an interface in TypeScript
提问by Fang-Pen Lin
In TypeScript, you can combine two interface types like this
在 TypeScript 中，你可以像这样组合两种接口类型
interface Foo {
var1: string
}
interface Bar {
var2: string
}
type Combined = Foo & Bar
Instead of combining keys, I want to exclude keys from one interface to another. Is there anyway you can do it in TypeScript?
我不想组合键，而是想将键从一个接口排除到另一个接口。无论如何，您可以在 TypeScript 中做到这一点吗？
The reason is, I have an HOC, which manages a property value for other wrapped component like this
原因是，我有一个 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}
/>
)
}
}
With that I can write
有了它我可以写
const ValuedComponent = valueHOC(MyComponent)
then
然后
<ValuedComponent />
but the problem is, the returned component type is also using the props type from given component, so TypeScript will complain and ask me to provide the valueprop. As a result, I will have to write something like
但问题是，返回的组件类型也使用给定组件的 props 类型，所以 TypeScript 会抱怨并要求我提供valueprop。结果，我将不得不写一些类似的东西
<ValuedComponent value="foo" />
Which the value will not be used anyway. What I want here is to return an interface without specific keys, I want to have something like this
无论如何都不会使用该值。我想要的是返回一个没有特定键的界面，我想要这样的东西
React.ComponentClass<P - {value: string}>
Then the valuewill not be needed in the returned component. Is it possible in TypeScript for now?
那么value在返回的组件中将不需要 。现在可以在 TypeScript 中使用吗？
回答by AJP
In TypeScript 2.8 you can now do the following:
在 TypeScript 2.8 中，您现在可以执行以下操作：
interface Foo {
attribute1: string;
optional2?: string;
excludePlease: string;
}
// Define Omit. Can be defined in a utilities package
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: ''
};
So in relation to your question the following might be what you want:
因此，关于您的问题，以下可能是您想要的：
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}
/>
)
}
}
回答by Chintsu
There is utility-typeslibrary that has Subtractmapped type:
有映射类型的实用程序类型库Subtract：
import { Subtract } from 'utility-types';
type Props = { name: string; age: number; visible: boolean };
type DefaultProps = { age: number };
type RequiredProps = Subtract<Props, DefaultProps>;
// Expect: { name: string; visible: boolean; }
回答by ilovett
interface MyDialogProps extends Omit<DialogProps, 'onClose'> {
id: string;
onClose: (reason: string) => void;
}
export const MyDialog: React.FC<MyDialogProps> = ({ id, onClose, ...props) => (
<Dialog onClose={() => onClose("whatever")} {...props} />
);
回答by Micha? Pietraszko
You can't remove properties from already existing interfaces. Even trying to extend existing interface with the interface having valueproperty set as optional will return an error.
您无法从现有接口中删除属性。即使尝试使用value属性设置为可选的接口来扩展现有接口也会返回错误。
To avoid this issue, modify the typings of the target component so valueproperty is optional.
为避免此问题，请修改目标组件的类型，以便value属性是可选的。
e.g.
例如
// ...
class MyComponent extends React.Component<{value?: string}, State> {
// ...
}
and then component produced when using High Order Function
然后在使用高阶函数时产生的组件
const valuedComponent = valueHOC(MyComponent);
won't ask for valueprop.
不会要求value道具。
