Node.js Recipes
2.76K subscribers
121 photos
1 video
1 file
494 links
По буднях нотатки по #Nodejs розробці, по вихідним огляди конференцій та доповідей (с) @galkin_nikita
Download Telegram
Как писать меньше TypeScript интерфейсов?
#typescript

TL;DR Используйте Lookup Types

TypeScript позволяет писать вложенные интерфейсы. Например:

interface User {
id: number;
name: string;
contacts: {
phone: string;
email: string;
address: {
country: string;
city: string;
street: string;
}
}
}

Необходимо создать функцию updateUserContact. Распространённое решение вынести UserСontact как отдельный интерфейс, или еще хуже продублировать его. Новый интерфейс использовать как тип в функции.
Вместо этого следует использовать  Lookup Types. Это выглядит так:
type UserСontacts = User['contacts']
type UserAddress = User['contacts']['address']

Обратите внимание, что всегда используются квадратные скобки и кавычки, а не точка. Такая нотация позволяет делать union внутри квадратных скобок или использовать keyof. В завершение пример близкий к продакшен коду:

function updateUserContact<T extends keyof User["contacts"]>(
user: User,
contactType: T,
contact: User["contacts"][T]
): void {
// ...
}
Как следить за устареванием кода?
#nodejs_api #typescript

В разработке существует жизненный цикл. Вы можете увидеть его этапы в #nodejs документации в виде stability index. Часть методов помечена как Legacy, т.е. их не стоит использовать как прямо, так и через библиотеки. Аналогичный подход можно использовать в своей кодовой базе. Для этого следует использовать JSdoc @deprecated. Пример:
/** @deprecated use newFunction instead **/
function oldFunction() {...}

Проверку использования устаревшего кода можно переложить на eslint. Для javascript проектов для этого используется правило import/no-deprecated.

В typescript есть перегрузка функций и устареть может только часть сигнатур. Пример:
function example(userOrId: User): void
/** @deprecated use with User instead of user_id **/
function example(userOrId: number): void
Поэтому для typescript проектов следует использовать eslint-plugin-deprecation.
Как подтянуть TypeScript?
#typescript #code_pattern

Лучший способ тренировки паттернов кодирование это решений задач. Для этого отлично подойдет проект type-challenges. Каждая из задач предлагает написать свой тип. Есть встроенная проверка. Как это работает можно глянуть на Hello World примере.

В Readme проекта задачи отсортированы по темам и уровням сложности. Некоторые задачи начального уровня предлагают реализовать built-in тип, т.е. который уже есть в TypeScript.
Что нового в TypeScript 4.4?
#typescript

24 августа выйдет новая версии TypeScript. Вот краткий пересказ release notes:
– В catch блоках можно включить, что тип ошибки будет unknown, вместо any. Для этого добавлен флаг useUnknownInCatchVariables, который по умолчанию включен с strict флагом. При переходе потребует изменить часть кодовой базы.
– Добавлен флаг --exactOptionalPropertyTypes, который запрещает для опциональных полей ставить undefined.
– Добавлена поддержка Class static initialization blocks. Напомню, что при переходе на 16-й версию #nodejs будет поддержка уровне V8, т.е. можно будет использовать и в JS-base проектах.
– Улучшение работы с Index Signatures. До этого это могли быть только number и string. В новой версии добавлены Symbol и template string, а так же разрешены union.
– традиционные изменения в lib.d.ts, который используется по умолчанию, если не указаны lib. Эти изменения являются breaking change. Полный перечень. Если вы используете lib.d.ts в своем проекте, то самое время прочитать Как правильно настроить TypeScript в Node.js проекте?
– улучшена скорость сборки и интеграция с Visual Studio
Какие вопросы задать, чтобы проверить уровень TypeScript?
#typescript

Сегодня поделюсь подборкой моих вопросов для интервью по TypeScript. Естественно без ответов, иначе как мне потом их на собеседованиях спрашивать.

1. Как используется тип unknown?
2. Что такое генерики?
3. Какая последняя новинки в TypeScript вам больше всего понравилась и почему?
4. Чем ключевое слово type отличается от interface?
5. Когда и как используется тип never?
6. Что такое директивы в typescript? Какие и зачем вы используете?
7. Расскажите о пространствах имен типов и пространстве имен переменных на примере выражения class User implements Person {...
8. Как используется tsconfig.json?
9. Что такое guard и как они используются?
10. Как вы дебажите typescript код?

В ходе собеседования я не только задаю вопросы, но и отправляю примеры кода для обсуждения. Для этого лучше всего подходит share на TypeScript Playground. Вот пример.
Как TC39 предложения внедряются в TypeScript?
#typescript

В Node.js v16 появились новые фичи. Одна из них Array.at. К сожалению, использовать ее в TypeScript проектах еще нельзя.

TC39 выделяет такие stages для предложений:
🤷🏻 Stage 0: Strawperson.
💡 Stage 1: Proposal.
✍🏻 Stage 2: Draft.
📝 Stage 3: Candidate.
Stage 4: Finished.
Подробней тут.

Так вот TypeScript внедряет фичи только на стадии Stage 3. Это не быстрый процесс, так как необходимо не только добавить описание в базовые d.ts файлы, но и сделать транспайлинг в ECMAScript версии не поддерживающий данную фичу. По-сути сделать функционал аналогичный babel плагинам.

К сожалению, Array.at перенесли из релиза 4.5 в 4.6.

⚠️Транспайлинг в старые версии идет только для синтаксических конструкций, как пример sync/await. Для новых методов в старых версиях ECMAScript необходимо подключать полифилы (смотри ts-polyfill или core-js). Спасибо Илье за вопросы в комментариях.

Рецепты по теме:
Обзор Node.js v16: Новые JavaScript конструкции
Advanced TypeScript Playlist by Basarat
#typescript #worth_seeing

Сегодня в рекомендациях не одно видео, а целый плейлист от Basarat. Вы знаете автора по книге TypeScript Deep Dive. В плейлисте собранны короткие видео уроки по продвинутому использованию typescript. Вот три видео, которые мне стоит пересказать как рецепты в рамках канала:
TypeScript TYPES vs INTERFACES : Key Differences
– TARGET, LIB and POLYFILL for TypeScript and JavaScript
TypeScript insane type: DeepReadonly

Ссылки:
👀Advanced TypeScript Playlist
📕TypeScript Deep Dive
Как использовать assert для улучшения читабельности кода?
#typescript

В javascript разработки мы обычно используем assert в коде тестов, но не в коде приложения. Мой опыт работы с koa читабельность кода с assert получается выше.

Пример из библиотеки koa:
ctx.assert(ctx.state.user, 401, 'User not found. Please login!');
Т.е. если пользователь не найден, будет выкинута ошибка с указанным текстом и статусом 401. Дальше по коду вы можете быть уверены, что ctx.state.user определен. Для этого используется пакет http-assert.

Причем TypeScript автоматически изменит тип выражения. Это достигается за счет использования Assertion Functions, который появились с версии 3.7. Пример такой функции:
function assertIsString(val: any): asserts val is string {
if (typeof val !== "string") {
throw new AssertionError("Not a string!");
}
}

К сожалению, Nest.js и Fastify из коробки не имеют встроенного assert, поэтому приходиться писать свой маленький хелпер. Оставлю его вам на самостоятельную реализацию.
Подборка книг для изучения TypeScript
#list #typescript

В сегодняшней подборке все книги на английском языке. Читайте на английском. Это позволит вам изучать устоявшуюся терминологию. Вы ведь не ходите называть Promise Обещанием, а Tuple Кортежем?

📕The TypeScript Handbook. В марте 2021 команда переписала руководство и держит его актуальным после каждого релиза. Поэтому обучение начинайте именно с него. Книгу можно скачать бесплатно, в конце странице grab a copy in Epub or PDF form.

📕Effective TypeScript. Книга от O'Reilly в формате принципов языка с объяснением почему стоит делать именно так. Например: Prefer Type Declarations to Type Assertions

📕Programming TypeScript by Boris Cherny. Еще одна книга от O'Reilly с фокусом на реальной практике применения. Каждая глава заканчивается упражнениями для закрепления теории.

📕TypeScript 4 Design Patterns and Best Practices Свежая книга, которая не только показывает фичи языка, но и паттерны их использования.
llhttp - new HTTP 1.1 parser for Node.js
#worth_seeing #typescript

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

В докладе Федор рассказывает как и зачем был переписан http_parser. Произошло это в 2019. Кодовая база http_parser на чистом С перестала быть поддерживаемой. Ее переписали на С + TypeScript и назвали llparse. Его исходный код стоит изучить с целью улучшения как своих навыков работы с TypeScript, так и понимания принципов работы http в целом.

Ссылки:
👀 Видео
📕 Сайт
⚙️ GitHub
Навіщо потрібне infer у TypeScript
#typescript

Ключове слово infer — це потужний інструмент, який дозволяє розгортати та зберігати типи під час роботи з чужим TypeScript кодом. Воно не може використовуватися без Conditional Types та поза пропозицією extends. Infer дозволяє визначити змінну в межах нашого обмеження, на яку буде посилатися або повертати.

наприклад, так можна отримати тип першого аргументу функції:
type GetFirstArgumentOfAnyFunction<T> = T extends (
first: infer FirstArgument,
...args: any[]
) => any
? FirstArgument
: never
Зверніть увагу, що описати це тільки через генерики неможливо.
Як змінити модифікатор TypeScript?
#typescript

Версія TypeScript 2.8 додала можливість додавати або видаляти складовим типам модифікатори readonly та ?. Для цього використовують очевидні оператори + і -. Детальніше в документації. Приклад використання:

interface ReadOnlyTodo {
readonly title: string
readonly description: string
readonly completed: boolean
}
type Mutable<T extends object> = {
-readonly [K in keyof T]: T[K]
}
type MutableTodo = Mutable<ReadOnlyTodo>

Рецепти на тему:
- Як підтягнути TypeScript?
​​Поділюся досвідом використання transform.tools. Частіше всього я використовую JSON To #TypeScript. Після трансформації можуть знадобитися правки, наприклад, додати enum. Приклади використання:
– додати інтерфейс події для Google Cloud Function. В ідеальному світі це вже повинно бути в SDK.
– описати інтерфейси запитів і відповідей для інтеграції зі стороннім API, у якому є текстова документація, але не специфікація. Якби була специфікація, наприклад Swagger, то правильно було б створити типи з неї.

Простий інструмент, який може заощадити час, тож про нього потрібно пам'ятати.
Як правильно налаштувати TypeScript?
#typescript

Більшість стартерів генерує неправильний tsconfig.json. Наприклад, після nest new project-name необхідно правильно налаштувати compilerOptions.target. Детальніше

Є такий репозиторій tsconfig/bases. З нього генеруються пакети виду @tsconfig/node18. Я рекомендую починати tsconfig.json із "extends": "@tsconfig/node18/tsconfig.json" і перевизначати тільки потрібні параметри. Для фанатів типізації можна використовувати @tsconfig/node18-strictest

Детальніше в репозиторії. Там, до речі, є і React.
Які tsconfig файли створювати?
#typescript

Ще один рецепт з налаштування TypeScript. З допомогою --project можна визначити який файл з налаштуваннями використовувати. Приклад із одного з моїх проектів.
"scripts": {
  "build": "tsc --project tsconfig.build.json",
  "test": "jest --config jest.config.ts",
  "typecheck": "tsc --project tsconfig.json",
  "watch": "tsc --project tsconfig.dev.json --watch"
 },

У цьому проекті використовується 4 файли:
👉 tsconfig.json успадковується від @tsconfig. Від нього успадковуються всі інші. Використовується для перевірки типів у команді typecheck.
👉 tsconfig.build.json використовується під час збирання Docker image. Тільки він має "noEmit": false
👉 tsconfig.dev.json відключає правила, які зайві в процесі розробки або troubleshooting. Наприклад: "noUnusedLocals": false
👉 tsconfig.test.json використовується для тестів. Саме його я вказую у jest.config.ts

Кількість файлів буде залежить від вашого проекту та й використовуваних процесів. Просто пам'ятайте налаштування можна міняти в залежності від контексту запуску TypeScript.
Правильний перехід на typescript v5
#typescript

На відміну від решти JavaScript екосистеми, TypeScript не слідує SemVer. Тобто немає різниці в переході між 4.8➡️4.9 та 4.9➡️5.0. В обох випадках можливі breaking changes.

Однак багато пакетів не використовують цю інформацію та в залежностях вказують, що очікують TypeScript@4.x. Приклад помилки під час install:
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@"^3.7.5 || ^4.0.0" from eslint-plugin-deprecation@1.3.3
npm ERR! node_modules/eslint-plugin-deprecation
npm ERR!  dev eslint-plugin-deprecation@"^1.3.3" from the root project
Помилки під час встановлення це не страшно. Ось важкоуловимі баги під час компіляції – це великі втрати часу на налагодження. Рецепт написаний за підсумком саме такого налагодження.

Обидва типи проблем легко вирішуються за допомогою npm overrides або yarn resolutions у package.json:
"typescript": "^5.0.2"
},
"overrides": {
"typescript": "$typescript"
}

$typescript каже npm перевикористовувати вказану версію для всіх пакетів. Тепер ваш код використовуватиме потрібну версію тайпскрипту під час компіляції.
Як швидко перейти на return await?
#eslint #typescript

Спочатку коротко розповім, навіщо це робити. Помилки в логах записуються у stack trace. Якщо функція повертає not resolved promise, то у stack trace буде дірка. Приклади коду та докладний розбір є у Node.js Best Practices 2.12 Always await promises before returning to avoid a partial stacktrace

Минулого тижня я занурився у debugging. Проблема була замаскована обірваними stack trace. Виявляється, що позбутися цього можна дуже швидко. Достатньо додати @typescript-eslint/return-await . Він має автофікс! Після eslint --fix дебаг втратив детективний сюжет, бо стало очевидним, що проблема у відсутності транзакцій на рівні бази даних. Так що додайте це правило до вашого проекту, щоб наступне налагодження пройшло швидше.
#typescript

На вихідних вийшла нова версія VSCode розширення pretty-ts-errors. Воно додає до вашого редактора:
👉 підсвічування синтаксису для типів у повідомленнях про помилки
👉 кнопка, яка відкриває оголошення відповідного типу поруч з типом у повідомленні про помилку.
👉 кнопка, яка відкриває помилку на typescript.tv
👉 кнопка, яка відкриває помилку на ts-error-translator

Якщо ви ще не користуєтеся цим розширенням, рекомендую встановити. pretty-ts-errors дуже спрощує роботу джунів та їх менторів.

Автор просить підтримати лайками додавання до VSCode необхідного API. Якщо ви віддаєте перевагу WebStorm, то ставте лайк JetBrains support. Будь ласка, ⚠️використовуйте лайк, а не коментарі⚠️ – це дозволить робити правильні метрики без спам сповіщень через коментар.

Посилання
🔗 source code
🔗 VSCode marketplace
🔗 upvotes to move forward
Як забезпечити іммутабельність у вашому коді?
#typescript
⚠️Уточнення для новачків іммутабельності це незмінність даних.
У заголовок винесено одне з моїх улюблених питань для співбесід. Наведу найкращу-гіршу відповідь як я почув її в оригіналі: "TypeScript provides readonly, but it is only compile-time immutable protection. So I prefer to use Immutable.js for my codebase. I've also used Object.freeze()"

Поясню чим саме ця відповідь погана для продуктової розробки: у продуктовому коді розробник має повний контроль усіх етапів створення, зміни та знищення даних. Це не код бібліотеки або фреймворку, який невідомо, як буде запущений. Це код продукту, який буде працювати повільніше через використання Immutable.js або Object.freeze().

TypeScript має відмінний функціонал:
➡️ readonly у параметрах інтерфейсів
➡️ генерік Readonly, який особливо зручний для аргументів ваших функцій
➡️ as const під час оголошення змінних

Цей функціонал покриває всі потреби продуктового коду і не впливає на run time. Для консистентності використання цих фічів є @typescript-eslint/prefer-readonly-parameter-types. Так же можливо написати свої eslint правила, щоб команда не забувала про readonly в іммутабельних структурах даних, наприклад DTO.

Щось таке я хотів би почути на інтерв'ю на вищеназване запитання. Це та ще трохи критики, що readonly як і інші TypeScript конструкції роблять код багатослівним та схожим на Java.