Всем привет!
Меня зовут Али Рагимов aka @barinbritva. В веб-разработке около 9 лет. Начинал со стека PHP + jQuery в… twitter.com/i/web/status/1…

Последние полгода занимаюсь различной публичной деятельностью. Основная повестка – TypeScript. За это время я углуб… twitter.com/i/web/status/1…

Если вы ещё не работали с TypeScript, то вот немного крафтового материала от меня, чтобы войти в контекст:

Введени… twitter.com/i/web/status/1…

TS начинается с файла tsconfig.json, где хранится конфигурация компилятора и проекта. Но ему часто не уделяют должн… twitter.com/i/web/status/1…

Но в одном проекте пришлось заняться сборкой более плотно. Возникала потребность разобраться в многочисленных опция… twitter.com/i/web/status/1…

При этом конфиг будет содержать большое множество закомментированных опций с их описанием. Читаем описание опции, е… twitter.com/i/web/status/1…

Много путаницы может возникать при указании файлов для компиляции. Речь идёт о директивах files, include, exclude.… twitter.com/i/web/status/1…

Обычно используется include с указанием массива масок путей, например ["src"]. Поэтому опцию files использовать нет… twitter.com/i/web/status/1…

Это можно заметить выполнив малоизвестную команду tsc --showConfig. Несмотря на то, что мы указали в конфиге лишь i… twitter.com/i/web/status/1…

К сожалению, команда не демонстрирует другие особенности готовки итогового конфига. А их, на самом деле, очень мног… twitter.com/i/web/status/1…

Что же будет если указать и files и include? TS просто сделает merge. С включением файлов разобрались. А что на счё… twitter.com/i/web/status/1…

Соответственно, exclude не может исключить файлы, указанные в files. Так же exclude не сможет исключить файл, если… twitter.com/i/web/status/1…

С input'ом файлов разобрались. Немного про output. У нас есть 2 опции outDir и outFile. Первой, думаю, пользуются в… twitter.com/i/web/status/1…

Именно такие мысли были у меня, когда я увидел эту опцию. Но не тут-то было. Почему?
Потому что outFile не работает… twitter.com/i/web/status/1…

Наверняка, вам приходилось и не раз писать подобное?

import * as React from 'react'

React содержит CommonJS синта… twitter.com/i/web/status/1…

Но включив флаг allowSyntheticDefaultImports в tsconfig, мы можем сделать ещё один шаг к унификации импортов и писа… twitter.com/i/web/status/1…

Разумеется, это работает и с другими библиотеками. Но бывают случаи, когда после таких трюков проект собирается, но… twitter.com/i/web/status/1…

Исправить ситуацию позволяет флаг esModuleInterop. Он добавляет некоторый бойлерплейт в экспорт модулей, который де… twitter.com/i/web/status/1…

Пожалуй, для меня это личное. После того как в 2015 я писал первый проект на TS без понимания про тайпинги и модуль… twitter.com/i/web/status/1…

А последнее время мне кажется отличной идея полностью отказаться от дефолтных экспортов. Подсмотрел у… twitter.com/i/web/status/1…

Но не суть.

Если вас заинтересовали подробности тюнинга tsconfig, то предлагаю вашему вниманию статью, в которой я… twitter.com/i/web/status/1…

Как верно было замечено, TS из коробки не сильно отличается от JS. Это сделано для обратной совместимости - далеко… twitter.com/i/web/status/1…

В официальной документации эти флаги раскиданы по секциям Strict Checks, Linter Checks и ещё немного в Advanced. С… twitter.com/i/web/status/1…

Вот первая группа флагов – Strict Checks. Это самая понятная секция. По умолчанию все флаги выключены. Но в примере… twitter.com/i/web/status/1…

Путаница возникает только с alwaysStrict и strict.
alwaysStrict на самом деле не относится к проверкам, а лишь доба… twitter.com/i/web/status/1…

У такого подхода есть несколько недостатков:
* нет наглядного отображения, какие именно флаги задействованы
* после… twitter.com/i/web/status/1…

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

Теперь расскажу какие ф… twitter.com/i/web/status/1…

TS начинается с noImplicitAny: true
Два слова про any. Это тип, который назначается всем переменным, если тип не бы… twitter.com/i/web/status/1…

С переменной типа any можно делать что угодно, как мы привыкли это делать в JS. Но мы не для этого пишем на TS

noI… twitter.com/i/web/status/1…

Это стоит использовать лишь в крайнем случае, когда никак не получается определить или подружить типы

TS код это к… twitter.com/i/web/status/1…

В JS два нижних типа null и undefined

В TS по умолчанию переменная любого типа может содержать значение null или u… twitter.com/i/web/status/1…

Установив strictNullChecks: true мы предохраняем себя от подобных ситуаций

С эти флагом мы должны явно разрешать п… twitter.com/i/web/status/1…

Установив strictFunctionTypes: true мы включаем более строгую проверку сигнатур функций pic.twitter.com/mUCqVZuMlr

Вот теперь это больше похоже на TypeScript! Так сказать джентельменский набор TS разработчика

Оставшиеся флаги, ко… twitter.com/i/web/status/1…

strictPropertyInitialization - следит, чтобы свойства класса были проинициализированы. Дополнение к strictNullCheck… twitter.com/i/web/status/1…

strictBindCallApply - более строго проверят сигнатуры при использовании соответствующих методов: bind, call, apply pic.twitter.com/iH4iILnN4f

Подведём итоги секции Strict Checks:

* здесь действительно все флаги очень полезные. С ними TS раскрывает свой пот… twitter.com/i/web/status/1…

Следующая секция - Linter Checks. Название подразумевает, что это не про компиляцию, а качество кода. И эти проверк… twitter.com/i/web/status/1…

В анонсах флагов noPropertyAccessFromIndexSignature и noUncheckedIndexedAccess было написано, что эти флаги не поме… twitter.com/i/web/status/1…

noPropertyAccessFromIndexSignature запрещает обращаться к свойствам объекта через точку, если свойства не объявлены… twitter.com/i/web/status/1…

Если мы объявляем переменную как let a: string[], то объекты, полученные по любым индексам a[0], a[1000] будут имет… twitter.com/i/web/status/1…

Оставшиеся же флаги можно легко заменить аналогичными правилами eslint

noFallthroughCasesInSwitch -… twitter.com/i/web/status/1…

Секция Advanced отличается от предыдущих тем, что содержит помимо флагов строгости множество других (их мы пропусти… twitter.com/i/web/status/1…

allowUnreachableCode разрешает недосягаемый код - код, написанный после операторов return, throw, break, continue… twitter.com/i/web/status/1…

Мы запрещаем это поведение установкой false или настройкой eslint

allowUnreachableCode - eslint.org/docs/rules/no-…… twitter.com/i/web/status/1…

С последними 4 флагами ничего не делаем - с ними всё хорошо. Скажу лишь, что noImplicitUseStrict это немного иначе… twitter.com/i/web/status/1…

А noStrictGenericChecks, suppressExcessPropertyErrors и suppressImplicitAnyIndexErrors запрещают практическое явное… twitter.com/i/web/status/1…

Итак, вот наш итоговый, реорганизованный, самый строгий tsconfig!

gist.github.com/barinbritva/cf… pic.twitter.com/1LF5P3O1QY

Чтобы всё это добро не cмешивалось с другими опциям конфига мы можем прибегнуть к директиве extends

1 Создаём tsco… twitter.com/i/web/status/1…

Различия any и unknown

Оба этих типа означают, что тип переменной не определён. Но вот поведение этих типов диамет… twitter.com/i/web/status/1…

Но мы не для этого в предыдущем треде делали TS таким строгим. Видимо, команда TS думала так же и создала тип unkno… twitter.com/i/web/status/1…

Перед использованием unknown переменной, нужно выявить её тип. Для этого придётся писать проверки

Другими словами,… twitter.com/i/web/status/1…

Для наглядности приведу пример, где any и unknown в роли возвращаемых значений pic.twitter.com/ecknaH6XEJ

Думаю, что на вопрос когда и в каких случаях нужно использовать unknown справедливо будет ответить:

Как только вы… twitter.com/i/web/status/1…

Сегодня думал сделать тред про сборку. В плоскости bable-loader и ts-loader

С одной стороны, для некоторых станови… twitter.com/i/web/status/1…

Раз спрос есть, расскажу основные моменты и покидаю полезного материала 😉

Если мы пишем код на TS для Node - backe… twitter.com/i/web/status/1…

Эту связку можно считать стандартом индустрии. Логично использовать её и в проекте с TS. Для этого есть babel/prese… twitter.com/i/web/status/1…

Другими словами, плагин умеет лишь удалять синтаксис TS из кода и превращать его обратно в JS 😱

Проблему можно реш… twitter.com/i/web/status/1…

Вариант ts-loader + babel-loader имеет место быть

Однако, тут много проблем. Больше зависимостей, сложнее конфигур… twitter.com/i/web/status/1…

Вариант babel-loader, проверка типов отдельно - пожалуй самый распространённый

Интегрируем preset-typescript и сбо… twitter.com/i/web/status/1…

Сделать это можно дёшево и сердито, запустив рядом tsc --watch --noEmit

watch запускает tsc на изменение файлов, а… twitter.com/i/web/status/1…

Хорошо детали подобной настройки описаны в этой статье

iamturns.com/typescript-bab…

Там же есть некоторые спойлеры о т… twitter.com/i/web/status/1…

Но если не хотите запускать проверку типов в отдельной вкладке, то можно интегрировать её в основной процесс сборки… twitter.com/i/web/status/1…

Думаю, что этот подход под номером №2 можно назвать эталонным способом готовки TS в 2021. Как минимум он самый расп… twitter.com/i/web/status/1…

Пока хотел бы попросить вас накидать вариантов, что вам нравится в babel и какие его возможности для вас must have?… twitter.com/i/web/status/1…

Если вы не пользуетесь возможностями экосистемы babel, а просто транспилите код, то есть смысл рассмотреть вариант… twitter.com/i/web/status/1…

Тут описаны 2 варианта как готовить полифилы:
mydatahack.com/adding-polyfil…

Это лишняя работа, которой заниматься не хоч… twitter.com/i/web/status/1…

Babel не поддерживает некоторые фичи TS. Таких фич немного:
babeljs.io/docs/en/babel-…

Я сталкивался только с отсутст… twitter.com/i/web/status/1…

Я замечал, что Babel генерирует более лаконичный бойлерплейт, чем TS

Но в TS можно сделать так:
* npm install tsli… twitter.com/i/web/status/1…

В одном из проектов, над которым я работаю, 20+ babel пакетов. Практически каждая синтаксическая конструкция это от… twitter.com/i/web/status/1…

На другой чаше весов всего 2 зависимости - typescript и ts-loader и всё управление декларативно через конфиг

Поэто… twitter.com/i/web/status/1…

Кстати, не обязательно писать на TS, чтобы собирать проект через tsc или ts-loader. Вы можете собрать свой проект н… twitter.com/i/web/status/1…

Вот такие 3 варианта мы сегодня рассмотрели

В комментариях предложили замечательный 4-й, который я теперь хочу поп… twitter.com/i/web/status/1…

Вот и подошла к концу моя неделя. Надеюсь, вам было интересно, а главное полезно!

Для меня это был безусловно ценн… twitter.com/i/web/status/1…