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

interface Foo {
    var1: string
}

interface Bar {
    var2: string
}

type Combined = Foo & Bar

我不想组合键,而是想将键从一个接口排除到另一个接口.你能用打字脚本做吗?

原因是,我有一个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" />

无论如何都不会使用该值.我想要的是返回一个没有特定键的界面,我想要这样的东西

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

那么返回的组件中就不需要value.现在可以用打字脚本吗?

推荐答案

在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相关问答推荐

为什么类型{}(非空值)可分配给{ [key:字符串]:字符串}等子类型?

通用默认值触发依赖通用约束变量的错误

如何在另一个if条件中添加if条件

类型脚本中的Gnomeshell 扩展.如何导入.ts文件

防止获取发出不需要的请求

如果存在ts—mock—imports,我们是否需要typescpt中的IoC容器

webpack错误:模块找不到.当使用我的其他库时,

输入元素是类型变体的对象数组的正确方法是什么?'

如何使用函数填充对象?

如何使所有可选字段在打印脚本中都是必填字段,但不能多或少?

如何在Typescript 中组合unions ?

在列表的指令中使用intersectionObservable隐藏按钮

TypeScrip-根据一个参数值验证另一个参数值

使用ngfor循环时,数据未绑定到表

Typescript将键数组映射到属性数组

可赋值给类型的类型,从不赋值

在REACT查询中获取未定义的isLoading态

更漂亮的格式数组<;T>;到T[]

Select 类型的子项

TypeScript:如何使用泛型和子类型创建泛型默认函数?