Очередная статья про систему типов TypeScript28.07.2022 03:16

Немного введения

Вы уже все знаете, какая выразительная система типов в нашем синем друге, ведь об этом было написано немало статей. Думаю, втирать рассказывать об этом уже нет смысла, поэтому сразу перейдём к делу.

Про себя я рассказывать не буду. Ничем таким не прославился. Просто сижу пишу код 24/7, потому что нравится.

Вывод типов

Да-да, начнём именно с таких основ. Позже будем углубляться.

Давайте рассмотрим следующий код: 

let str = '123';
let anotherStr: '123' = '123';

Для первой переменной мы не указывали тип, поэтому язык нам выведет тип string для неё. Для другой же мы явно указали тип, который, в принципе предполагает, что мы в эту переменную никакую другую строку поместить не сможем. К слову, эта возможность нам сегодня и пригодится.

Думаю, шаблонные строки должны быть знакомы всем — это довольно мощный инструмент в языке программирования, и он не обошёл стороной даже нашего сине-белого товарища: 

let numbers: '1234567890';
let letters: 'abcdefghijklmnopqrstuvwxyz';
let possibleSymbols: `${typeof numbers}${typeof letters}`;

Тут довольно простая операция — мы конкатенируем типы numbers и letters, получая при этом новый тип, который будет состоять из цифр и букв английского алфавита в нижнем регистре. Впрочем, это всё можно сократить до следующего кода (если это будет необходимо): 

let possibleSymbols: '1234567890abcdefghijklmnopqrstuvwxyz';

В принципе по большей части мы сегодня будем работать в основном со строками (и ещё парочкой преимуществ).

Типы-утилиты

По мимо мощной системы типов микромягкие добавили утилиты для более простой работы с типами. Например, у нас есть интерфейс пользователя: 

interface IUser {
  username: string;
  password: string;
  address: string;
  ip: string;
}
// Я долго думал, это у меня код неверный или подсветка не так работает на хабре
// Сообщите, если всё же код неверный, а то вдруг

И, например, нам нужно описать функцию авторизации для пользователя. Давайте согласимся, что для авторизации нам не нужен адрес проживания и IP-адрес пользователя. Поэтому воспользуемся типом Pick следующим образом: 

declare function authenticate(
	credential: Pick
): boolean;

В теле функции нам IDE будет подсказывать, что мы можем использовать только поля username и password.

А вам тоже надоело проверять постоянно переменную/свойство на существование? Пожалуйста, даже для этой проблемы есть решение — приведение типов! 

declare function maybeString(): string | undefined;
maybeString().split(''); // Тут будет ошибка "Object is possibly 'undefined'"

Мы можем понять его — он старается заботиться о нас и уберечь нас от опасности. Но мы безбашенные, поэтому нам всё равно на какие-то там опасности. Перепишем, но функцию оставим такой же! 

let onlyString: string = maybeString();

Если вы приверженец Чехова, то для есть другой синтаксис: 

let onlyString: string = maybeString()!;

Предупреждение: не используйте это никогда. Все действия выполнены непрофессионалом на свой страх и риск в чисто ознакомительных целях. Типы хороши, но если логика хромает, то никакие типы не спасут (имею ввиду типы в TypeScript)

От простого к сложному — infer

Для меня данная функция языка была очень долго загадкой, но со временем я стал её понимать лучше, благодаря строкам (похоже на всеми ненавистную рекламу).

Давайте возьмём пример высосанный из пальца: 

type Str = T extends `${infer R}` ? R : never;

Что собственно этот тип делает? Мы передаём в generic некий тип Т, а далее проверяем, наследуется ли он от некой строки с infer R… А что такое infer? Представьте, что это что-то в духе переменной, только вот значение определяет сам TypeScript, мы можем только указать конкретное место, а TypeScript подставит из типа Т сам.

Итого получаем следующие вариации: 

let notString: Str<123>;     // вернёт never
let daEtoStroka: Str<'123'>; // вернёт '123'

Ограничения, безусловно, есть:

  • infer может использоваться только с применением extends;

  • Время жизни ограничивается блоком для выполнения истинного условия тернарного оператора. То есть, код: type S = T extends `${infer R}` ? T : R; будет выдавать ошибку при транспиляции.

Рекурсия

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

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

type Recursive = Recursive;

Если быть точнее, то код выдаст две ошибки. Сначала подсветит определение типа и скажет, что у него там есть неразрешимая рекурсия. Потом подсветит значение типа и скажет, что Recursive — это не generic-тип.

Поэтому, если захочется использовать рекурсию, то она должна быть:

  1. неглубокой;

  2. ограниченной;

Вот тут-то мы начинаем использовать мощность синего друга.

Практика

А давайте затипизируем несколько функций со строками? А то что это такое сейчас есть: передал строку — получил строку. Что делает функция — неизвестно. Продолжаем высасывать проблемы из пальца.

Начнём с простенького — конкатенация. Что нам нужно? Generic-функция и всё

function concat(
  a: T,
  b: T1,
): `${T}${T1}` {
  return <`${T}${T1}`>a + b;
}

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

Зато в таком случае подсказки будут решать проблемы уже за вас

Подсказка с описанной выше функцииПодсказка с описанной выше функции

Но что это? Кажется, мы ограничены в количестве параметров. Давайте исправим этот момент. Для этого создадим отдельный тип, который будет превращать массив строк в одну строку: 

type Join = T extends [
  infer D extends string,
  ...infer R
]
  ? Join
  : _O;

Что за ещё один параметр _O? Мы туда будем класть каждый строковый элемент просто потому, что можем. Собственно вот и практическое применение рекурсии. Если на каком-то из этапов мы получим пустой массив, то сразу выдадим значение параметра _O.

А теперь определим новую функцию, которая может принимать уже сколько угодно строк и выводит верный тип.

Далее в статье будет опускаться логика функций/методов.

declare function concat(...strs: T): Join;

В таком случае, если мы попробуем использовать данную функцию, то получим следующую подсказку:

Вывод типов в подсказкеВывод типов в подсказке

Что же, с конкатенацией тут всё. Перейдём к следующей такой же важной функции, как разбивание строки на массив по разделителю. Добро пожаловать, split.

Данный метод принимает разделитель и лимит. Опустим последний параметр, потому что TypeScript ещё не научился выполнять операции над числами.

Давайте попробуем описать эту операцию с помощью типов: 

type Split<
    T,
    S extends string,
    _O extends string[] = []
> = T extends `${infer R}${S}${infer D}`
    ? D extends ''
        ? S extends ''
          ? [..._O, R]
          : [..._O, R, '']
        : Split
    : T extends `${infer R}`
        ? [..._O, R]
        : _O;

Что, собственно тут происходит? В нашем случае T — это строка, которую передаём, а S — это разделитель. Собственно, _О — результат выполнения. Мы забираем из строки первую подстроку, за которой идёт разделитель, за которой идёт остальная часть строки.

Здесь очень хорошо видна природа infer. Последний объявленный infer в строковом типе будет жадным, то есть, он заберёт всё, в то время как идущие перед ним будут забирать первое попавшееся совпадение. Отсюда делаем вывод, что R — конкретная подстрока, а не объединение подстрок.

Далее проверяем, а пусто ли после разделителя, если да, то возвращаем массив с добавлением пустой строки (так поступает стандартный split). В противном случае продолжаем выполнять рекурсию. Если на каком-то этапе у нас останется строка без разделителя, то добавляем её к нашему массиву и возвращаем результат, в противном случае возвращаем просто массив, ничего к нему не добавляя.

Опишем функцию: 

declare function split<
    T extends string,
    S extends string
>(str: T, sep: S): Split;

Попробуем воспользоваться и получим такую подсказку:

Результат выведения типовРезультат выведения типов

На вкусненькое

Раз уж мы продвинулись настолько вперёд, то предлагаю вам посмотреть парсер JSON на типах Typescript Парсер здесь (тыкни на меня).

Код парсера, чтобы далеко не ходить

type json = '{ "a": [1, 2] }'

type Trim = T extends ` ${infer R}`
    ? Trim
    : T extends `${infer R} `
        ? Trim
        : T
type StringToArray = T extends `[${infer R}]`
    ? Trim extends `${infer E},${infer Other}`
        ? StringToArray<`[${Trim}]`, [..._O, JSONParse]>
        : Trim extends `${infer E}`
            ? [..._O, JSONParse]
            : never
    : never;

type JSONParse = T extends Trim
    ? T extends `{${string}}`
        ? StringToObjectV2
        : T extends `[${string}]`
            ? StringToArray
            : T extends `${infer R extends number}`
                ? R
                : T extends `${infer R extends boolean}`
                    ? R
                    : T extends `${infer R extends null}`
                        ? R
                        : T extends `"${infer R extends string}"`
                            ? R
                            : never
    : never;

type StringToObjectV2 = {}> = T extends `{${infer R}}`
    ? Trim extends `"${infer Key}":${infer Other}`
        ? Trim extends `[${infer Arr}],${infer NewOther}`
            ? StringToObjectV2<`{${Trim}}`, _O & { [L in Key]: StringToArray<`[${Trim}]`> }>
            : Trim extends `[${infer Arr}]`
                ? _O & { [L in Key]: StringToArray<`[${Trim}]`> }
                : Trim extends `${infer Value},${infer LOther}`
                    ? StringToObjectV2<`{${Trim}}`, _O & { [L in Key]: JSONParse> }>
                    : Trim extends `${infer Value}`
                        ? _O & { [L in Key]: JSONParse> }
                        : never
        : never
    : never;

let l: JSONParse

Также можете глянуть задачу чуть посложнее — инкремент числа. Так как в типах мы не можем использовать математические операторы, то приходится изворачиваться. По такой же аналогии можно реализовать и декремент. Пока что такой инкремент работает корректно только с положительными числами. Суть работы его следующая: мы берём число, превращаем его в строку, разбиваем строку посимвольно, каждый символ превращаем в цифру от 0 до 9. Далее выполняем инкремент последнего элемента массива, если в результате инкремента мы получаем 0, то это означает, что произошло переполнение, а значит нам нужно выполнить инкремент ещё раз, только уже на другом разряде (пользуемся рекурсией). Далее правильно соединяем все части массива и за одно проверяем, не передан ли нам на одном из этапов пустой массив — это помогает тоже обнаружить переполнение — в этом случае мы просто добавляем единицу в начала массива.

Здесь инкремент (тыкни на меня)

Код инкремента

type ToString = `${T}`;

type Split<
    T,
    S extends string,
    _O extends string[] = []
> = T extends `${infer R}${S}${infer D}`
    ? D extends ''
        ? S extends ''
          ? [..._O, R]
          : [..._O, R, '']
        : Split
    : T extends `${infer R}`
        ? [..._O, R]
        : _O;

type JoinToNumber = T extends [infer Digit extends number, ...infer Other extends number[]]
  ? JoinToNumber
  : T extends [infer Digit extends number]
    ? `${_O}${Digit}` extends `${infer N extends number}`
      ? N
      : never
    : `${_O}` extends `${infer N extends number}`
      ? N
      : never

type PossibleDigitChars = {
  "0": 0,
  "1": 1,
  "2": 2,
  "3": 3,
  "4": 4,
  "5": 5,
  "6": 6,
  "7": 7,
  "8": 8,
  "9": 9,
}

type DigitWithoutZero = [1, 2, 3, 4, 5, 6, 7, 8, 9]
type IncrementDigit = [...DigitWithoutZero, 0];
type DecrementDigit = [0, ...DigitWithoutZero];

type MapCharToDigit = PossibleDigitChars[T];

type MapStringArrayToNumber<
  T extends string[],
  _O extends number[] = []
> = T extends [infer Digit extends keyof PossibleDigitChars, ...infer Others extends string[]]
  ? MapStringArrayToNumber]>
  : T extends [infer Digit extends keyof PossibleDigitChars]
    ? [..._O, MapCharToDigit]
    : _O

type SplitNumber = MapStringArrayToNumber, ''>>;

type IncrementArray<
  T extends number[],
  _O extends number[] = [],
  _OverflowFlag extends boolean = false
> = T extends [...infer Others extends number[], infer LastDigit extends number]
  ? IncrementDigit[LastDigit] extends 0
    ? IncrementArray
    : _OverflowFlag extends true
      ? IncrementDigit[LastDigit] extends 0
        ? IncrementArray
        : T extends [...infer Others extends number[], infer _ extends number]
          ? [...Others, IncrementDigit[LastDigit], ..._O]
          : never
      : T extends [...infer Others extends number[], infer _ extends number]
        ? [...Others, IncrementDigit[LastDigit], ..._O]
        : never
  : T extends []
    ? [1, ..._O]
    : [..._O]

type Increment = IncrementArray>;

type Eq = T extends E ? true : false;

type test = [
  Eq, [2]>,
  Eq, [6, 6, 7]>,
  Eq, [1, 0, 0, 0]>,
  Eq, [3, 0, 0, 0]>,
]

Вывод

  • Система типов TS очень выразительная. Позволяет затипизировать почти всё, что угодно.

  • Не надейтесь на систему типов, потому что-то с плохой логикой типы не помогут справиться.

  • Данный подход опасен, но при осторожном использовании может быть очень мощным средством (например, есть возможность затипизировать роутер так, чтобы на каждый / в строке была подсказка, а собственно потом можно и разрешить API метод с выводом типа возвращаемого значения при запросе).

Обычно там в конце статьи люди что-то оставляют, но у меня ничего нет, чтобы оставить вам, простите.

© Habrahabr.ru