Обычный javascript имеет тенденцию выглядеть «хорошо для работы» в текстовом редакторе, но
выходит из строя в тот момент, когда он переходит в среду выполнения. У нас есть Typescript на помощь. Благодаря машинописному тексту мы можем обнаруживать ошибки в коде, не запуская его. В качестве бонуса мы получаем довольно точный IntelliSense.

Typescript, как следует из названия, полностью посвящен типам. Типы значений, передаваемых в код, имеют значение для TypeScript, его процесс статической проверки типов определяет, что является ошибкой, а что нет, на основе типов обрабатываемых значений.

Хороший вопрос: как TypeScript справляется с «белыми пятнами»?

TypeScript столкнется со многими случаями, когда он не может знать тип входящего значения, но не беспокойтесь, он готов поверить вам на слово! Это известно как приведение типов.

Приведение типов помогает вам сообщить машинописному сценарию, что какое-то значение относится к определенному типу, когда машинописный текст не может определить его самостоятельно из-за отсутствия контекста, но вы, как разработчик, знаете, что это будет так.

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

let data: any

Допустим, мы хотим использовать эту переменную как строку в одном месте и как число в другом месте. Мы можем привести его к определенному типу, необходимому для этого места.

const dataAsString = data as string
const dataAsNumber = data as number

1. Приведение типов и Дом

Давайте рассмотрим сценарий, в котором мы пытаемся получить доступ к свойству элемента DOM.

Например, если мы попытаемся получить доступ к якорному элементу:

const anchorTag = document.querySelector(“a”);                           anchorTag.href;

TypeScript выделит нашу переменную anchorTag, и если мы наведем на нее курсор, то увидим сообщение об ошибке, сгенерированное Typescript.

мы можем добавить к вызову querySelector знак «!» ненулевой оператор утверждения, но он не будет работать, если мы будем использовать селектор класса или селектор идентификатора вместо селектора элемента.

Почему это?

TypeScript содержит специальные типы для каждого элемента DOM, например, тег привязки будет иметь тип HTMLAnchorElement, это полезная абстракция для машинописного текста для правильного взаимодействия с элементами DOM. В нашем случае typescript на самом деле не знает, присутствует ли элемент DOM и имеет ли он тип HTMLAnchorElement.

Мы должны использовать приведение типов, чтобы сообщить машинописи правильный тип для выбранного элемента DOM.

мы можем это сделать

const anchorTag = document.querySelector(“a”) as HTMLAnchorElement;                        anchorTag.href;

Используя ключевое слово «as», мы можем указать для typeScript тип элемента DOM, который, как мы знаем, существует и не является нулевым.

2. Приведение типов против защиты типов

Во многих ситуациях приведение типов может быть не таким оптимальным, как использование некоторых других подходов к сужению (процесс уточнения типов до более конкретных типов, чем объявленные, называется сужением).

Здесь у нас есть классический пример того, как TypeScript может помочь нам узнать, когда нам не хватает какого-то свойства интерфейса в нашем объекте типа Vehicle.

Наведя курсор на красную подчеркивание. Мы можем увидеть ошибку

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

Использование Typeguards — лучший способ избежать таких проблем. Защита типа — это выражение, которое выполняет проверку во время выполнения, гарантирующую тип в определенной области.

Защита типа — это метод TypeScript, используемый для получения информации о типе переменной, обычно в условном блоке. Охранники типов могут принимать форму обычных функций, которые возвращают логическое значение, принимают тип и сообщают TypeScript, можно ли сузить его до более конкретного типа.

Охранники типов можно классифицировать на основе операторов JavaScript, которые используются для сужения типов. Они включают:

typeof тип охранников

instanceof типа охранников

Охранники типа in

Защита типа равенства ( === )

Охранники типов образцов

//Example of a equality type guard 
//If it is a string, do this           
if (typeof value === 'string') { ... }

3. Приведение типов или утверждение типа

К этому моменту мы знаем, что TypeScript позволяет вам переопределять его предполагаемое и проанализированное представление типов любым способом, который мы хотим. Мы узнали, что приведение типов — это способ сделать это.

Мы также сталкиваемся с идеей «утверждений типа». Тогда возникает вопрос, в чем разница между утверждением типа и приведением типов?

Утверждение типа в TypeScript — это просто ваше сообщение компилятору, что вы знаете об этих типах лучше, чем он, и он не должен сомневаться в вас.

Приведение типов и утверждение типов — это почти одно и то же. Почти я имею в виду, что они не совсем одинаковы. Утверждения типа — это чисто конструкция времени компиляции, а приведение типов обычно подразумевает некоторую поддержку времени выполнения.

4. Параметры синтаксиса

Во время приведения типов у нас есть два варианта синтаксиса. Мы уже видели синтаксис as, но мы также рассмотрим синтаксис ‹›.

Синтаксис как:

const dataAsString = data as string

Синтаксис ‹›:

const dataAsString = <string>data

Заключение

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