TypeScript - Moduli
Un modulo è progettato con l'idea di organizzare il codice scritto in TypeScript. I moduli sono sostanzialmente suddivisi in:
- Moduli interni
- Moduli esterni
Modulo interno
I moduli interni erano disponibili nella versione precedente di Typescript. Questo è stato utilizzato per raggruppare logicamente classi, interfacce, funzioni in un'unità e può essere esportato in un altro modulo. Questo raggruppamento logico è denominato spazio dei nomi nell'ultima versione di TypeScript. Quindi i moduli interni sono obsoleti, invece possiamo usare lo spazio dei nomi. I moduli interni sono ancora supportati, ma si consiglia di utilizzare lo spazio dei nomi sui moduli interni.
Sintassi del modulo interno (vecchio)
module TutorialPoint {
export function add(x, y) {
console.log(x+y);
}
}
Sintassi dello spazio dei nomi (nuovo)
namespace TutorialPoint {
export function add(x, y) { console.log(x + y);}
}
JavaScript generato in entrambi i casi è lo stesso
var TutorialPoint;
(function (TutorialPoint) {
function add(x, y) {
console.log(x + y);
}
TutorialPoint.add = add;
})(TutorialPoint || (TutorialPoint = {}));
Modulo esterno
Esistono moduli esterni in TypeScript per specificare e caricare le dipendenze tra più esterni jsFile. Se ce n'è solo unojsfile utilizzato, i moduli esterni non sono rilevanti. Tradizionalmente la gestione delle dipendenze tra i file JavaScript veniva eseguita utilizzando i tag di script del browser (<script> </script>). Ma non è estensibile, poiché è molto lineare durante il caricamento dei moduli. Ciò significa che invece di caricare i file uno dopo l'altro non esiste un'opzione asincrona per caricare i moduli. Quando si programma js per il server, ad esempio NodeJs, non si hanno nemmeno tag di script.
Esistono due scenari per il caricamento dei dipendenti js file da un singolo file JavaScript principale.
- Lato client - RequireJs
- Lato server - NodeJs
Selezione di un caricatore di moduli
Per supportare il caricamento di file JavaScript esterni, abbiamo bisogno di un caricatore di moduli. Questo sarà un altrojsbiblioteca. Per il browser la libreria più comune utilizzata è RequieJS. Questa è un'implementazione della specifica AMD (Asynchronous Module Definition). Invece di caricare i file uno dopo l'altro, AMD può caricarli tutti separatamente, anche quando dipendono l'uno dall'altro.
Definizione del modulo esterno
Quando si definisce un modulo esterno in TypeScript destinato a CommonJS o AMD, ogni file viene considerato come un modulo. Quindi è facoltativo utilizzare il modulo interno con il modulo esterno.
Se stai migrando TypeScript da AMD a sistemi con moduli CommonJs, non è necessario alcun lavoro aggiuntivo. L'unica cosa che devi cambiare è solo il flag del compilatore A differenza di JavaScript, c'è un sovraccarico nella migrazione da CommonJs ad AMD o viceversa.
La sintassi per la dichiarazione di un modulo esterno utilizza le parole chiave "export" e "import".
Sintassi
//FileName : SomeInterface.ts
export interface SomeInterface {
//code declarations
}
Per utilizzare il modulo dichiarato in un altro file, viene utilizzata una parola chiave import come indicato di seguito. Il nome del file è specificato solo senza estensione utilizzata.
import someInterfaceRef = require(“./SomeInterface”);
Esempio
Capiamolo usando un esempio.
// IShape.ts
export interface IShape {
draw();
}
// Circle.ts
import shape = require("./IShape");
export class Circle implements shape.IShape {
public draw() {
console.log("Cirlce is drawn (external module)");
}
}
// Triangle.ts
import shape = require("./IShape");
export class Triangle implements shape.IShape {
public draw() {
console.log("Triangle is drawn (external module)");
}
}
// TestShape.ts
import shape = require("./IShape");
import circle = require("./Circle");
import triangle = require("./Triangle");
function drawAllShapes(shapeToDraw: shape.IShape) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
Il comando per compilare il file TypeScript principale per i sistemi AMD è:
tsc --module amd TestShape.ts
Durante la compilazione, genererà il seguente codice JavaScript per AMD.
File: IShape.js
//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});
File: Circle.js
//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
var Circle = (function () {
function Circle() {
}
Circle.prototype.draw = function () {
console.log("Cirlce is drawn (external module)");
};
return Circle;
})();
exports.Circle = Circle;
});
File: Triangle.js
//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
var Triangle = (function () {
function Triangle() {
}
Triangle.prototype.draw = function () {
console.log("Triangle is drawn (external module)");
};
return Triangle;
})();
exports.Triangle = Triangle;
});
File: TestShape.js
//Generated by typescript 1.8.10
define(["require", "exports", "./Circle", "./Triangle"],
function (require, exports, circle, triangle) {
function drawAllShapes(shapeToDraw) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
});
Il comando per compilare il file TypeScript principale per Commonjs sistemi è
tsc --module commonjs TestShape.ts
Durante la compilazione, genererà il seguente codice JavaScript per Commonjs.
File: Circle.js
//Generated by typescript 1.8.10
var Circle = (function () {
function Circle() {
}
Circle.prototype.draw = function () {
console.log("Cirlce is drawn");
};
return Circle;
})();
exports.Circle = Circle;
File: Triangle.js
//Generated by typescript 1.8.10
var Triangle = (function () {
function Triangle() {
}
Triangle.prototype.draw = function () {
console.log("Triangle is drawn (external module)");
};
return Triangle;
})();
exports.Triangle = Triangle;
File: TestShape.js
//Generated by typescript 1.8.10
var circle = require("./Circle");
var triangle = require("./Triangle");
function drawAllShapes(shapeToDraw) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
Produzione
Cirlce is drawn (external module)
Triangle is drawn (external module)