TypeScript: Структурная типизация

В JavaScript возможно работать с объектами и классами одинаковым образом, и не требуется опираться ни на наследование, ни на интерфейсы, нужны только ожидаемые поля и методы. Такой подход называют утиной типизацией (Duck typing). То что ходит как утка и крякает как утка – утка.

const user = {
  firstName: 'Vassiliy',
  lastName: 'Kuzenkov',
  type: 'user'
}

const admin = {
  firstName: 'Kirill',
  lastName: 'Mokevnin',
  type: 'admin'
}

const formatUser = (user) => [user.type, ':', user.firstName, user.lastName].join(' ');

formatUser(user); // ok
formatUser(admin); // ok

В языках как Java, нам бы потребовалось определить интерфейс, после отдельно имплементировать его для классов User и Admin. А в параметрах метода форматирования тип аргумента был бы этим интерфейсом. Другой вариант - написать метод с перегрузкой для этих двух случаев. Языки с таким поведением используют номинативную типизацию (nominative typing).

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

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

const user = {
  firstName: 'Vassiliy',
  lastName: 'Kuzenkov',
  type: 'user'
}

const admin = {
  firstName: 'Kirill',
  lastName: 'Mokevnin',
  type: 'admin'
}

const formatUser = (user: { type: string, firstName: string, lastName: string }): string =>
  [user.type, ':', user.firstName, user.lastName].join(' ');

formatUser(user); // ok
formatUser(admin); // ok

При этом структурная типизация не защищает нас от наличия дополнительных полей в объекте:

const moderator = {
  firstName: 'Danil',
  lastName: 'Polovinkin',
  type: 'moderator',
  email: 'danil@polovinkin.com'
}

const formatUser = (user: { type: string, firstName: string, lastName: string }): string =>
  [user.type, ':', user.firstName, user.lastName].join(' ');

formatUser(moderator); // ok

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

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

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

Так при объединении | мы расширяем тип. Увеличиваем число допустимых значений для типа. А при пересечении &, наоборот, сужаем. Тем самым уменьшаем число допустимых значений:

type IntersectionUser = {
  username: string;
  password: string;
} & {
    type: string;
}

const admin: IntersectionUser = { username: 'test', password: 'test', type: 'admin' } // требуется совпадение c объектным типом и слева и справа от оператора &

type UnionUser = {
    username: string;
    password: string;
} | {
    type: string;
}

const user: UnionUser = { username: 'test', type: 'user' } // достаточно совпадения с одним из объектных типов

Попробуйте ответить: что будет если объединить два объектных типа с одинаковым именем поля, но с отличающимися типами. Это распространенная ошибка по невнимательности или из-за недостаточного понимания типов как множеств.

Задание

Опишите тип состояния DataState и перечисление LoadingStatus, затем реализуйте функцию handleData(), которая принимает на вход DataState и возвращает строку в зависимости от состояния: loading... при LoadingStatus.loading, error при LoadingStatus.error, строку из числового поля data при LoadingStatus.success. Если статус не входит в перечисление, функция возвращает unknown.

const loading: DataState = { status: LoadingStatus.loading };
console.log(handleData(loading)); // loading...

const error: DataState = { status: LoadingStatus.error, error: new Error('error') };
console.log(handleData(error)); // error

const success: DataState = { status: LoadingStatus.success, data: 42 };
console.log(handleData(success)); // 42

Полезное

• Structural typing в официальной документации

• Как получить номинативную типизацию в TS

Определения

• Структурная типизация — принцип, определяющий совместимость типов на основе их описания (структуре). Переменная типа A, также, может использоваться там же, где ожидается тип B, если обладает той же или более широкой (грубо, имеет больше полей) структурой.