React & Typescript Исключить из определения интерфейса - PullRequest
Новая
       11

React & Typescript Исключить из определения интерфейса

0 голосов
/ 30 августа 2018

после многих часов испытаний я вас спрашиваю. я хочу определить мой интерфейсный объект 

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

после того, как я захочу создать тип, который использует только свойство "text", другие являются необязательными. 

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

теперь все в порядке, но когда я пытаюсь использовать это определение в опорах моего класса, реагирую

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; цвет: строка; fontStyle: string; sidePadding: номер; }». Свойство 'color' отсутствует в типе '{text: string; }».

Не могу понять, почему? Я использую машинопись> 2.8 и документацию TS, это не очень понятно. Может ли кто-нибудь помочь мне разрешить и понять мои ошибки?

1 Ответ

0 голосов
/ 30 августа 2018

Я считаю, что мне удалось воспроизвести ошибку. Ваше объявление компонента должно быть: 

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">

С этими изменениями я больше не получаю сообщение об ошибке.

...