TypeScript: Функції як параметри

1 year ago by admin

TypeScript: Функції як параметри

У TypeScript використовується кілька способів типизувати функції, які передаються як параметри. Найпростіший – використовувати тип Function. Він описує функцію JavaScript з усіма її особливостями, включаючи властивості bind, call та apply.

Опишемо вхідний параметр callback функції process:

function process(callback: Function) {
    const value = callback();
    // ...
}

Function відключає перевірку типів для функції, що викликається. В результаті кількість і тип вхідних аргументів не перевіряються, а результатом роботи такої функції буде any. Це може призвести до логічних помилок та несподіваної поведінки:

process(Math.round); //?

Даний приклад спрацює, хоча поведінка навряд чи буде очікуваною, оскільки Math.round викличеться без аргументів і поверне NaN. Тому ми рекомендуємо уникати використання Function.

Інший спосіб описувати функції - використовувати стрілочну функцію із зазначенням вхідних та вихідних типів:

function process(callback: () => string) {
  // value має тип string
  const value = callback();
  // ...
}
process(Math.round);
// Argument of type '(x: number) => number' is not
// assignable to parameter of type '() => string'.

Визначення стрілочної функції схоже на справжню, але тут важливо не переплутати. Тут бачимо саме опис типу, а не визначення функції.

Розглянемо ще кілька прикладів для закріплення:

function process(callback: () => number)
function process(callback: () => string[])
function process(callback: () => { firstName: string; })

Параметри синтаксично вказуються так само, як і для стрілочних функцій:

function process(callback: (n: number) => string) {
  const value = callback(10);
  // ...
}

Тут ми визначили тип callback функцією з параметром n з типом number і значення string, що повертається.

Якщо визначення функції зустрічається часто, то для нього можна створити псевдонім:

type myFunction = (n: number) => string;
function process(callback: myFunction) {
  const value = callback(10);<
  // ...
}

Такий запис спрощує читання коду та дозволяє уникнути дублювання.

Get slug

1 year ago by admin

const getSlug = (title: string) => {
  const trimStr = title.replace(/^\s+|\s+$|(\s)\s+|\W+/g, "$1");
  const slug = trimStr.toLowerCase().split(" ").join("-");
  return slug;
};

Npm manager

Слугіфікує рядки, навіть якщо вони містять Unicode. https://www.npmjs.com