#видео дня

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

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

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

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

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

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

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

#js #ts #types

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

WebKit strikes back!

Это было вопросм времени, когда же появится что-то подобное node.js и deno, но на JSC aka JavaScriptCore, а не V8.

JSC это JS-движок от, собственно, WebKit’а. Тогда как V8 — Blink (Chrome).

Помимо браузеров Safari и Epiphany, JSC используется в React Native, кстати.

Итак, новая среда выполнения JS: Bun.

Ссылка: https://bun.sh/

Обещается нативная поддержка TS, JSX, ESM и дикая-дикая скорость. Сама среда при этом написана на языке Zig, что бы это ни значило (его компилятор хавает и плюсы, кажется).

Давайте загибать пальцы, какие же серверные среды JS у нас теперь есть:
- Node.js (V8)
- Deno (V8)
- Bun (JSC)
- Google AppsScript (Rhino/V8)

Что забыл?

#js #ts #bun #node #jsc #v8

#ссылка дня

Я не ожидал, что буду первым, кто предложит этот инструмент в чате по тайпскрипту в ответ на недавний вопрос.

Бывает такое, что нужно перевести на TypeScript довольно масштабный проект, но ни сил ни желания перемалывать старый жс нет. Как поступить? Ну, задекларировать any, unknown, а где можно — хотелось бы вычислить типы из контекста.

И вот как раз этим занимается ts-migrate от Airbnb: https://github.com/airbnb/ts-migrate

У нас применялась, знаю ещё несколько вполне себе успешных случаев. Стоит того, чтобы посмотреть.

Конечно, можно просто скармливать транслятору жс, так тоже будет работать. Но менее эффективно и проверка на ошибки сборки будет номинальной.

#ts #js

#стрим дня

…который будет 6 сентября.

В общем, есть тип такой, Джейсон Ленсторф, он ведёт обучающие стримы по веб-технологиям.

И у него на стриме 6 сентябра будет создатель курсов по TypeScript, Мэтт Покок: https://www.learnwithjason.dev/advanced-typescript-let-s-learn-generics

Тема стрима — дженерики в TS. Без вопроса по дженерикам не обходится ни одно интервью.

Залетаем, смотрим, учимся.

#ts #generics

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

Кто-нибудь ещё считает, что подсказки и ошибки TypeScript страшно раздражают своей формальностью?

Say no more!

Появилось расширение, переводящее их на человеческий (ну… английский) язык!

КДПВ говорит сама за себя, а пока дам ссылку: https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator

Ну и песочница, чтоб побаловаться и понять: https://ts-error-translator.vercel.app/

Отправьте ей свою ошибку и давайте посмотрим на результат.

P. S. а ошибки типов Styled Components оно переведёт, как считаете?

#vscode #ts #typescript

#заметка дня

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

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

Делать 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

#такое дня

Дежурное напоминание о том, что перфекционизм убивает мотивацию и не боги горшки обжигают.

Откуда скриншот? Да из типов для React: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1194

Не то чтобы я вам предлагал везде писать any, но уж тормозить разработку и быть party pooper-ом TypeScript не должен.

P. S. обновил ссылку до React 18.

#ts #react

#расширение дня

Ну что, пришло время поговорить о серьезных вещах!

А что может быть серьезнее ошибок TypeScript? Правильно, ничего. Уж слишком они формальные. И мы на самом деле уже с вами обсуждали расширение, переводящее их в человеческий вид: https://t.me/htmlshit/1601

И вот есть ещё одно, стремительно набирающее популярность: https://github.com/yoavbls/pretty-ts-errors

Ссылка на VS Code store: https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

Работает с Node и Deno, React и Vue, Solid и Qwik. Далее везде, в общем.

Пробуем, рассказываем о результатах.

Прокачивайте скиллы, котаны.

#typescript #ts #vscode

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

Миграции с JavaScript на TypeScript часто заходят не туда. Или не заканчиваются. Или откатываются. Зачастую в лучшем случае весь новый код начинает писаться на TypeScript и всё на этом.

Да, ещё не факт, что оно вам надо вообще, но это тема иной беседы.

Итак, с чего же начать вашу миграцию если автоматизированные средства, расставляющие везде any, вам не подходят, а //@ts-nocheck — для быдла?

Начните с модулей с наибольшим числом зависимостей, говорит нам Matt Pocock, а он в общем-то в курсе, о чём утверждает, он учит людей тайпскрипту фулл-тайм :)

А как найти эти самые модули? Очень просто, возьмите построитель диаграмм зависимостей. Madge вполне подойдёт: https://github.com/pahen/madge

Ну и никто не мешает весь новый код писать сразу на TS.

#typescript #javascript #ts #js #diagram #deps

#фишка дня

Мой любимый фронтенд-твиттер Кричащий Банан показал очень интересную штуку: тип Simplify<T>, взятый из https://github.com/sindresorhus/type-fest (отличная репа, кстати, куча полезных типов).

Что это и зачем? Я вот сразу не понял. Ну, ты же сам обычно типы пишешь, зачем упрощать? А все просто.

Мы предполагаем, что A — собирательный тип. Например, комбинация из Partial и Omit, что достаточно часто приходится делать:

type A = { foo: string; bar: number };
type B = Omit<A, "bar"> & Partial<A>

И IDE покажет... ну, бестолковую фигню покажет, которая не даст вам никакой информации. Как этого избежать? Можно B... упростить. И будет красиво! Смотрим КДПВ или вот, ссылку на песочницу, сразу ясно что к чему.

Не забываем посылать спасибы авторам Type Fest и Кричащему банану :)

#typescript #ts