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

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

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

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

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

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

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

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

#тип дня

Что делать если вам нужно создать тип, параметры которого служат для передачи в библиотечную функцию? Aka тип аргументов не торчит наружу?

Не делайте это ручками, используйте служебный тип Parameters!

const createPerson = ({
  firstName, 
  lastName
}: { 
  firstName: string, 
  lastName: string
}) => ({
  firstName,
  lastName
})

type CreatePersonParams = Parameters<typeof createPerson>[0]; 

const params: CreatePersonParams = {
  firstName: 'John', 
  lastName: 'Doe' 
};

Песочница

#typescript #utility

#тип дня

Четыре ночи провёл в деревне в глубинной Финляндии и возвращаться в привычный режим очень и очень тяжело.

Прыжки со скалы просто так не проходят.

Здесь отмечают день солнцестояния. Официальный выходной, плюс многие компании добавляют ещё один день — канун. Из города уезжают вообще все, пустота.

В общем, тип дня от Кори Хауса: как указать TypeScript, что поле принимает любое строковое значение, но при этом получить автоподсказку для наиболее часто используемых из них?

Очень просто:

type Status = 'open' | 'closed' | string & {}

Результат на иллюстрации. Песочница.

Объединение с пустым типом предотвращает попытки языкового сервера от приведения типа к строке.

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

type Status = 'open' | 'closed' | Omit<string, "open" | "closed">

Пользуемся!

#typescript

#новость дня

В node.js появилась экспериментальная нативная поддержка TypeScript!

Крепко же их bun приложил...

Ссылка на PR: https://github.com/nodejs/node/pull/53725

По факту происходит отбрасывание типов, поэтому средства вроде Enum и namespace не поддерживаются. Инициатива предоставления стабильного API поверх TypeScript получила название amaro и в дальнейшем планируется выделение в отдельный обновляемый модуль. Работает (кто бы сомневался) при помощи swc, собранного в WebAssembly!

Так что никаких больше ts-node!

node main.ts

...и поехали!

#node #typescript #ts

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

Дал слабину и где-то в глубине кода указал any?

Воспользовался DefinitelyTyped, не проверив?

И при этом не используешь WebStorm?

Есть решение! Расширение для VS Code any-xray от Дана Вандеркама: https://marketplace.visualstudio.com/items?itemName=danvk.any-xray

Про DefinitelyTyped не шутка, всякое бывает: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b0ad06b09bd5547cf6f01a8355cbcb309d3f5e24/types/find-package-json/package-json.d.ts#L449

У React в типах, кстати, тоже.

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

Но подсветить такие случаи, чтобы не попасть впросак — удобно.

#vscode #typescript

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

Устал вручную типизировать ответы от API для TypeScript или любого другого типизированного языка?

Есть решение!

https://app.quicktype.io/

Фиганул туда JSON — получил нужную структуру или описание типа, даже с тайпгардами. Уютненько!

Есть расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype

Ещё один мощный инструмент в тему дня: https://transform.tools. Одним типизированием JSON не ограничивается: можно CSS в Tailwind, а можно Flow в TypeScript.

Вот, например, если кто использует Zod — конвертор типов в схему Zod: https://transform.tools/typescript-to-zod

#json #typescript #type #бородач

#новость дня

Вчерашнего дня, конечно, и многие из вас уже в курсе, но...

TypeScript переписывают на Go!

Да, если вы не знали — транслятор TypeScript всё это время был написан на самом себе, что, как вы понимаете, не делало его быстрым :)

И вот, новость: https://devblogs.microsoft.com/typescript/typescript-native-port/

Результат ошеломляет: разбор типов и сборка уже в 10 раз быстрее! Это означает, что и LSP в ваших IDE будут быстрее. И работать станет приятнее.

Очень рекомендую пойти почитать статью.

Кстати, кто же этот седой дядя на видео? А это Андерс Хейлсберг! Создатель Turbo Pascal, Delphi, C# и, внезапно, TypeScript.

И на этом видео он, в том числе, объясняет, почему не Rust. Этим вопросом задолбали уже всю команду.

И, если коротко:
1. Это портирование, а не переписывание. Они хотели оставить структуру проекта и работы над ним той же, что и была.
2. Rust, хоть и облегчает управление памятью, полностью не освобождает от связанного с этим управлением бойлерплейта. И, поскольку, структура транслятора TypeScript представляет из собой огромный набор вложенных друг в друга структур, количество бойлерплейта вышло бы неразумным.

В общем, нас ждёт дивный новый мир! И я очень рад. И выбором языка тоже.

#typescript #go

#баг дня

Как вы думаете, что обозначает тип {}?

Ну, буквально:

type b = {};

Быть может, пустой объект? Да. А может, объект с любыми свойствами? Тоже да. А может, число или строка? И опять, да. А пустые? Да! А может, булево значение? Невероятно, но тоже да!

А может, null или undefined ? Нет. Вот тут — нет. Песочница.

Поэтому смысла в использовании типов {} или Object (второе лишь псевдоним к первому) довольно мало.

Если вам нужен пустой объект — так и пишите, Record<PropertyKey, never>.

Подробнее у Мэтта Покока: https://www.totaltypescript.com/the-empty-object-type-in-typescript.

В чём же баг, спросите вы?

А баг у нас на этот раз в реализации проверки типов в WebStorm/PhpStorm. У JetBrains, короче.

Мы выводим типы из схем Zod, но для целей создания шаблона, мне потребовалось исключить некоторые свойства из проверки:

TemplateQueryDetails = Omit<
    z.infer<typeof QueryDetails>, 'metadata'
>;

И мощно получил в лицо: тип ресолвился за 3 минуты на MacBook Pro M2, вешая интерфейс PhpStorm напрочь. Каждый раз.

Решение пришло откуда не ждали:

TemplateQueryDetails = Omit<
    z.infer<typeof QueryDetails>, 'metadata'
> & {};

Обратите внимание на пустой тип. Обнаружил я это случайно: в первом варианте я ещё и добавлял айди шаблона, но впоследствии — отказался.

По всей видимости, система типов IntelliJ построена таким способом, что рассчитвывает конъюнкцию типов как новый тип и кеширует на месте. Но это лишь предположение.

В VS Code, кстати, проблемы не наблюдается.

После обращения в поддержку, мне было рекомендовано включить настройку Use types from server, что буквально выключает встроенные средства и использует типы от LSP. Что, собственно, мне только в плюс.

А как ваши дни проходят? 🙂

#jetbrains #typescript #lsp

#статья дня

Motion почти 5 лет держали монорепозиторий на TypeScript (~2.5 млн строк). Но со временем разработка стала всё медленнее.
CI прогонял проверки больше 20 минут. Компилятор часто падал.

Это все решилось бы ts-go, но они устали ждать.

Приходилось поддерживать Zod, иначе проверка данных разваливалась. Prisma и Drizzle создавали трудности при рефакторинге. Совместный код между вебом и мобилой ломался при малейших изменениях.
В итоге команда решила перейти на .NET и C#.

Ссылка на статью: https://engineering.usemotion.com/moving-off-of-typescript-e7bb1f3ad091?gi=1f6548fc7f1a

Аргументы:
— Entity Framework упрощает работу с данными.
— Синтаксис и структура знакомы после TypeScript.
— Экосистема стабильная, инструменты зрелые.

Теперь их бэкенд пишется на C#, фронт остался на React. По их словам, так быстрее и предсказуемее, чем поддерживать TypeScript на большом масштабе.

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

Мнения, котаны?

#typescript #zod #dotnet

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

Я бы сказал, #офигеть дня. Возможно, вы помните этот пример, его во многих пабликах презентовали как «ад разработчика».

Так вот. Вы не поверите. Его смогли запрограммировать!

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

Итак, инструмен, который помог создать это творение, называется TypeGPU. Что он делает?

Он конвертирует TypeScript в GLSL. Да, в язык описания шейдеров! Точнее, в WGSL — WebGPU Shading Language.

Ну то есть понимаете, что происходит? Вы описываете логику так, как привыкли на TypeScript — с некоторыми особенностями шейдеров (например, дикая параллельность вычислений) — и получаете на выходе разделённый на логику и шейдеры код!

Можно начать с простого примера градиента, чтобы хоть немного в это въехать. Но, конечно, это не за один вечер :)

Я обожаю такие проекты. Стирают все грани и вдохновляют.

#typescript #webgpu #webgl #glsl #wgsl

#ссылка дня

Интерактивный... кликер (?) для изучения типов в TypeScript: Visual Types.

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

Дело, конечно, не ограничивается только типами. Есть и объяснение unknown против any, есть условные типы, есть паттерны и даже мапы.

В общем, есть что покликать на вечер, чтобы потом вспоминать :)

#typescript #tool