Параметры типизированной функции, использующие деструктурирование и отдых в TypeScript

У меня есть функция:

export default ({ input: { name, onChange, value, ...restInput }, meta, ...rest }) => ( ... ); 

Учитывая, что «имя» - это строка, «onChange» - это функция, «значение» - это строка, «мета» - это объект, как я могу добавить типы к этим параметрам? Мое лучшее предположение было бы так:

 export default ({ input: { (name: String), (onChange: function), (value: String), ...restInput }, (meta: Object), ...rest }) => ( ... ); 

Но, похоже, это синтаксические ошибки. И даже больше я понятия не имею, как добавить типы в параметры отдыха.

Всего 1 ответ


Чтобы добавить объявления типов к деструктурированным параметрам, вам нужно объявить тип содержащего объект .

Из документации на машинопись :

... Смутно, двоеточие здесь не указывает тип. Тип, если вы его укажете, все еще нужно записать после всего деструктурирования ...

let { a, b }: { a: string, b: number } = o;

PSA о глубоко вложенном деструктурировании :

Используйте деструктурирование с осторожностью . Как показывает предыдущий пример, ничего, кроме самого простого деструктурирующего выражения, запутывает . Это особенно верно при глубоко вложенном деструктурировании, которое становится очень трудно понять, даже не нагромождая переименование, значения по умолчанию и аннотации типов. Постарайтесь, чтобы выражения деструктурирования были небольшими и простыми. Вы всегда можете написать задания, которые деструктурирование будет генерировать самостоятельно.

Параметры функции разрушения

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

export default ({ a, b }: {a: string, b: number}) => (
  ...
);

Это выглядит довольно плохо на более длинном примере, хотя:

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  ...rest
}: {
  input: { 
    name: string, onChange: ()=>void, value:string, ...restInput 
  }, meta: object
}) => (
  ...
);

Выглядит неплохо, поэтому лучше всего здесь можно объявить интерфейс для ваших параметров и использовать его вместо встроенных типов:

interface Params {
  input: { 
    name: string;
    onChange: ()=>void;
    value: string;
  }; 
  meta: object;
}

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  ...rest
}: Params) => {};

Детская площадка

Статья с гораздо большим количеством

Параметры останова

Для остальных параметров, в зависимости от того, что вы ожидаете от этих типов, вы можете использовать подпись индекса :

interface Params {
  // This needs to match the other declared keys and values
  [key: string]: object;
  input: { 
    [key: string]: string | (() => void);
    name: string;
    onChange: ()=>void;
    value: string;
  }; 
  meta: object;

}

export default ({
    input: { name, onChange, value, ...restInput },
    meta,
    ...rest
}: Params) => { };

Это даст ...rest тип {[key: string]: object} .

Игровая площадка для отдыха


Есть идеи?

10000