Проще говоря, 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».

Я надеюсь, что мы смогли понять значение и различия между этими двумя терминами «Вывод» и «Аннотации» в контексте машинописного текста и типов в целом.