Приведение типов в TypeScript

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

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

В TypeScript вы можете использовать ключевое слово  as или оператор <> для приведения типов.

Приведение типов с использованием ключевого слова as

В данном примере выбираем первый входной элемент с помощью метода querySelector() :

let input = document.querySelector('input["type="text"]');

Поскольку возвращаемый тип метода document.querySelector() является Element, следующий код вызывает ошибку компилятора:

console.log(input.value);

Причина в том, что свойство value не существует в типе Element. Он существует только для типа HTMLInputElement.

Чтобы решить эту проблему, вы можете использовать приведение типов, которое приводит элемент к HTMLInputElement с помощью ключевого слова as следующим образом:

let input = document.querySelector('input[type="text"]') as HTMLInputElement;

Теперь переменная input имеет тип HTMLInputElement. Таким образом, доступ к его свойству value не вызовет никаких ошибок. Работает следующий код:

console.log(input.value);

Другой способ Element в HTMLInputElement — получить доступ к свойству следующим образом:

let enteredText =(input as HTMLInputElement).value;

Обратите внимание, что тип HTMLInputElement расширяет тип HTMLElement, который расширяется до типа Element. Когда вы выполняете приведение HTMLElement к HTMLInputElement, этот тип приведения также известен как приведение вниз.

Также возможно провести приведение вниз. Например:

let el: HTMLElement;
el = new HTMLInputElement();

В этом примере переменная el имеет тип HTMLElement. И вы можете назначить ему экземпляр типа HTMLInputElement, потому что тип HTMLInputElement является подклассом типа HTMLElement.

Синтаксис преобразования переменной из typeA в typeB следующий:

let a: typeA;
let b = a as typeB;

Приведение типов с помощью оператора<>

Помимо ключевого слова as, вы можете использовать оператор <> для выполнения приведения типов. Например:

let input = <HTMLInputElement>document.querySelector('input[type="text"]');

console.log(input.value);

Синтаксис приведения типов с использованием <> :

let a: typeA;
let b = <typeB>a;

Заключение

• Приведение типов в TypeScript позволяет преобразовать переменную из одного типа в другой.
• Используйте ключевое слово as или оператор <> для приведения типов.