Значения по умолчанию с интерфейсом в функции стрелки (TypeScript, React)

Question

Этот вопрос специально c к стрелочным функциям. Можно ли включить значения по умолчанию вместе с интерфейсом в параметры функции, не прибегая к Object.assign ()?

interface Props {
  someBoolean?: boolean;
  anotherBoolean?: boolean;
  children: any;
}

const DefaultValues = {
  someBoolean: false,
  anotherBoolean: false,
}

export const StackOverflow: React.FC<Props> = (_props: Props) => {
  const props = Object.assign({}, DefaultValues, _props);

  return <React.Fragment>{props.children}</React.Fragment>;
};

Answer 1

IFF вам не нужен DefaultValues в другом месте, и вам не нужно иметь возможность ссылаться на (все) props в теле вашей функции, тогда да:

export const StackOverflow: React.FC<Props> = ({ someBoolean = false,
  anotherBoolean = false, children = [], ...additionalProps }) => {

  return <React.Fragment>{children}</React.Fragment>;
};

Answer 2

Вы можете предоставить значения по умолчанию функционально, составив свой компонент.

interface Props {
  someBoolean: boolean;
  anotherBoolean: boolean;
  children: any;
}

const StackOverflow: React.FC<Props> = (props: Props) => {
  return <React.Fragment>{props.children}</React.Fragment>;
};

function withDefaults<T extends React.ComponentType<any>, U extends Partial<React.ComponentProps<T>>>(
  Component: T,
  defaults: U,
): React.FunctionComponent<Omit<React.ComponentProps<T>, keyof U> & Partial<U>> {
  // @see https://github.com/Microsoft/TypeScript/issues/14729
  return props => React.createElement(Component, { ...defaults, ...props });
}

Использование:

const StackOverflowWithDefaults = withDefaults(StackOverflow, { someBoolean: false, anotherBoolean: false });

<StackOverflowWithDefaults>
  The only prop I need to provide is children
</StackOverflowWithDefaults>

Answer 3

Ответ - нет. Вы не можете добавить value по умолчанию к interface или type

, но вы можете сделать что-то вроде этого.

interface SomeType {
     prop1: string;
     prop2: number;
     prop3?: boolean; // optional
}

const fun = (value: SomeType) => {

// Assigning default value to the prop3 which is optional.
   const {prop1, prop2, prop3 = false} = value;

}