Аннотации типов TypeScript

СТАТЬЯ В БЛОГЕ: https://javascriptlearner815.github.io/blog/2021/02/21/typescript-type-annotations.html

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

Пример

Вот пример:

function remainder(dividend: number, divisor: number) {
    return dividend % divisor;
}
const variableOne = ["Hello", "World"];
const variableTwo = [12, "Hello World"];
const variableThree = [5, 2];
const remainderOne = remainder(variableOne[0], variableOne[1]);
const remainderTwo = remainder(variableTwo[0], variableTwo[1]);
const remainderThree = remainder(variableThree[0], variableThree[1]);
const results = [remainderOne, remainderTwo, remainderThree];
for (const result of results) {
    if (isNaN(result)) {
        continue;
    }
    console.log(result);
}

Консоль должна вывести что-то вроде этого:

TypeError: Argument of type 'string' is not assignable to parameter of type 'number'.
TypeError: Argument of type 'string | number' is not assignable to parameter of type 'number'. 
TypeError: Type 'string' is not assignable to type 'number'.

Плюсы и минусы

Плюсы

• Гарантирует, что вы получите нужный тип данных
• Короткий
• Легко понять
• Обеспечивает приятный интерфейс в IDE

Минусы

• Выдает ошибку, если получает другой тип данных
• Продолжает выполнение кода

Предостережения

• Если тип данных не тот, который вы указали, TypeScript выдаст ошибку. Чтобы справиться с этим, вы можете использовать try / catch:

function remainder(dividend: number, divisor: number) {   
    return dividend % divisor;
}
try {
   const result = remainder("Some Random Text", 123);      
   console.log(`The result is ${result}.`);
} catch {
   console.error("Wrong data type.");
}

• Даже если тип данных не тот, который вы указали, код продолжит выполнение. Чтобы справиться с этим, вы можете использовать typeof:

function remainder(dividend: number, divisor: number) {
  if (typeof dividend === 'number' || typeof divisor === 'number'){
       const response = dividend % divisor;
       /* if (!Number.isNaN(response)) */ return response;
  }
}
try {
   const result = remainder("Some Random Text", 123);
   console.log(`The result is ${result}.`);
} catch {
   console.error("Wrong data type.");
}