Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de TypeScript: Lección 15 - Espacio de nombres

namespacees una forma de agrupar lógicamente el código relacionado. Esto está incorporado en TypeScript a diferencia de JavaScript, donde las declaraciones de variables entran en un alcance global y si se utilizan varios archivos JavaScript dentro del mismo proyecto, habrá posibilidad de sobrescribir o mal interpretar las mismas variables, lo que conducirá al "problema de contaminación global del espacio de nombres" en JavaScript.

Definición de un espacio de nombres

Sintaxis:

1
2
3
4
5
6
7
8
namespace NameSpaceName {
   export interface IInterfaceName {     
      //interface body
   
   export class ClassName {     
      //class body
   
}

Si el primer espacio de nombres está en un archivo TypeScript separado, entonces se debe hacer referencia a él usando la sintaxis de referencia de triple barra.

1
/// <reference path = "FileName.ts" />

Ejemplo:
Archivo: Geometry / IShape.ts

1
2
3
4
5
6
7
8
namespace Geometry {
    export interface IShape {
       name:string
       calcArea:()=>number
       calcPerimeter:()=>number
       draw:()=>void
    }
}

Archivo: Geometry / Rectangle.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
/// <reference path = "IShape.ts" />
namespace Geometry {
    export class Rectangle implements IShape {
       name:string = "Rectangle"
       width:number = 0
       height:number = 0
       public calcArea():number{
          return this.width*this.height
       }
       public calcPerimeter():number{
          return 2*(this.width+this.height)
       }
       public draw() {
          console.log("Rectangle is drawn");
       
       constructor(width:number,height:number){
          this.width = width
          this.height = height         
       }
    }
 }

Archivo: Geometry / Test.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
/// <reference path = "IShape.ts" />  
/// <reference path = "Rectangle.ts" /> 
 
function drawAShape(shape:Geometry.IShape) {
    shape.draw()
}
function calcAreaAShape(shape:Geometry.IShape) {
    var area = shape.calcArea()
    console.log("Area is: "+area)
}
var rectangle = new Geometry.Rectangle(100,200)
drawAShape(rectangle)
calcAreaAShape(rectangle)

Compilar:

1
tsc --out app.js Test.ts

Después de compilar, tenemos el archivo app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/// <reference path = "IShape.ts" />
var Geometry;
(function (Geometry) {
    var Rectangle = /** @class */ (function () {
        function Rectangle(width, height) {
            this.name = "Rectangle";
            this.width = 0;
            this.height = 0;
            this.width = width;
            this.height = height;
        }
        Rectangle.prototype.calcArea = function () {
            return this.width * this.height;
        };
        Rectangle.prototype.calcPerimeter = function () {
            return 2 * (this.width + this.height);
        };
        Rectangle.prototype.draw = function () {
            console.log("Rectangle is drawn");
        };
        return Rectangle;
    }());
    Geometry.Rectangle = Rectangle;
})(Geometry || (Geometry = {}));
/// <reference path = "IShape.ts" />  
/// <reference path = "Rectangle.ts" /> 
function drawAShape(shape) {
    shape.draw();
}
function calcAreaAShape(shape) {
    var area = shape.calcArea();
    console.log("Area is: " + area);
}
var rectangle = new Geometry.Rectangle(100, 200);
drawAShape(rectangle);
calcAreaAShape(rectangle);

Ejecutar código: node app.js

Resultado:

1
2
Rectangle is drawn
Area is: 20000

Espacios de nombres anidados

Puede definir un espacio de nombres dentro de otro espacio de nombres de la siguiente manera:

espacio de nombres nombre_espacio1 {
exportar espacio de nombres
nombre_espacio2 {exportar clase nombre_clase {
// cuerpo de clase
}
}
}

Publicar un comentario

0 Comentarios