Typescript: принцип подстановки функций

[Alexandroppolus]

Немного оффтоп, но ещё стоит добавить, что типизация параметров колбэка в идеале должна точно соответствовать его вызову. Например, сейчас для getCardMask более подошел бы такой колбэк:

interface SliceOptions { start: number; }

type SlicerFunc = (s: string, options: SliceOptions) => string;

Теперь мы можем передать в getCardMask так же функцию, у которой обязателен второй параметр и поле start в нем (равно как и функцию, у которой это всё необязательно), а поле end - необязательное, но что-то кроме number. Иными словами, снизили требования к пользователю getCardMask до минимально возможных.

[anton_nix]

Спасибо за ценное замечание, дополнил статью!

[meonsou]

Занятный способ избежать таких проблем это использовать тип void вместо отсутствующих аргументов, хотя это и не слишком практично.

interface Props {
  onClick: (..._: void[]) => void
}

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

Всё ещё можем вызывать без аргументов:

(
  <button onClick={() => onClick()}>
    Log
  </button>
)

Но уже не можем передать туда где они есть:

(
  <button onClick={onClick}> // Ошибка, MouseEvent<...> не совместим с void
    Log
  </button>
)

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

const logConsole = (s: string = "asd") => console.log("[LOG]", s)

(
  <LogButton onClick={logConsole} /> // Ошибка, тип void не совместим с string | undefined
)

Здесь можно либо сделать аргумент void | string, либо тоже обернуть функцию. Первого я делать не советую, так как тип void обозначает значение, которое не должно быть использовано, и в нём может лежать что угодно.

[anton_nix]

Это тоже отличный комментарий, и кому-то это может пригодится.

Но да, я при написании статьи решил это не указывать, т.к. мы, таким образом, запрещаем опциональные аргументы. Что, может быть, не так уж и критично.

[bobnobrain]

Кажется, можно ещё проще – с единственным аргументом: onClick: (_: void) => void

[vsarmaev]

Всё хорошо, всё правильно, всё гладко.

Но Вас трудно понимать: получается неинтуитивно, так как Вы используете IT-суржик вместо родного языка.

Использование суржика вместо родного языка - это не необходимость, не насущная потребность, не знак мастерства и не отметка принадлежности к профессиональной группе с устоявшимся словарным запасом среды. Просто напросто это интеллектуальная лень. Как сон разума пораждает чудовищ, так и лень разума пораждает мелких противных гремлинов - бестий не(до)понимания и извращения смысла (и оба мучимся мы с ним).

[Gruzchick]

Можно примеры из статьи?