Как присвоить необязательное свойство типу функции, у которого есть реквизиты?

#javascript #reactjs #typescript #ecmascript-6

Вопрос:

Я создал один интерфейс в typescript, который будет пользовательским типом для моего другого компонента.

 interface Props{
  input: string | number;
  handleChange: ({name: string, continue: boolean}) => void;  
}

function Another({input, handleChange}: Props): JSX.Element {
// returning some JSX  
}

Я хочу сделать параметры name и continue необязательными для типа функции handleChange . Я попробовал использовать приведенный ниже подход, но он работал не так, как ожидалось.

 interface Props{
  input: string | number;
  handleChange: ({name?: string, continue?: boolean}) => void;  
}

1. Что значит «не сработало, как ожидалось» у вас есть пример сообщения об ошибке? также вы имели в виду передавать параметры в handleChange как объект или они должны были быть отдельными свойствами? например handleChange: (name?: string, continue?: boolean) => void; . Можете ли вы показать нам, как вы вызываете handleChange, чтобы сделать его более понятным, может помочь мне ответить 🙂

2. В моих тестовых примерах я получал ошибку «type » (name?: string, continue?: boolean) => void» не может быть присвоен «() => void»

3. Вы должны поделиться своими тестовыми примерами, потому что такая ошибка будет зависеть от ваших тестов и от того, какую реализацию он ожидает

4. верно, но @bigblind answered помог мне запустить эти тестовые примеры. Я должен передать объект целиком реквизиту точно так же, как я сделал с Another component .

5. Все в порядке, я просто не хотел пытаться слепо давать ответ, который может побудить вас передать undefined (что часто не является предполагаемым поведением)

Ответ №1:

Вы можете присвоить имя объекту в целом и сделать это необязательным, например:

 interface Props{
  input: string | number;
  handleChange: (arg?: {name?: string, continue?: boolean}) => void;  
}

теперь hadneChange можно вызывать без каких-либо параметров или с объектом, возможно, имеющим a name и continue поле.

1. пожалуйста, обратите внимание, что это будет работать, не делая arg необязательным, и разработчик, скорее всего, не захочет, чтобы это было так или иначе (поскольку это легче приводит к неопределенному поведению)

Ответ №2:

Все кредиты @bigblind. Нам нужно передать объект целиком, как сказал @bigblind.

Мне понравилось приведенное ниже, что помогло мне пройти мои тестовые примеры.

 interface handleChangeProps{
 name?: string;
 continue?: boolean;
}

interface Props{
  input: string | number;
  handleChange: ({name, continue}: handleChangeProps) => void;  
}