如何在TypeScript中从接口排除键
在TypeScript中,您可以像这样组合两种接口类型如何在TypeScript中从接口排除键,typescript,Typescript,在TypeScript中,您可以像这样组合两种接口类型 interface Foo { var1: string } interface Bar { var2: string } type Combined = Foo & Bar export default function valueHOC<P> ( Comp: React.ComponentClass<P> | React.StatelessComponent<P> )
interface Foo {
var1: string
}
interface Bar {
var2: string
}
type Combined = Foo & Bar
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}
/>
)
}
}
React.ComponentClass<P - {value: string}>
我希望从一个接口到另一个接口排除键,而不是组合键。你能用打字脚本做吗
原因是,我有一个HOC,它管理像这样的其他包装组件的属性值
interface Foo {
var1: string
}
interface Bar {
var2: string
}
type Combined = Foo & Bar
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}
/>
)
}
}
React.ComponentClass<P - {value: string}>
然后
无论如何都不会使用该值。这里我想要的是返回一个没有特定键的接口,我想要这样的东西
interface Foo {
var1: string
}
interface Bar {
var2: string
}
type Combined = Foo & Bar
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}
/>
)
}
}
React.ComponentClass<P - {value: string}>
React.ComponentClass
然后,返回的组件中将不需要
值。现在可以在TypeScript中使用吗?您不能从现有接口中删除属性。即使尝试使用将value
属性设置为可选的接口扩展现有接口,也会返回错误
为避免此问题,请修改目标组件的类型,使value
属性是可选的
e、 g
不会要求值
道具。在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: ''
};
接口Foo{
属性1:字符串;
选项2?:字符串;
不包括:字符串;
}
//Typescript 3.5+为您定义了省略。
//在早期的Typescript版本中,定义省略:
//类型省略=拾取
//使用“忽略”排除一个或多个字段(使用“排除请”|“字段2”|“字段3”等排除多个字段)
类型栏=省略
常数b:Bar={
属性1:“”
};
因此,关于你的问题,以下可能是你想要的:
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}
/>
)
}
}
导出默认函数值hoc(
Comp:React.ComponentClass
| React.component
):React.ComponentClass{
返回类WrappedComponent扩展React.Component{
渲染(){
返回(
)
}
}
有一个库具有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; }
import{Subtract}来自“实用程序类型”;
类型Props={name:string;age:number;visible:boolean};
键入DefaultProps={age:number};
类型RequiredProps=减法;
//预期:{name:string;visible:boolean;}
接口MyDialogProps扩展忽略{
id:字符串;
onClose:(原因:字符串)=>无效;
}
export const MyDialog:React.FC=({id,onClose,…props)=>(
onClose(“无论什么”)}{…props}/>
);
你可以查看选择
。但是你不能动态地选择。虽然这样做有效,但它会生成可选参数。你可以这样做来防止:我不怀疑答案的准确性,但这是一种荒谬的绕房子的方法,可以实现简单的目的-任何人都需要阅读它一些非琐碎的东西还没来得及弄清楚到底发生了什么事。typescript团队为什么这样做有什么逻辑吗?@havlock抱歉,我最近编辑了它以简化和改进答案,但我忘了在简化示例中使用简化的省略代码。现在这样更好了吗?@AJP我是在抱怨typescript,而不是你的回答,但谢谢-是的,这稍微简单一些。他们让我们跳过如此荒谬的语法来实现一些简单的东西,这仍然是绝对疯狂的-如果他们真的认为这类事情是可以的,我担心这种语言。@havlock:)如果能看到其他类型语言的例子来处理这个问题,我会很感兴趣呃:)