Проще говоря, Typescript - это JavaScript с системой типов, которая в конечном итоге трансформируется в JavaScript. Конечно, между ними больше различий, но в контексте текущего обсуждения давайте сконцентрируемся только на системе типов. Система типов дает множество преимуществ, главное из которых - возможность анализировать код на наличие ошибок во время написания. Во-первых, давайте посмотрим на это в действии:
Машинописный линтер сообщает разработчику о возможной проблеме при написании кода.
Есть два основных способа сделать так, чтобы компилятор узнал о типах переменной. К концу этого сообщения в блоге мы сможем четко понять тонкие различия между ними и то, где мы хотели бы использовать каждый из них.
1) Вывод типа:
Синтаксически легче понять эти два. Скорее, мы уже видели это в приведенном выше примере. Мы не упоминаем тип, который мы хотим присвоить переменной «a». Компилятор достаточно умен, чтобы сделать вывод из инициализации о том, что он имеет тип boolean, и, следовательно, выдает ошибку, когда мы пытаемся присвоить ему какой-то другой тип.
Если я наведу курсор на переменную «a», мой редактор уже скажет мне, что это логический тип, без явного упоминания этого в коде. Это было возможно только тогда, когда инициализация и объявление располагались в одной строке. Что происходит, когда инициализация находится в другой строке. Посмотрим:
Теперь линтер не может распознать тип переменной и вместо этого определяет его как тип «любая», который сам по себе является другим типом в машинописном тексте. Следовательно, мы можем с уверенностью заключить, что вывод типа работает, когда объявление и инициализация переменной выполняются в одной строке.
2) Типовые аннотации
TypeScript также дает разработчику возможность явно указать тип переменной, чтобы ошибочное присвоение этой переменной было обнаружено при написании самого кода. Мы используем «:» после имени переменной, чтобы указать тип.
И в таком сценарии линтер кричит, когда мы пытаемся переназначить другой тип переменной, как показано ниже.
Это кажется довольно простым, линтер может определить тип переменной в самой первой строке (потому что мы упомянули об этом явно !!). И далее во второй строке линтер все еще указывает на ошибочное присвоение.
Таким образом, возникает очевидный вопрос: зачем вообще использовать аннотации типов, если работа выполняется хорошо по логическому выводу? Итак, давайте погрузимся в сценарии, в которых аннотации становятся важными:
* Отложенная инициализация
Мы уже коснулись отложенной инициализации при рассмотрении Inference, давайте еще раз рассмотрим ее и сравним с аннотациями типов в следующих двух фрагментах.
Как вы, возможно, догадались, при использовании аннотаций в следующем фрагменте линтер явно выдает ошибку, потому что мы пытаемся выполнить неправильное переназначение, тогда как в первом случае у линтера нет никаких проблем, что приводит к поражению всей цели. использования системы типов в первую очередь. Так что в таком сценарии использование аннотаций типов действительно имеет смысл.
* При использовании функции, возвращающей тип «любой»
Хорошим примером функции, возвращающей тип any, является JSON.parse (). См. Ниже определение метода JSON.parse.
(метод) JSON.parse (text: string, reviver ?: (key: any, value: any) = ›any): any
Вы можете дать ему шанс передать разные входные данные (все строки типов) в JSON.parse (), и, как и ожидалось, он должен возвращать разные типы результатов. Вы можете попробовать, просто добавив следующие строки кода на консоль инструментов разработчика Chrome или в любую среду javascript:
let a; a = JSON.parse("true") typeof a // outputs "boolean" a = JSON.parse('1') typeof a // outputs "number" a = JSON.parse('{"fName": "John", "lName": "Wick"}') typeof a // outputs "object"
Как видите, одна и та же функция принимает разные типы строк, но возвращает разные типы результатов. Следовательно, в таком случае имеет смысл аннотировать переменную «a» ожидаемым типом при его объявлении, чтобы мы получали ожидаемые ошибки при назначении неожиданного типа. Вы можете увидеть это в действии, как показано ниже:
* Если вы хотите, чтобы переменная имела несколько типов
Не лучший шаблон для подражания, но все же на тот случай, если нам нужна переменная, которая может содержать несколько типов значений. Например, в приведенном ниже коде метод возвращает «false», если число не найдено в arr, но, если оно найдено, возвращает индекс, который является числом. ** здесь нет аннотаций в функции, но акцент делается на необходимости аннотировать переменную (getIndexIfFound), потому что она может содержать несколько типов.
const getIndexIfFound = (num, arr) => { const index = arr.indexOf(num); if (index === -1) { return false; } else { return index; } }; const num1 = 2; const num2 = 8; const arr = [2, 3, 4, 5]; let foundIndex: boolean|number; foundIndex = getIndexIfFound(num1, arr); // returns 0 foundIndex = getIndexIfFound(num2, arr); // returns false
Без аннотаций типов приведенный выше код имел бы ошибку в последней строке во время выполнения, потому что он уже вывел тип «число» во второй последней строке, и мы пытаемся назначить логическое значение позже. Следовательно, мы используем ‘| При объявлении переменной «foundIndex».
Я надеюсь, что мы смогли понять значение и различия между этими двумя терминами «Вывод» и «Аннотации» в контексте машинописного текста и типов в целом.
- * для скриншотов я использовал VSCode в качестве редактора и плагин tslint