Question

经过数小时的测试，我问你。我想定义我的界面对象

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

之后，我将要创建一个仅使用“文本”属性的类型，另一个是可选的。

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

现在没关系，但是我尝试在班级的props中使用此定义react

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; }'不可指定为'{text：string;颜色：字符串； fontStyle：字符串; sidePadding：数字； }'。类型'{text：string;类型中缺少属性'color'。 }”。

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

Answer 1

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

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

如果您想从color中排除fontStyle，sidePadding和OptionPros属性，则您不需要的是Exclude（仅排除一种操作），但操作通常更名为Omit，其定义和使用方式如下：

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

有了这些更改，我不再遇到错误。

React＆Typescript从接口定义中排除

1 个答案: