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

Question

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

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

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

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

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

Answer 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) => {};

Playground

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

Параметры отдыха

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

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}, например.

Параметр отдыха детская площадка