Найти в Дзене
ProWeb

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

Всем привет! На данный момент TypeScript является лучшим вариантом для написания клиентских сценариев без использования JavaScript. Он позволяется писать веб-приложения более чистым способом. Для того чтобы извлечь из этого максимальную пользу, важно следовать лучшим практикам, которые применяются в Typescript. Меня зовут Антон. Я занимаюсь front-end разработкой и сейчас я расскажу вам об лучших практиках, используемых в Typescript. Указывайте правильный тип данных Указание типа данных во время написания кода - одно из главных преимуществ, которые вы получаете при кодировании в TS, в то время как JS определяет типы данных во время выполнения. Определение типов данных в TS избавляет вас от странных ошибок во время выполнения, которые могут возникнуть из-за ошибок. Не используйте ключевое слово "any", если вы знаете, какой тип данных будет храниться в вашей переменной. Рекомендуется всегда определять тип данных при объявлении новой переменной. Включайте строгую проверку Функция "use
Оглавление

Всем привет! На данный момент 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