Что нового в TypeScript 4.3?
#typescript

Вчера вышла новая версия TypeScript 4.3.

Основной фокус релиза в работе с классами. Сюда входят:
➡️ новое ключевого слово override указывающее, что метод переопределен в ходе наследования. Выкидывает ошибку, если у родителя нет метода
➡️ разделение типов для getter и setter (Separate Write Types on Properties)
➡️ Улучшена поддержка приватных ECMAScript #private
➡️ static Index Signatures
➡️ Type helperConstructorParameters теперь работает и с абстрактными классами

Связанное с типами:
➡️ Always-Truthy Promise Checks, для случаев аналогичных eslint правилуrequire-await
➡️ Template String Type Improvements, нужная вещь если у вас сложная бизнес логика в зависимости от строк.
➡️ Улучшено определение типа по контексту (Contextual Narrowing for Generics).

Улучшения процесса сборки:
➡️ Размер .tsbuildinfo теперь меньше
➡️ Инкрементная сборка в первый раз теперь идет так же быстро как и обычная. Наконец-то можно выкинуть tsconfig.dev.json!

Улучшения IDE поддержки, работает за счет TypeScript’s language service. Важно для VS Code, не важно для JetBrains.
➡️ Import Statement Completions
➡️ @link в js-doc
➡️ Go-to-Definition on Non-JavaScript File Paths

Какие директивы есть в TypeScript и зачем их использовать?
#typescript

Директива это комментарий, который говорит TypeScript компилятору изменить свое поведение. Существуют Triple-Slash Directives, которые выходят за рамки этого рецепта. Их использование оправдано при создание библиотек, но не приложений.

Сегодня же речь об директивах начинающихся@ts-. На текущий момента, в версии TypeScript 4.2, их существует 4:
➡️ // @ts-check – применяется только в начале javascript файла. Используется в ходе перехода с JS на TS. Для typescript файлов не применим.
➡️ // @ts-nocheck – применяется только в начале файла. Все ошибки в файле будут проигнорированы. Используется и в JS, и в TS. Рекомендован в случае перехода на TS.
➡️ // @ts-ignore – возможная ошибка на следующей строке будет проигнорирована.
➡️ // @ts-expect-error – ошибка на следующей строке будет проигнорирована. Если ошибки нет, то TypeScript компилятор выкинет ошибку Unused '@ts-expect-error' directive. Использование предпочтительней, чем @ts-ignore.

Каноническим примером использования @ts-expect-error является обращение к приватному свойству в unit тесте.

Тут можно прочитать рекомендацию, что в каком случае использовать @ts-expect-error или @ts-ignore. Выработанную договоренность лучше закрепить на уровне линтинга с помощью @typescript-eslint/ban-ts-comment.

Что такое AssemblyScript?
#typescript

Универсальный способ оптимизации производительности для JavaScript разработчика это перенос вычислений в WebAssembly. Упрощенно говоря это значит написать требуемый код на C++ или его аналогах.

AssemblyScript решает проблему "мне нужен WASM, но нет ресурсов чтобы изучить новый язык". По сути AssemblyScript это тот же TypeScript с WASM типами и уже настроенным компилятором. Это решение хорошо тем, что подойдет и для Node.js, и для браузера.

Для большинства проектов это решение будет over-engineering, но там где есть CPU intensive задачи я рекомендую это решение.

Как писать меньше 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