Что общего у 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 в качестве разработчика JavaScript.
Меньше производственных ошибок
TypeScript будет ловить ваши возможные производственные ошибки во время компиляции, а не во время выполнения. Когда вы пишете код, TypeScript будет кричать на вас, если что-то не так. Например, взгляните на этот пример:
Заметили, как цвета имеют волнистый красный цвет? Это потому, что мы используем .forEach, но это может быть underfined (неопределенным). Это может привести к ошибке в производстве. К счастью, TypeScript будет сообщать нам, пока мы пишем код, и не скомпилирует его, пока мы его не исправим. Как разработчик, вы должны увидеть ошибку, а не ваш пользователь. TypeScript почти всегда устраняет эти типы ошибок, потому что вы видите их, когда ваш код компилируется.
Рефакторинг проще
Рефакторинг кода становится проще с TypeScript, потому что он будет ловить ошибки для вас. Если вы переименуете функцию, она сообщит вам, если вы забудете где-нибудь использовать новое имя. Когда вы измените форму интерфейса или тип и удалите свойство, которое, по вашему мнению, не использовалось, TypeScript исправит вас. Какие бы изменения вы не совершали в коде, TypeScript будет тем, кто вслед за вашими действиями будет говорить: «Эй. Вы забыли сменить имя в строке 142». Я слышал, что кто-то однажды назвал это «непрерывным рефакторингом», потому что вы можете быстро рефакторировать большие части кодовой базы. Это прекрасно и это становится еще удобнее в будущем.
Меньше юнит-тестов
TypeScript устраняет необходимость в некоторых модульных тестах, таких как тесты сигнатур функций (function signature tests). Возьмите эту функцию, например:
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 говорит мне: «Свойство «lastName» не существует для типа «User». Это супер полезно! Он поймал мою глупую ошибку. Довольно круто, правда?
Вторая особенность, которая улучшает наш опыт, – это способность TypeScript позволить вам писать «будущий» JavaScript. Обычно для этого нам нужно несколько плагинов Babel. TypeScript, с другой стороны, предоставляет эту же функцию, но за счет одной зависимости. Команда TypeScript отлично справляется со спецификацией ECMAScript, добавляя языковые возможности Stage 3 и выше. Это означает, что вы можете использовать новые дополнения к JavaScript, не мешая множеству зависимостей или конфигурации. Это позволит вам опередить своих коллег по JavaScript. Обе эти функции в сочетании повысят вашу эффективность в качестве разработчика JavaScript.
С чего начать?
Если вы заинтересованы в начале работы с TypeScript, вот несколько мест, с которых вы можете начать.
TypeScript за 5 минут.
Краткое руководство по TypeScript Handbook даст вам практический опыт работы с языком. Он проведет вас через основные функции языка. Все, что вам нужно, – это пять минут, редактор и готовность учиться.
Введение в TypeScript.
Если вы хотите пойти дальше, мы рекомендуем эту статью для начинающих, которая будет охватывать несколько основных понятий и запускать TypeScript локально.
Программирование TypeScript Борисом Черным.
Для тех, кто любит углубляться – и мы имеем в виду глубоко – ознакомьтесь с этой книгой О’Рейли Бориса Черного. Он охватывает основы вплоть до расширенных возможностей языка. Мы настоятельно рекомендуем эту книгу, если вы хотите поднять свои навыки JavaScript на следующий уровень.
Попробуйте сами!
Слушать мнение других важно, но ничто не сравнится с формированием вашего собственного мнения на основе опыта. Мы знаем, что TypeScript повысит вашу уверенность, поможет вам быстрее выявлять ошибки и реорганизовывать код, а также улучшит вашу общую производительность. А теперь идите, попробуйте сами TypeScript и дайте нам знать, что вы думаете!
Больше о TypeScript в скором времени!
Если вам понравилась эта статья, вы будете рады узнать, что у нас есть еще статьи о TypeScript. Держите нос по ветру в ближайшие месяцы. Мы рассмотрим такие темы, как начало работы с TypeScript и использование его с такими технологиями, как React. До тех пор, счастливого кодирования!
