Il compilatore TypeScript per creare file .js da file .ts

In questo articolo vedremo come iniziare per compilare un file JavaScript usando le classi, i moduli e le interfacce del linguaggio TypeScript, la documentazione completa è disponibile al link

typescriptlang.org/docs/

E' possibile installare il compilatore TypeScript a livello globale lanciando da CLI il seguente comando npm

npm install -g typescript

se invece lo si vuole installare solo all'interno del proprio progetto usare il comando

npm install typescript --save-dev

se l'installazione è andata a buon fine è possibile usare il comando tsc, in particolare per visualizzare le opzioni disponibili usare il comando

tsc -h

In generale il primo passaggio che si compie per iniziare con un nuovo progetto TypeScript consiste nell'aggiungere al proprio progetto un file tsconfig.json, per generare questo file lanciare da CLI il comando

tsc --init

questo file contiene molte configurazioni tra cui la versione di JavaScript che si intende utilizzare, questa configurazione è contenuta nella chiave target, di default è uguale a es5, ma è possibile usare anche altre versioni tra cui es3, es2015, es2016, etc..

tsconfig.json

{
  "compilerOptions": {
    
    "target": "es5", 
    ...............
    ...............

Nella cartella del progetto creiamo un file .ts vuoto scegliendo un nome, e dalla CLI lanciamo il comando

tsc --watch index.ts

index.ts è il file .ts che abbiamo creato, verrà generato un file index.js nella stessa posizione di index.ts (se non impostata) e possiamo guardare le modifiche che vengono apportate al file .js in tempo reale, possiamo anche scegliere una destinazione per il file index.js che viene generato lanciando da CLI il comando

tsc --watch index.ts --outDir <percorso cartella>

impostando un percorso dove salvare il file che verrà generato, in particolare è anche possibile dare un nome diverso al file .js che viene generato usando il comando --outFile

tsc --watch index.ts --outFile <nome file>

Ecco un esempio di classe TypeScript definita nel file index.ts che genera un numero random

index.ts

class Random {

	n: number;

	constructor(n: number) {
		this.n = n;
	}

	getRandom() {
		return (Math.random()) * this.n;
	}
}

let r = new Random(30);
console.log(r.getRandom());

il codice generato nel file index.js è il seguente

index.js

var Random = /** @class */ (function () {
    function Random(n) {
        this.n = n;
    }
    Random.prototype.getRandom = function () {
        return (Math.random()) * this.n;
    };
    return Random;
}());
var r = new Random(30);
console.log(r.getRandom());

se da CLI lanciamo il comado node index.js avremo un risultato simile a questo

> node index.js
20.10078538624326

Per definire un'interfaccia in TypeScript si usa parola chiave interface, ad esempio

index.ts

interface MessageInterface {
	log(): void;
}

class Message implements MessageInterface {

	log() {

	}

}

la classe Message che implementa MessageInterface deve necessariamente avere un metodo log(), il codice JavaScript generato è il seguente

index.js

.......
.......

var Message = /** @class */ (function () {
    function Message() {
    }
    Message.prototype.log = function () {
    };
    return Message;
}());

Per creare un modulo si usa la parola chiave export, ad esempio

const.ts

export class Const{
    p: number = 3.14;
}

il relativo file .js che viene generato è il seguente

const.js

"use strict";
exports.__esModule = true;
exports.Const = void 0;
var Const = /** @class */ (function () {
    function Const() {
        this.p = 3.14;
    }
    return Const;
}());
exports.Const = Const;

ciò ci consente di poter importare questo modulo all'interno di un'altro file .ts usando import, ad esempio

index.ts

import { Const } from "./const";

let c = new Const();
console.log(c.p);

il file .js generato è il seguente

index.js

"use strict";
exports.__esModule = true;
var const_1 = require("./const");
var c = new const_1.Const();
console.log(c.p);

tramite il metodo require viene importato il file const.js, eseguendo questo file da CLI avremo il seguente risultato

> node index.js
3.14