Typescript: Присвоение значения

В этом уроке мы разберем присвоение одного значения другому. Это одна из базовых операций с переменными в большинстве языков. Самая частая ошибка, с которой вы столкнетесь в TypeScript будет выглядеть как Error: Type X is not assignable to type Y.. Такой код не удается скомпилировать, поэтому нужно разобраться, как это исправить.

Присвоение одного значения другому и передача аргументом в функцию называют присваиваемостью(Assignability):

let x: number;
const y: number = 10;
x = y;

function len(str: string): number {
  return str.length;
}
len(false); // Error!

При присвоении x = y; и передачи аргумента f(false); сначала проверяется, может ли переменная содержать передаваемый тип — совместим ли тип x с типом y.

Если думать о типах, как о множествах значений, то присваиваемость — это проверка, что множество значений x входит в множество значений y. Например, литеральный тип 'one' входит в множество значений string, а множество значений number — нет.

Переменная типа x присваивается переменной типа y, если множество значений x входит в множество значений y. Или другими словами — если множество значений x является подмножеством множества значений y.

Так что когда вы в следующий раз столкнетесь с ошибкой Type X is not assignable to type Y., не стоит сразу приводить всё к самому общему типу через as any. Ведь, в таком случае вы полностью отключаете проверку типов для этой переменной.

Сначала нужно разобраться, что ожидается на вход, и что возвращает функция. И только после этого можно модифицировать собственные типы: расширять допустимые типы, например, с помощью объединения и только в крайних случаях использовать хак с any.

Чтобы понимать, что к чему в TypeScript можно присвоить, нужно смотреть на код с точки зрения иерархии типов и структурной типизации. Этому посвящены следующие уроки в этом курсе.

Реализуйте объект по описанному типу Form. Поле name.value должно проходить валидацию, а поле age — нет.

console.log(form.name.validator(form.name.value)); // true
console.log(form.age.validator(form.age.value)); // false