React＆Typescript从接口定义中排除

Question

after many hours of test i ask you. i want define my interface object

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

after, i will want create a type that use only "text" property, the other are optional.

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

now it's all ok, but whe i try use this definition in props of my class 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 >)}

and i have this messagge error

Type '{ text: string; }' is not assignable to type '{ text: string; color: string; fontStyle: string; sidePadding: number; }'. Property 'color' is missing in type '{ text: string; }'.

i can not understand why? i use typescript > 2.8 anche the ts documentation it's not very clear. Can someone help me to resolved and undestand my errors?

Answer 1

I believe I've succeeded in reproducing the error. Your component declaration should be:

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

And if you want to exclude the color , fontStyle , and sidePadding properties from OptionPros , what you need is not Exclude (which just excludes one type from another) but the operation more commonly called Omit , defined and used as follows:

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

With these changes, I am no longer getting the error.