React&Typescript 从接口定义中排除

Question

经过几个小时的测试，我问你。我想定义我的接口对象

export interface OptionPros {
    text: string;
    color?: string|undefined;
    fontStyle?: string|undefined;
    sidePadding?: number|undefined;
}

之后，我想创建一个只使用 "text" 属性的类型，其他都是可选的。

type OO=Exclude<"color"|"fontStyle"|"sidePadding", OptionPros>

现在一切正常，但是当我尝试在我的 class 反应

的道具中使用这个定义时

file1.tsx

export interface OptionPros {
    text: string;
    color?: string|undefined;
    fontStyle?: string|undefined;
    sidePadding?: number|undefined;
}
type OO=Exclude<"color"|"fontStyle"|"sidePadding", OptionPros>

export interface DProps extends BaseProps {
    optionD: OO
}
export default class DDD <DProps> {
    static defaultProps = {
        optionD: {
            text: '',
            color: '#FF6384', // Default is #000000
            fontStyle: 'Arial', // Default is Arial
            sidePadding: 20 // Defualt is 20 (as a percentage)
        }
    };
    render() {<div>AAAA</div>}
 }

file2.tsx

 //i omit react and other inclusion or extension
 import.....
 export default class AAAA {
 render() {return(<DDD optionD={{text:"hello world"}}>AAAA</DDD >)}

我有这个消息错误

键入'{ 文本：字符串； }' 不可分配给类型 '{ text: string;颜色：字符串；字体样式：字符串； sidePadding：数字； }'。属性 'color' 类型中缺少 '{ text: string; }'.

我不明白为什么？我使用 typescript > 2.8 anche ts 文档，它不是很清楚。有人可以帮助我解决和理解我的错误吗？

Answer 1

我相信我已经成功重现了错误。您的组件声明应该是：

export default class DDD extends React.Component<DProps> { ... }
//                       ^^^^^^^^^^^^^^^^^^^^^^^

如果你想从 OptionPros 中排除 color、fontStyle 和 sidePadding 属性，你需要的不是 Exclude（它只是从另一种类型中排除一种类型）但更常见的操作称为 Omit，定义和使用如下：

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type OO=Omit<OptionPros, "color"|"fontStyle"|"sidePadding">

通过这些更改，我不再收到错误。

React&Typescript 从接口定义中排除

React&Typescript Exclude from interface definition

definition

typescript

reactjs