Найти тему
ProWeb

TypeScript: лучшие практики

Оглавление

Всем привет! На данный момент TypeScript является лучшим вариантом для написания клиентских сценариев без использования JavaScript. Он позволяется писать веб-приложения более чистым способом. Для того чтобы извлечь из этого максимальную пользу, важно следовать лучшим практикам, которые применяются в Typescript.

Меня зовут Антон. Я занимаюсь front-end разработкой и сейчас я расскажу вам об лучших практиках, используемых в Typescript.

Указывайте правильный тип данных

Указание типа данных
Указание типа данных

Указание типа данных во время написания кода - одно из главных преимуществ, которые вы получаете при кодировании в TS, в то время как JS определяет типы данных во время выполнения. Определение типов данных в TS избавляет вас от странных ошибок во время выполнения, которые могут возникнуть из-за ошибок. Не используйте ключевое слово "any", если вы знаете, какой тип данных будет храниться в вашей переменной. Рекомендуется всегда определять тип данных при объявлении новой переменной.

Включайте строгую проверку

Strict mode
Strict mode

Функция "use strict" была добавлена в JavaScript в ES5. Это имеет буквальное значение, которое гласит: “код должен быть в строгом режиме”. В коде TS вы можете найти ‘строгую’ конфигурацию в файле tsconfig.

Использование этого режима спасает от непреднамеренных или глупых ошибок, таких как: использование необъявленной переменной, не использование any типов или попытка использовать зарезервированное в будущем ключевое слово в качестве имени переменной и т.д., ‘use strict’ помогает вам писать хороший и безопасный код, показывая плохие практики написания кода в виде синтаксических ошибок.

Используйте ‘let’ вместо ‘var’

-4

Ключевое слово var - ваш старый добрый друг, в то время как let появился в версии ES6. Let и const были введены, чтобы уменьшить некоторые недостатки, которые TS имел при работе с var.

Var - это либо глобальная область, либо объявление локальной области. Переменная типа var становится переменной с глобальной областью действия, когда она определена вне функции/блока. В этом случае переменная доступна для использования в любом месте вашего скрипта. Var становится локально ограниченной, когда она определена внутри функции.

У var есть несколько недостатков. Переменная объявленная с var может быть повторно объявлена, а может быть вызвана без объявления. Typescript не покажет никакой ошибки, но в конечном итоге вы получите неожиданные результаты.

-5

Чтобы избежать такую ситуацию, вам следует вместо этого использовать let. let - это объявление переменной в ограниченной области видимости. И вы не можете повторно объявить переменную. Но вы можете объявить одно и то же имя переменной в разных областях видимости, и каждая из них будет рассматриваться как отдельные переменные.

Разные области видимости
Разные области видимости

Используйте ‘const’ для констант

-7

Const появился в кадре вместе с let. const также является переменной с блочным или функциональным типом области видимости. Также мы не можем повторно объявить const. Таковы сходства между let и const.

Однако переменные объявленные с const не могут быть обновлены (мы могли бы обновить с помощью let). Поэтому всегда используйте const, когда вы объявляете константу.

Используйте кортежи для массивов фиксированной длины

-8

Вы можете использовать приведенный нижу массив ‘marks’ для хранения разного количества элементов в разных местах одного и того же скрипта.

-9

Однако это может привести к неприятным логическим ошибкам в случаях, когда длина массива является постоянной. Чтобы избежать этого, вы должны использовать массив в качестве кортежа всякий раз, когда размер должен быть фиксированным. Кортеж - это правильно определенный массив с каждым типом данных ожидаемого значения.

-10

Выбирайте между ‘any’ and ‘unknown’

Any и unknown делает то же самое на первый взгляд. Они помогут вам легко преобразовать JS в TS, когда JS не дает вам ни малейшего представления о типах данных. В подобных сценариях или когда вы на самом деле не знаете, какого типа данные ожидать, на помощь приходят any и unknown. Но даже у них есть разница.

-11

Однако вы можете делать все, что угодно, с помощью ‘any’, когда дело доходит до вызова функций.

-12

Но вы не можете сделать это с unknown

-13

Избегайте ненужных комментариев

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

Используйте линтер

Важно использовать линтер, если вы не хотите загрязнять свой код. Это особенно важно, когда вы работаете в команде. У разных разработчиков разные привычки к написанию кода. Поэтому следует использовать линтер, чтобы все разработчики непреднамеренно соглашались с одним и тем же набором правил. Когда дело доходит до линтеров, лучшим вариантом является ESLint. Он совместим как с JavaScript, так и с Typescript.

Используйте средство форматирования кода

-14

Использование хорошего средства форматирования делает ваш код более эффективным и чистым. Исходя из моего личного опыта, я предпочитаю использовать Prettier в VS code. Но существует другое множество средств форматирования кода, и выбор зависит от вас и от используемого вами редактора.

#code #frontend #программирование #it #работа #typescript #web #proweb