Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de TypeScript: Lección 17 - Ambiente

Las declaraciones ambientales son una forma de decirle al compilador de TypeScript que el código fuente real existe en otro lugar. Cuando consume un montón de bibliotecas js de terceros como jquery / angularjs / nodejs, no puede reescribirlo en TypeScript . Garantizar Type Safety e IntelliSense al usar estas bibliotecas será un desafío para un programador de TypeScript . Las declaraciones ambientales ayudan a integrar sin problemas otras bibliotecas js en TypeScript .

Definición de Ambientes
Las declaraciones ambientales se guardan por convención en un archivo de declaración de tipo con la siguiente extensión (d.ts):TutorialSpots.d.ts

El archivo anterior no se transcompilará a JavaScript . Se utilizará para Type Safety e IntelliSense .

La sintaxis para declarar variables ambientales o módulos será la siguiente:

Sintaxis

1
2
declare module Module_Name {
}

Se debe hacer referencia a los archivos ambientales en el archivo TypeScript del cliente como se muestra:

1
/// <reference path = "TutorialSpots.d.ts" />

Ejemplo

Suponga que le han proporcionado una biblioteca javascript de terceros que contiene un código similar a:

Archivo: TutorialSpots.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
"use strict";
var TutorialSpots;
(function (TutorialSpots) {
    var Calc = /** @class */ (function () {
        function Calc() {
        }
        Calc.prototype.doSum = function (limit) {
            var sum = 0;
            for (var i = 0; i <= limit; i++) {
                sum += i;
            }
            return sum;
        };
        return Calc;
    }());
    TutorialSpots.Calc = Calc;
})(TutorialSpots || (TutorialSpots = {}));

Como programador de mecanografiado, no tendrá tiempo para reescribir esta biblioteca en TypeScript . Pero aún necesita usar el método doSum () con seguridad de tipos. Lo que podría hacer es un archivo de declaración ambiental. Creemos un archivo de declaración ambiental TutorialSpots.d.ts

Nombre de archivo: TutorialSpots.d.ts

1
2
3
4
5
declare module TutorialSpots {
    class Calc {
        doSum(limit: number): number;
    }
}

Los archivos ambientales no contendrán las implementaciones, son solo declaraciones de tipo. Las declaraciones ahora deben incluirse en el archivo mecanografiado de la siguiente manera:

Nombre de archivo: TutorialSpotsTest.ts

1
2
3
/// <reference path = "TutorialSpots.d.ts" />
var obj = new TutorialSpots.Calc()
console.log(obj.doSum(5))

Después de compilar:

Nombre de archivo: TutorialSpotsTest.js

1
2
3
/// <reference path = "TutorialSpots.d.ts" />
var obj = new TutorialSpots.Calc();
console.log(obj.doSum(5));

Crear archivo HTML: TutorialSpotsTest.html

1
2
3
4
5
6
7
<html>
   <body style = "font-size:30px;">
      <h1>Ambient Test</h1>         
      <script src = "TutorialSpots.js"></script>
      <script src = "TutorialSpotsTest.js"></script>
   </body>     
</html>

resultado prueba ambiente

Publicar un comentario

0 Comentarios