Как TypeScript помогает вам стать лучшим разработчиком JavaScript

От автора: что общего у Airbnb, Google, Lyft и Asana? Все они перенесли несколько кодовых баз в TypeScript. Наши люди любят самосовершенствование, будь то здоровое питание, физические упражнения или крепкий сон. То же самое относится и к нашей карьере. Если кто-то делится советами о том, как стать лучшим программистом, вы будете слушать внимательно.

Цель этой статьи заключается именно в этом. Мы знаем, что TypeScript сделает вас лучшим разработчиком JavaScript по нескольким причинам. Вы будете чувствовать себя уверенно при написании кода. Меньше ошибок в вашем рабочем коде. Рефакторинг кода будет проще. Вы будете писать меньше тестов (ууу!). И в целом, у вас будет лучший опыт написания кода в редакторе.

Что такое TypeScript?

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

Вот базовый пример функции в JavaScript и TypeScript:

function helloFromSitePoint(name) { return `Hello, ${name} from SitePoint!`
} function helloFromSitePoint(name: string) { return `Hello, ${name} from SitePoint!`
}

Обратите внимание, что они почти идентичны. Разница заключается в аннотации типа для параметра «name» в TypeScript. Это говорит компилятору: «Эй, убедитесь, что когда кто-то вызывает эту функцию, он передает только строку». Мы не будем вдаваться в подробности, но этот пример должен проиллюстрировать минимальный уровень TypeScript.

Как TypeScript сделает меня лучше?

TypeScript улучшит ваши навыки как разработчика JavaScript благодаря:

Давайте рассмотрим каждый из этих аспектов немного глубже.

Больше уверенности

TypeScript повысит вашу уверенность при работе в незнакомых базах кода и в больших командах. Если вы знаете TypeScript и присоединяетесь к новой команде или новому проекту, который использует TypeScript, вы будете меньше беспокоиться. Вы знаете, что TypeScript протянет вам руку помощи. Язык обеспечивает большую читаемость и предсказуемость кода, потому что вы можете посмотреть на что-то и сразу понять, как это работает. Это прямой результат системы типов.

Параметры функций аннотированы, поэтому TypeScript знает допустимые типы для передаваемых вами значений.

type Color = "red" | "blue" | "green" // Here, you know color must be of type "Color", meaning one of the three options
function printColor(color: Color) { console.log(`The color you chose was: ${color})
}

Типы возвращаемых функций будут выводиться или аннотироваться.

function sum(a: number, b: number) { // TS infers the return type as number return a + b
} function minus(a: number, b: number): number { // We annotate the return type as number return a - b
}

Часто с помощью TypeScript код вашего партнера по команде говорит сам за себя. Им не нужно объяснять его вам, потому что типы добавляют контекст к коду. Эти функции позволяют доверять команде больше. Вы работаете на более высоком уровне, потому что проводите меньше времени, беспокоясь о глупых ошибках. Это работает так же и для вашего кода. TypeScript заставляет вас писать явный код. Побочным эффектом является мгновенное повышение качества кода. В конце вы почувствуете себя более уверенно, работая в TypeScript.

Меньше ошибок в производстве

TypeScript перехватывает возможные ошибки во время компиляции, а не во время выполнения. Когда вы пишете код, TypeScript будет ругаться, если что-то пошло не так. Например:

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

Более простой рефакторинг

Рефакторинг кода становится с TypeScript проще, потому что он перехватывает ошибки. Если вы переименуете функцию, она сообщит вам, если вы забудете где-нибудь использовать новое имя. Когда вы изменяете форму интерфейса или типа и удаляете свойство, которое, по вашему мнению, не использовалось, TypeScript исправит вас. При любых изменениях, которые вы производите в коде, TypeScript будет тем, кто скажет вам: «Эй. Ты забыл сменить имя в строке 142». Я слышал, что кто-то однажды назвал это «непрерывным рефакторингом», потому что вы можете быстро выполнять рефакторинг больших частей кодовой базы. Это прекрасная вещь, которая открывает большие возможности для будущего.

Меньше модульных тестов

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

interface User { name: string; age: number;
} function getAge(user: User) { return user.age
}

Нам больше не нужен модульный тест, чтобы убедиться, что getAge вызывается с соответствующим типом значения. Если разработчик попытается вызвать getAge с числом, TypeScript выдаст ошибку, сообщающую, что типы не совпадают. В результате это позволяет нам тратить меньше времени на написание простых модульных тестов и больше времени на написание того, что нам нравится больше.

Лучший опыт кодирования в редакторе

Одна из областей, где TypeScript принесет вам наибольшую пользу — это производительность через автозаполнение и «будущий» JavaScript. Большинство основных IDE и редакторов, включая Atom, Emacs, Vim, VSCode, Sublime Text и Webstorm, имеют плагины для инструментов TypeScript. Мы будем ссылаться на некоторые функции, доступные в VScode для этого раздела.

Первая функция, которая увеличит вашу производительность — это автозаполнение. Это помогает, когда вы ищете метод или свойство класса или объекта. Если TypeScript знает форму, он может автоматически заполнить имя. Вот пример:

Обратите внимание, что я не закончил вводить свойства для myFriend. Здесь вы видите, что TypeScript начинает предлагать имя свойства, потому что оно знает, что форма соответствует User.

Я пишу функцию под названием printUser. Я хочу записать полное имя пользователя в консоль. Я иду к определению lastName и вижу красную волнистую линию. При наведении курсора на него в редакторе TypeScript говорит мне: «Property ‘lastName’ does not exist on type ‘User’». Это супер полезно! Это позволило найти мою глупую ошибку. Довольно аккуратно, правда?

Вторая особенность, которая улучшает наш опыт — это способность TypeScript предоставлять возможность писать «будущий» JavaScript. Обычно для этого нам нужно несколько плагинов Babel. TypeScript, в то же время, предоставляет эту же функцию, но за счет одной зависимости. Команда TypeScript отлично справляется со спецификацией ECMAScript, добавляя языковые возможности Stage 3 и выше. Это означает, что вы можете использовать новые дополнения к JavaScript, не мешая множеству зависимостей или конфигурации. Это позволит вам опередить своих коллег по JavaScript. Обе эти функции в сочетании повысят вашу эффективность в качестве разработчика JavaScript.

Попробуйте сами!

Важно слышать мнение других, но ничто не сравнится с формированием собственного мнения на основе опыта. Мы знаем, что TypeScript повысит вашу уверенность, поможет вам быстрее выявлять ошибки и реорганизовывать код, а также улучшит общую производительность. А теперь попробуйте TypeScript сами и дай нам знать, что вы думаете!

Автор: JavaScript Joe

Источник: https://www.sitepoint.com

Редакция: Команда webformyself.