Объясните, когда использовать ключевое слово «объявить» в TypeScript

Опубликовано: 14 Августа, 2022

В этой статье мы увидим, как использовать ключевое слово declare в Typescript.

Ключевое слово declare в TypeScript используется для объявления Ambient переменных или методов. Ambient Declarations похожи на ключевое слово импорта. Что сообщает компилятору, что источник существует в другом файле. Мы используем объявления Ambient в TypeScript для использования сторонних библиотек JavaScript, jQuery, Node и т. д. Объявление ключевого слова напрямую интегрирует эти библиотеки в наш код и снижает вероятность ошибки в нашем коде TypeScript.

Мы используем ключевое слово declare только в файле Ambient, чтобы использовать методы и переменные библиотек.

Синтаксис:

declare var Variable_Name;
declare module Name_of_Module{// Body of module };

Давайте разберемся с помощью следующего примера.

Пример: Теперь возьмем один пример: у нас есть один файл, который содержит несколько полезных переменных, но файл написан на JavaScript. Поэтому мы не можем сказать, что нам нужно написать какой-то код JavaScript на TypeScript. Это занимает так много времени, что мы должны написать тот же код на TypeScript. Но мы объявили ключевые слова, дающие возможность использовать ту же переменную в конце кода. код.

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

Сторонний код:

Javascript




var pi_1 = 3.1415926535 ;
var pi_2 = 3.14159265358979323846 ;
var pi_3 = 3.141592653589793238462643383279;

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

Код TypeScript:

Javascript




declare var pi_1 : any ;
 
console.log("Value of pi is :",pi_1)

Теперь мы можем импортировать оба файла в наш HTML-код и использовать их.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <!-- Javascript Library -->
    <script src=
"C:UserscomputersDesktop	ypescriptfirst1.js">
    </script>
    <script src=
"C:UserscomputersDesktop	ypescriptsecons.js">
    </script>
</body>
</html>