#видео дня

Должен признаться, моё знакомство с TypeScript случилось вынужденно. Я до последнего избегал его, максимально соблюдая общую гигиену кода. Но как же легко становится, когда ты просто не можешь допустить ошибку типов, пока специально этого не захочешь.

У меня ещё есть огромный проект на работе на ES3 и перевести его на TS очень непросто, но очень хочется.

Так вот, совсем недавно Евгений Обрезков записал целую двухчасовую лекцию про типы в TypeScript: https://youtu.be/i03l0N5g7nE

И вот мне всего год назад чего-то подобного очень и очень не хватало.

Желательно иметь хоть какое-то понятие о том, что такое TypeScript и базовые типы вообще, ибо лекция построена по принципу велосипедостроения. Создавая свои типы для разных данных, вы сможете понять, зачем в TS введена та или иная сущность.

#typescript #types

#фишка дня

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

const operators = [
  {
    label: ‘Equals’,
    value: ‘==’,
  },
  {
    label: ‘Not equals’,
    value: ‘!=’,
  },
  …
];

И вот надо же мне типизировать использование этих операторов. Но как? Не руками же.

И выход есть:

const operators = [
  …
] as const;

type Operators = typeof operators[number][‘value’];

В итоге, виртуально получаем вот это вот:

type Operators = "==" | “!=“;

Красота.

#typescript #types #const

#видео дня

Когда я выкатил пост со шпаргалками по TypeScript в React, поднялся некоторый вой.

Мол, не нужно, навязали, неудобно и так далее.

O RLY? Ну ок. Типы в JS всё равно могут появиться. Например, вот предложение в рабочую группу ECMAScript TC39 от Гила Тайяра:

https://www.youtube.com/watch?v=SdV9Xy0E4CM

В сухом остатке, типы становятся лишь комментариями для их проверки и более ни на что не влияют. Такое себе расширение JSDoc.

Кто-то в восторге, кто-то считает, что уж проще тогда TypeScript использовать.

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

#js #ts #types

#заметка дня

Что делать, если нужная вам библиотека не предоставила типы для всех публичных методов?

Ну вот такое вот архитектурное решение: метод экспортирован из модуля, а тип или интерфейс — нет?

Делать unknown или any? Копировать и переопределять с помощью as?

Ни в коем случае! Вам нужен простой советский... ReturnType: https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype

Пример использования — на иллюстрации. Ну или ещё можно так:

const createPerson = () => ({
firstName: 'John',
lastName: 'Doe'
})

type Person = ReturnType<typeof createPerson>

Не делайте ерунды, котаны. Читайте документацию.

#typescript #ts #types

#фишка дня

Является ли CSS языком программирования?

Тьюринг-полным — нет. Но CSS — де-факто — это декларативный язык описания интерфейсов, и развитие его идёт в этом направлении довольно чётко.

Впрочем, fizzbuzz на CSS решается даже слишком элегантно: https://codepen.io/SachaG/pen/nwazRo

Так вот, к чему это я. Вы вообще в курсе, что в CSS есть типы? А они есть. И на их основе можно реализовать некоторые математические функции.

Тригонометрические вон завезли недавно, а математические пока только в Safari.

Давайте попробуем исправить это недоразумение и реализуем abs, floor, round, ceil, mod и rem на CSS и его типах. Начнём с модуля:

--abs: max(var(--a), -1*var(--a));

Поняли, что тут произошло? Выбрали максимальное между a и -a. Очевидно, что положительное всегда будет максимальным, его и берём.

Теперь к сути дела. Давайте реализуем round:

@property --round {
syntax: '<integer>';
initial-value: 0;
inherits: false;
}

--round: var(--a);

Вот щас может стать немножечко больно: мы объявили переменную (custom property, для зануд) --round и указали CSS, что её тип — целое число. Теперь браузер возьмёт и... и округлит значение математически при присваивании (опять для зануд: да, это де-факто присваивание).

А как сделать floor — округление вниз? Как-как:

--floor: calc(var(--a) - .5);

А ceil — округление вверх?

--ceil: calc(var(--a) + .5);

Естественно, перед этим надо объявить переменные --floor и --ceil как целые числа.

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

Пока можете подумать, где это применить 😉

#css #types

#заметка дня

Что делать, если нужная вам библиотека не предоставила типы для всех публичных методов?

Ну вот такое вот архитектурное решение: метод экспортирован из модуля, а тип или интерфейс — нет?

Делать unknown или any? Копировать и переопределять с помощью as?

Ни в коем случае! Вам нужен простой советский... ReturnType: https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype

Пример использования — на иллюстрации. Ну или ещё можно так:

const createPerson = () => ({
firstName: 'John',
lastName: 'Doe'
})

type Person = ReturnType<typeof createPerson>

Не делайте ерунды, котаны. Читайте документацию.

#typescript #ts #types #бородач

#заметка дня

Что делать, если нужная вам библиотека не предоставила типы для всех публичных методов?

Ну вот такое вот архитектурное решение: метод экспортирован из модуля, а тип или интерфейс — нет?

Делать unknown или any? Копировать и переопределять с помощью as?

Ни в коем случае! Вам нужен простой советский... ReturnType: https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype

Пример использования — на иллюстрации. Ну или ещё можно так:

const createPerson = () => ({
firstName: 'John',
lastName: 'Doe'
})

type Person = ReturnType<typeof createPerson>

Не делайте ерунды, котаны. Читайте документацию.

#typescript #ts #types #бородач

#инструмент дня

Ладно, мы все можем согласиться, что у TypeScript замечательный офсайт, прекрасная документация и удобная песочница, но в мире есть сотни тысяч JS-библиотек и десятки тысяч из них либо написаны на TS, либо имеют выделенные типы.

А единой документации по этим типам нет!

Точнее, не было, но теперь вышел https://tsdocs.dev/

Это система поиска по существующим пакетам с типами. Она установит нужный пакет, распарсит типы и JSDoc и отобразит в удобном формате.

К слову, котаны, что вы предпочитаете по cmd- (ctrl)-click в редакторе? Прыгать к имплементации, или к типам?

Я вот — к имплементации, прыгать к типам меня раздражает.

#typescript #dts #types #doc

#тип дня

Говоришь такой коллеге: «Ты зачем столько классов насоздавал для такой простой вещи? Используй CSS-переменные».

А он приходит к тебе с картинкой выше и грустный весь.

Что мы делаем в таком случае?

Да очень просто, дополняем интерфейс CSSProperties, чтобы до реакта, наконец, дошло:

declare module 'react' {
    interface CSSProperties {
        [key: `--${string}`]: string | number
    }
}

Пруф: песочница.

Странно, конечно, что это не из коробки всё.

#css #types #react #typescript

#библиотека дня

— А что, если типы надо проверять в рантайме?
— Да не, херня какая-то...

Впрочем, создателям библиотеки Typia так совсем не кажется. Да и вам, в целом, казаться не должно: TypeScript, конечно, большой молодец, но типы проверяет только на этапе компиляции. И, конечно же, мы все верим в святые контракты :)

Библиотека предлагает не только проверку входящих данных, но и соответствие JSON описанию.

Есть как простые is и equals, возвращающие логическое соответствие, так и assert и assertEquals, кидающие ошибку.

Отличие is от equals в том, что is менее строгий и позволяет расширение объекта свойствами, которых нет в интерфейсе. Но описанные при этом должны соответствовать.

const input: unknown = {
id: v4(),
email: "[email protected]",
age: 30,
extra: "superfluous property", // extra
};

const is: boolean = typia.is<IMember>(input);const
equals: boolean = typia.equals<IMember>(input);

console.log(is, equals); // true, false

Обратили внимание? Схема не нужна!

Как-то так. Кто использовал уже?

#typescript #types

#инструмент дня

Ладно, мы все можем согласиться, что у TypeScript замечательный офсайт, прекрасная документация и удобная песочница, но в мире есть сотни тысяч JS-библиотек и десятки тысяч из них либо написаны на TS, либо имеют выделенные типы.

А единой документации по этим типам нет!

Точнее, не было, но теперь вышел https://tsdocs.dev/

Это система поиска по существующим пакетам с типами. Она установит нужный пакет, распарсит типы и JSDoc и отобразит в удобном формате.

К слову, котаны, что вы предпочитаете по cmd- (ctrl)-click в редакторе? Прыгать к имплементации, или к типам?

Я вот — к имплементации, прыгать к типам меня раздражает.

#typescript #dts #types #doc #бородач

#фишка дня

Является ли CSS языком программирования?

Тьюринг-полным — нет. Но CSS — де-факто — это декларативный язык описания интерфейсов, и развитие его идёт в этом направлении довольно чётко.

Впрочем, fizzbuzz на CSS решается даже слишком элегантно: https://codepen.io/SachaG/pen/nwazRo

Так вот, к чему это я. Вы вообще в курсе, что в CSS есть типы? А они есть. И на их основе можно реализовать некоторые математические функции.

Тригонометрические вон завезли недавно, а математические пока только в Safari.

Давайте попробуем исправить это недоразумение и реализуем abs, floor, round, ceil, mod и rem на CSS и его типах. Начнём с модуля:

--abs: max(var(--a), -1*var(--a));

Поняли, что тут произошло? Выбрали максимальное между a и -a. Очевидно, что положительное всегда будет максимальным, его и берём.

Теперь к сути дела. Давайте реализуем round:

@property --round {
syntax: '<integer>';
initial-value: 0;
inherits: false;
}

--round: var(--a);

Вот щас может стать немножечко больно: мы объявили переменную (custom property, для зануд) --round и указали CSS, что её тип — целое число. Теперь браузер возьмёт и... и округлит значение математически при присваивании (опять для зануд: да, это де-факто присваивание).

А как сделать floor — округление вниз? Как-как:

--floor: calc(var(--a) - .5);

А ceil — округление вверх?

--ceil: calc(var(--a) + .5);

Естественно, перед этим надо объявить переменные --floor и --ceil как целые числа.

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

Пока можете подумать, где это применить 😉

#css #types #бородач