Se ti stai chiedendo cosa sia TypeScript e se sia ottimale utilizzare questo linguaggio nel tuo prossimo progetto di sviluppo web come alternativa a JavaScript, sei nel posto giusto. In questo tutorial di programmazione web, parleremo di cos’è TypeScript, di come è diverso da JavaScript e delle basi per iniziare con TypeScript.

Cos’è TypeScript?

Creato da Microsoft, TypeScript è un linguaggio di programmazione open source. Include una serie di funzionalità di programmazione orientata agli oggetti (OOP) utili per mantenere la qualità del codice. Puoi pensarlo come la versione ES6 di JavaScript, con alcune funzionalità aggiuntive come il binding di tipo rigoroso.

Nota che TypeScript è un superset di JavaScript. Aggiunge ulteriori vantaggi alla lingua pur consentendo di scrivere il normale codice JavaScript. Oggi l’uso di TypeScript nel mondo della programmazione è in aumento e sempre più aziende stanno adottando questo potente linguaggio.

Leggi: Codifica dattiloscritta al di fuori delle applicazioni angolari.

Vantaggi di TypeScript

Quindi perché dovresti preferire TypeScript a JavaScript? Quali sono le caratteristiche di TypeScript che sono assenti in JavaScript? Ecco alcuni punti da considerare quando si confrontano TypeScript e JavaScript:

Compilazione in TypeScript

JavaScript è un linguaggio interpretato, il che significa che per verificare che tutto funzioni come previsto, devi eseguirlo sul browser. Se ci sono errori, è necessario trovarli ed eseguirne il debug durante la scrittura del codice e, quindi, consuma più tempo e fatica.

TypeScript, tuttavia, offre la comodità di controllare gli errori in fase di compilazione. Se si verificano alcuni errori relativi alla sintassi, TypeScript compilerà tali errori e li segnalerà prima dell’esecuzione dello script, evitando di dover affrontare bug di runtime che sono generalmente più difficili da identificare ed eseguire il debug.

TypeScript è affidabile

Il processo di refactoring è affidabile e più semplice in TypeScript rispetto a JavaScript. TypeScript ha ‘tipi‘ che si occupano dell’agilità durante il refactoring del codice. Rileva gli errori relativi al tipo in fase di compilazione anziché attendere che si verifichi un’eccezione in fase di esecuzione.

Caratteristica di tipo statico TypeScript

JavaScript non è un linguaggio fortemente tipizzato. TypeScript, tuttavia, viene fornito con una funzione di controllo del tipo statico (sebbene sia opzionale da utilizzare) e un sistema di inferenza del tipo. In TypeScript, a volte non è necessario scrivere il tipo prima del nome di una variabile; invece, viene dedotto automaticamente e l’assegnazione di valori di altri tipi a questa variabile dedotta genererà un errore: ciò si ottiene tramite TLS (TypeScript Language Service).

TypeScript vs JavaScript

TypeScript deve essere compilato in JavaScript per essere eseguito su un browser. Ti starai chiedendo perché il codice TypeScript è compilato in JavaScript. Ciò accade perché i browser non sono in grado di comprendere TypeScript; capiscono solo JavaScript. Per questo motivo, TypeScript deve essere prima compilato in JavaScript; quindi, quel JavaScript compilato viene eseguito sul browser.

Ora, si potrebbe porre la domanda: se TypeScript deve essere convertito in JavaScript, allora perché dovremmo preoccuparci di scrivere il nostro codice in TypeScript? La risposta è perché TypeScript offre il controllo del tipo in fase di compilazione anziché in fase di esecuzione. Se provi a eseguire codice che contiene errori, il compilatore genererà quegli errori e ti chiederà di correggerli prima di eseguire il programma. È qui che brilla TypeScript.

Leggi i tutorial di sviluppo web JavaScript.

Caratteristiche dattiloscritte

Di seguito è riportato un elenco di alcune delle caratteristiche importanti del linguaggio di programmazione TypeScript per gli sviluppatori web.

TypeScript di programmazione orientata agli oggetti (OOP)

TypeScript è un linguaggio di programmazione orientato agli oggetti. Questa caratteristica lo rende più intelligente di JavaScript. La programmazione orientata agli oggetti aiuta a rendere la base di codice robusta e pulita. Le funzionalità OOP rendono anche il codice TypeScript più gestibile e organizzato. Di seguito è riportato un esempio di TypeScript Classi e oggetti utilizzato in un programma:

 
class Person {
   name: string = ''
   age: number = 0 
 
   greetings(){
     return 'Hello, ' + this.name;
   }
}
 
// creating a new instance of a class
const person1: any = new Person()
person1.name="Mike"
person1.age = 27 
console.log(person1.greetings()) // renders Hello, Mike
 

Digita Sistema in TypeScript

Di seguito è riportato un elenco dei tipi predefiniti disponibili in TypeScript:

Interfacce dattiloscritte

Possiamo definire interfacce che ci permettano di descrivere come apparirà l’oggetto, cosa non possibile con JavaScript. Puoi creare un’interfaccia e definirla nella classe come segue:

interface ServiceFee {
    Deduction(amount: number); // Deduction() will look like this
}
 
class BankAccount implements ServiceFee {
    Deduction(amount: number){
		// define Deduction() here		
			…
 
    }
}

Leggibilità del codice in TypeScript

In TypeScript, il codice è scritto in classi e interfacce. Le classi e le interfacce forniscono organizzazione al programma e quindi è facile mantenere ed eseguire il debug del codice. Puoi vedere il frammento di codice seguente e osservare come il codice è organizzato in TypeScript rispetto a JavaScript:

 
class Example 
{ 
Greet(){ 
console.log("Hello world")
 } 
} 
let fun = new Example();
fun.Greet();

In JavaScript, l’equivalente del codice sopra può essere scritto come:

var ExampleFunc = (function () {
 function Example() 
{ 
} 
ExampleFunc.prototype.Greet = function () { 
console.log(Hello!" ); 
}; 
return ExampleFunc; 
}()); 
 
var fun = new ExampleFunc(); 
fun.Greet();

Supporto alle funzionalità ES6

TypeScript è un superset di ES6. Contiene tutte le caratteristiche di ES6 più alcune funzionalità aggiuntive. Un esempio di tale funzionalità è la funzione Lambda. ES6 ha apportato una leggera modifica alla sintassi delle funzioni anonime chiamate funzioni fat arrow:

setInterval(() => {
console.log("Hi!")
}, 4000);

Leggi: Esplora Freccia grassa dattiloscritto.

Guida rapida a TypeScript

Ora che comprendiamo alcune delle caratteristiche e dei vantaggi di TypeScript, impostiamo TypeScript e sporchiamoci le mani scrivendoci del codice.

Per iniziare, devi installare NodoJS e un gestore di pacchetti come npm o filato in modo da poter utilizzare TypeScript localmente.

Una volta configurato quanto sopra, puoi installare TypeScript usando il seguente comando:

npm install -g typescript

-G qui indica che stiamo installando TypeScript a livello globale. Per installarlo come dipendenza dev, sostituisci -G insieme a -D.

Una volta installato TypeScript, sarai in grado di compilare qualsiasi file TypeScript in un file JavaScript. Scrivi il seguente codice in TypeScript per vedere come funziona:

const myObj = {
	message: "What’s up?",
};
 
console.log(myObj);

Compila questo codice utilizzando il seguente codice:

tsc .ts

Un nuovo file con .js verrà creato nella stessa cartella e sarai in grado di eseguire questo file come qualsiasi file JavaScript.

Tutorial dattiloscritto

TypeScript è un linguaggio di programmazione fantastico, organizzato e altamente scalabile. È un linguaggio di programmazione orientato agli oggetti ampiamente utilizzato e molte aziende hanno iniziato a usarlo. Aiuta nello sviluppo agile di applicazioni e offre comodità alla comunità di sviluppatori di tutto il mondo per quanto riguarda la manutenzione e l’ottimizzazione delle loro applicazioni. Speriamo che questo articolo ti abbia aiutato a comprendere i fondamenti di TypeScript.