TypeScript Tutorial: cos'è, interfaccia, enum, array con esempio

By: James Hartmann James Hartmann
Hours aggiornato

Cosa è TypeScript?

TypeScript è un superset di JavaScript. TypeScript è un puro linguaggio di programmazione orientato agli oggetti che supporta classi, interfacce, ecc. È un linguaggio open source sviluppato da Microsoft che compila staticamente il codice JavaScript. Può essere eseguito facilmente in un browser o Nodejs.

Sono supportate tutte le ultime funzionalità rilasciate per ECMAScript TypeScript e in aggiunta ad esso TypeScript ha le sue caratteristiche orientate agli oggetti come interfacce, dichiarazione ambientale, ereditarietà di classe, ecc. che aiutano nello sviluppo di una grande applicazione che altrimenti sarebbe difficile da realizzare in JavaCopione.

Come scaricare e installare TypeScript

Ecco la procedura passo passo per scaricare e installare TypeScript:

Passaggio 1) Scarica e installa Nodejs

Vai al sito ufficiale di nodejs: https://nodejs.org/en/download/ e scarica e installa nodejs secondo il tuo sistema operativo. Le istruzioni dettagliate su come scaricare nodejs sono disponibili qui: https://www.guru99.com/download-install-node-js.html

Passaggio 2) Controlla la versione di Nodejs e npm

Per verificare se nodejs e npm sono installati, controlla la versione nel prompt dei comandi.

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

Quindi hai nodejs v10 e npm 6 installati.

Passo 3) TypeScript SERVIZIO DI

Crea la directory del tuo progetto typeproject/ ed esegui npm init, come mostrato nel comando seguente:

npm init

Passaggio 4) Avviare l'installazione

Ora creeremo il pacchetto .json che memorizzerà le dipendenze per il nostro progetto.

Una volta terminato, installa TypeScript come segue:

npm -g install typescript

Il comando precedente si occuperà dell'installazione TypeScriptAggiungendo “-g” a npm install verrà installato TypeScript a livello globale. Il vantaggio di usare -g è che sarai in grado di usare TypeScript TSC comando da qualsiasi directory poiché è installato a livello globale. Nel caso in cui non desideri installare TypeScript a livello globale utilizzare il comando seguente:

npm --save install typescript

Crea la cartella src/ nella directory del tuo progetto e nella cartella src/ create TypeScript file test.ts e scrivi il tuo codice.

Esempio: test.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

Compilare TypeScript codice a Javascript

Per compilare il codice soprastante utilizzare il seguente comando:

If TypeScript è installato a livello globale, utilizzare il comando seguente:

tsc test.ts

If TypeScript è installato localmente nel tuo progetto di cui devi utilizzare il percorso TypeScript da node_modules come mostrato:

node_modules/typescript/bin/tsc test.ts

Il comando precedente creerà un file test.js e avrà il codice compilato in javascript.

Esempio: test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

Eseguire Javascript utilizzando Nodejs

In questa TypeScript tutorial, eseguiremo test.js in nodejs come segue:

D:\typeproject\src>node test.js
15

Il valore consoled viene visualizzato durante l'esecuzione di test.js

Eseguire JavaScript nel browser

Esempio:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

Eseguire Javascript utilizzando Nodejs

Compilare TypeScript codice a Javascript utilizzando la versione EcmaScript

TypeScript supporta tutte le funzionalità di Ecmascript rilasciate, e gli sviluppatori possono usarle durante la codifica. Ma non tutte le nuove funzionalità sono supportate su browser più vecchi, per cui è necessario compilare javascript in una versione più vecchia di Ecmascript. TypeScript fornisce opzioni del compilatore che possono farlo.

Esempio: test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Per compilare nella versione ES di tua scelta, puoi utilizzare l'opzione target o t nel tuo comando come segue:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Per impostazione predefinita, la destinazione è ES3. Nel caso in cui desideri modificarla, puoi utilizzare il comando precedente.

Al momento utilizzeremo ES6 in questo TypeScript tutorial come obiettivo:

tsc --target ES6  test.ts

test.ts in test.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Il codice rimane così com'è, poiché la funzione freccia che hai utilizzato è una funzionalità ES6 e la stessa quando compilata su ES6 non viene modificata.

Per impostazione predefinita il target è ES3 quindi senza target ottieni test.js come:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

Quindi qui, la freccia grossa viene cambiata in una normale funzione anonima.

ARTICOLI CORRELATI

Variabili in TypeScript

Variabili vengono utilizzati per memorizzare valori e il valore può essere una stringa, un numero, un valore booleano o un'espressione. Quando si tratta di variabili in TypeScript, sono simili a JavaCopione. Quindi impariamo a dichiarare e assegnare valore alle variabili in TypeScript.

Le variabili non possono essere utilizzate nel codice senza definizione. Per dichiarare una variabile è possibile utilizzare

var parola chiave,

lasciare parola chiave

const parola chiave

Lavorare con le variabili in TypeScript è simile a javascript, e gli utenti che hanno familiarità con javascript lo troveranno molto semplice. Solo variabili come lasciare e const non sono molto utilizzati in confronto a var.

Dichiarare variabili utilizzando var

Sintassi:

var firstname = "Roy";

Diamo un'occhiata ad alcuni TypeScript esempi per comprendere il funzionamento della parola chiave var e anche l'ambito delle variabili dichiarate utilizzando var parola chiave.

Esempio 1:

var  k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local variable and will be accessible inside function test, it will not be available outside the function.
    return k++;
}

test(); // output as  1
test(); // output as 2
alert(c); // will throw error , Uncaught ReferenceError: c is not defined

Esempio 2: 

var t = 0; // variable t is declared in global scope.
function test() {    
    var t = 10; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    return t;
}
test(); // will return 10.
console.log(t); // will console 0.

Esempio 3:

var i = 0;
function test() {
    if (i>0) {
      var t = 1;
    }
    return t;
}

test(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

Dichiarare variabili utilizzando let

La sezione Currents, dedicata a opere audaci e innovative di artisti emergenti e affermati, include la prima statunitense di Mare’s Nest di Ben Rivers, descritto come “un enigmatico road movie ambientato in un mondo post-apocalittico governato da bambini”. Tra gli altri titoli spiccano Dracula di Radu Jude e With Hasan in Gaza di Kamal Aljafari. TypeScript la sintassi di let è la seguente:

Sintassi:

let name="Roy";

Il funzionamento di lasciare la variabile è quasi la stessa di var, ma con una piccola differenza e capirai lo stesso usando an TypeScript esempio.

Esempio:

let i = 1;
function test() {
    if (i>0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error : Uncaught ReferenceError: t is not defined.

Sopra TypeScript example genera un errore, ma lo stesso avrebbe funzionato bene se fosse stato con il file var parola chiave. Variabili utilizzando lasciare sono disponibili all'interno dell'ambito del blocco dichiarato, ad esempio la variabile t è disponibile solo all'interno del blocco if e non per l'intera funzione.

Inoltre, se ti capita di dichiarare una variabile all'interno di qualsiasi funzione, o for-loop, while-loop, TypeScript switch, sarà disponibile solo all'interno di quel blocco e nessun riferimento ad esso all'esterno del blocco e genererà un errore se la variabile viene utilizzata all'esterno del blocco. Questa è la differenza principale tra le variabili dichiarate con parola chiave var e let.

Dichiarare variabili utilizzando const

Const significa variabili costanti. Sono simili alle variabili let, con l'unica differenza che una volta assegnato un valore, questo non può essere modificato.

Sintassi:

const name;

Esempio:

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

Pertanto gli utenti possono utilizzare le variabili const solo nei casi in cui sanno di non dover modificare i valori ad essa assegnati.

Digita in TypeScript

TypeScript è un linguaggio fortemente tipizzato, mentre javascript non lo è. Una variabile che ha un valore definito come stringa può essere modificata in un numero senza alcun problema in Javascript. Lo stesso non è tollerato TypeScript. in TypeScript, il tipo di una variabile è definito solo all'inizio e durante l'esecuzione deve mantenere lo stesso tipo; qualsiasi modifica comporterà un errore in fase di compilazione in JavaScript.

Di seguito sono riportati i tipi:

  • Numero
  • Corda
  • Booleano
  • Qualsiasi
  • vuoto

Numero

Accetta solo numeri interi, in virgola mobile, frazioni, ecc.

Sintassi:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

Ecco alcuni metodi importanti che possono essere utilizzati sui tipi Numero:

aRisolto() – convertirà il numero in una stringa e manterrà le cifre decimali assegnate al metodo.

accordare() – questo metodo convertirà il numero in una stringa.

valore di() – questo metodo restituirà il valore primitivo del numero.

allaPrecisione() – questo metodo formatterà il numero su una lunghezza specificata.

Esempio: con tutti i metodi String

let _num :number = 10.345;
_num.toFixed(2); // "10.35"
_num.valueOf(); // 10.345
_num.toString(); // "10.345"
_num.toPrecision(2); //"10"

Corda

Stringa: solo valori stringa

Sintassi:

let str :string = "hello world";

Ecco alcuni metodi importanti che possono essere utilizzati sui tipi String:

  • dividere() – questo metodo dividerà la stringa in un array.
  • charat() – questo metodo fornirà il primo carattere per l'indice fornito.
  • indice di() – questo metodo fornirà la posizione della prima occorrenza per il valore ad essa assegnato.
  • sostituire () – questo metodo richiede 2 stringhe, prima il valore da cercare nella stringa e se presente lo sostituirà con il 2° e restituirà una nuova stringa.
  • Trim () – questo metodo rimuoverà gli spazi bianchi da entrambi i lati della stringa.
  • substr() – questo metodo fornirà una parte della stringa che dipenderà dalla posizione data come inizio e fine.
  • sottostringa() – questo metodo fornirà una parte della stringa che dipenderà dalla posizione data come inizio e fine. Il carattere nella posizione finale verrà escluso.
  • in maiuscolo() -convertirà la stringa in maiuscolo
  • toLowerCase() – convertirà la stringa in minuscolo.

Esempio:

let _str:string = "Typescript";

_str.charAt(1); // y
_str.split(""); //["T", "y", "p", "e", "s", "c", "r", "i", "p", "t"]
_str.indexOf("s"); //4 , gives -1 is the value does not exist in the string.
_str.replace("Type", "Coffee"); //"Coffeescript"
_str.trim(); //"Typescript"
_str.substr(4, _str.length); //"script"
_str.substring(4, 10); //"script"
_str.toUpperCase();//"TYPESCRIPT"
_str.toLowerCase();//"typescript"

Booleano

Accetterà valori logici come vero, falso, 0 e 1.

Sintassi:

let bflag :boolean = 1;
let status :boolean = true;

Qualsiasi

Sintassi:

let a :any = 123
a = "hello world"; // changing type will not give any error.

Variabili dichiarate utilizzando in qualsiasi type può accettare la variabile come stringa, numero, array, booleano o void. TypeScript non genererà alcun errore in fase di compilazione; questo è simile alle variabili dichiarate in JavaScript. Utilizza qualsiasi tipo di variabile solo quando non sei sicuro del tipo di valore che sarà associato a quella variabile.

vuoto

Il tipo Void viene utilizzato principalmente come tipo restituito su una funzione che non ha nulla da restituire.

Sintassi:

function testfunc():void{
 //code here
}

TypeScript Italia

An Italia in TypeScript è un tipo di dati in cui puoi memorizzare più valori. Impariamo come dichiarare e assegnare valori per le operazioni Array in TypeScript.

Dal TypeScript è un linguaggio fortemente tipizzato, devi dire quale sarà il tipo di dati dei valori in un array. Altrimenti, lo considererà di tipo any.

Dichiarare e inizializzare un array

Sintassi:

let nameofthearray : Array<typehere>

Esempio

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; //array with string and numbers mixed.

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

Diversi modi per accedere agli elementi di un array

Per ottenere gli elementi da un array, i valori iniziano dall'indice 0 fino alla lunghezza dell'array.

Esempio:

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
years[0]; // output will be 2016			
years[1]; // output will be 2017			
years[2]; // output will be 2018			
years[3]; // output will be 2019

Puoi anche ottenere gli elementi da un array usando TypeScript da loop come mostrato di seguito:

utilizzando TypeScript per loop

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i=0;i<=years.length; i++) {
     console.log(years[i]);
}
Output:
2016
2017
2018
2019

Utilizzo del ciclo for-in

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i in years) {
     console.log(years[i])
}

Output:
2016
2017
2018
2019

Utilizzo del ciclo for-of

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let  i of years) {
     console.log(i)
}
Output:
2016
2017
2018
2019

Utilizzando il ciclo foreach

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
years.forEach(function(yrs, i) {
  console.log(yrs);
});
Output:
2016
2017
2018
2019

TypeScript Metodi di matrice

TypeScript L'oggetto array ha molte proprietà e metodi che aiutano gli sviluppatori a gestire gli array in modo semplice ed efficiente. È possibile ottenere il valore di una proprietà specificando arrayname.property e l'output di un metodo specificando array name.method().

proprietà length

=> Se vuoi conoscere il numero di elementi in un array, puoi utilizzare la proprietà length.

Revmetodo corretto

=> Puoi invertire l'ordine degli elementi in un array utilizzando un metodo inverso.

Metodo di ordinamento

=> Puoi ordinare gli elementi in un array usando il metodo sort.

Metodo pop

=> Puoi rimuovere l'ultimo elemento di un array usando un metodo pop.

Shift metodo

=> Puoi rimuovere il primo elemento di un array usando il metodo shift.

Metodo push

=> Puoi aggiungere valore come ultimo elemento dell'array.

metodo concat

=> Puoi unire due array in un unico elemento dell'array.

Esempio per la proprietà della lunghezza

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.length);  // 12

Esempio di metodo inverso

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.reverse());  //  ["Dec", "Nov", "Oct", "Sept", "Aug", "July", "June", "May", "April", "March", "Feb", "Jan"]

Esempio per il metodo di ordinamento

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.sort()); // ["April", "Aug", "Dec", "Feb", "Jan", "July", "June", "March", "May", "Nov", "Oct", "Sept"]

Esempio per il metodo pop

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.				

console.log(months.pop()); //Dec

Esempio per il metodo dello spostamento

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.			

console.log(months.shift()); // Jan

Esempio per il metodo push

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
years.forEach(function(yrs, i) {			
  console.log(yrs); // 2015 , 2016,2017, 2018, 2019,2020				
});

Esempio per il metodo concat

let array1: Array<number> = [10, 20, 30]; 			
let array2: Array<number> = [100, 200, 300];			
console.log(array1.concat(array2)); //[10, 20, 30, 100, 200, 300]

classe in TypeScript

TypeScript è un superset di JavaScript, quindi tutto il possibile da fare in JavaLa sceneggiatura è possibile anche in TypeScript. La classe è una nuova funzionalità aggiunta da ES6 in poi, quindi prima JavaLo script della funzionalità di tipo classe è stato provato usando una funzione con funzionalità prototipo per riutilizzare il codice. Utilizzando la classe, puoi avere il nostro codice quasi vicino a linguaggi come java, c#, python, ecc., dove il codice può essere riutilizzato. Con la funzionalità di classe in TypeScript/JavaScript, rende il linguaggio molto potente.

Definizione di una classe in TypeScript

Ecco una sintassi di base della classe in TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class
}

Esempio: un esempio funzionante su Class

class Students {
    age : number;
    name : string;
    roll_no : number;
    
    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

Nell'esempio sopra, hai una classe chiamata Studenti. Ha le proprietà age, name e roll_no.

Costruttore in a TypeScript Classe

L'esempio della classe Studenti che abbiamo definito sopra, ha un costruttore come mostrato di seguito:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

Il metodo del costruttore ha i parametri age, name e roll_no. Il costruttore si occuperà di inizializzare le proprietà quando viene chiamata la classe. Si accede alle proprietà tramite questo parola chiave. Esempio this.age per accedere alla proprietà age, this.roll_no per accedere a roll_no, ecc. Puoi anche avere un costruttore predefinito, come mostrato di seguito:

constructor () {}

Metodi all'interno di a TypeScript Classe

Nell'esempio della classe Students sono definiti metodi come getRollNo(), getName(), getAge() che vengono utilizzati per fornire dettagli sulle proprietà roll_no, name ed age.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

Creazione dell'istanza della classe in TypeScript

Esempio:

In TypeScript per creare un'istanza di una classe devi usare l'operatore new. Quando creiamo un'istanza di una classe usando l'operatore new otteniamo l'oggetto che può accedere alle proprietà e ai metodi della classe come mostrato di seguito:

let student_details = new Students(15, "Harry John", 33);
student_details.getAge(); // 15
student_details.getName(); // Harry John

compilazione TypeScript Classe a JavaCopione

È possibile utilizzare il comando tsc come mostrato di seguito per compilare Javascript.

Command: tsc  Students.ts

L'output di Javascript il codice in fase di compilazione è il seguente:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In Javascript, la Classe viene convertita in una funzione autoinvocata.

Eredità di classe

Le classi possono essere ereditate utilizzando il file estendere parola chiave in TypeScript.

Sintassi dell'ereditarietà della classe:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

classe B potrà condividere classe A metodi e proprietà.

Ecco un esempio funzionante di una classe che utilizza l'ereditarietà

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge(); // output is 24
_std1.setMarks(500);
_std1.getMarks(); // output is 500

Hai due classi, Persona e Studente. La classe Student estende Person e l'oggetto creato su Student è in grado di accedere ai propri metodi e proprietà, nonché alla classe che ha esteso.

Ora aggiungiamo alcune ulteriori modifiche alla classe precedente.

Esempio:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge(); // output is 24
_std1.getMarks(); // output is 500

La modifica che hai aggiunto rispetto all'esempio precedente è che c'è un costruttore definito nella classe Studente. Il costruttore deve prendere gli stessi parametri della classe base e aggiungere eventuali parametri aggiuntivi, se presenti.

In TypeScript devi chiamare super will tutti i parametri come parametri di base in esso contenuti. Questa deve essere la prima cosa da fare all'interno del costruttore. Il super eseguirà il costruttore della classe estesa.

Accedi ai modificatori in TypeScript

TypeScript supporta i modificatori di accesso pubblico, privato e protetto ai tuoi metodi e proprietà. Per impostazione predefinita, se non vengono forniti modificatori di accesso, il metodo o la proprietà sono considerati pubblici e saranno facilmente accessibili dall'oggetto della classe.

In caso di modificatori di accesso privato, non è possibile accedervi dall'oggetto della classe e sono destinati ad essere utilizzati solo all'interno della classe. Non sono disponibili per la classe ereditata.

In caso di modificatori di accesso protetto, sono pensati per essere utilizzati all'interno della classe e della classe ereditata e non saranno accessibili dall'oggetto della classe.

Esempio:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is "+ this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);  
        this.tmarks = tmarks;    
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }
    
    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks(); // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails(); // output is Name is Sheena
  • Privato: le proprietà o i metodi non sono accessibili dall'oggetto della classe e anche dalla classe derivata, sono pensati per essere utilizzati internamente alla classe.
  • protetto: inoltre, l'oggetto creato non può accedere alle proprietà e ai metodi. Sono accessibili dall'interno della classe e disponibili per la classe che la estende.
  • Pubblico: proprietà e metodi vengono dichiarati senza alcuna parola chiave. Sono facilmente accessibili utilizzando l'oggetto della classe dall'esterno.

Interfaccia in TypeScript

Una delle caratteristiche principali di TypeScript è interfacce. L'interfaccia è un set di regole definite che devono essere implementate dall'entità che la utilizza. L'entità può essere una classe, una funzione o una variabile. Un'interfaccia può essere composta da proprietà e metodi. È possibile definire le proprietà come facoltative utilizzando la sintassi "?" per quella proprietà o metodo. L'interfaccia aggiunge un controllo di tipo forte per qualsiasi funzione, variabile o classe che implementa l'interfaccia.

Sintassi di un'interfaccia in TypeScript

interface Dimension {
    width: string;
    height: string;
}

Hai definito un'interfaccia denominata Dimension che ha le proprietà larghezza e altezza ed entrambe hanno il tipo come stringa.

Ora questa interfaccia può essere implementata da una variabile, una funzione o una classe. Ecco l'esempio della variabile che implementa l'interfaccia Dimension.

Esempio:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

La firma dell'interfaccia Dimension ha larghezza e altezza ed entrambe sono obbligatorie. Nel caso in cui durante l'implementazione dell'interfaccia venga persa una qualsiasi proprietà o il tipo venga modificato, verrà generato un errore in fase di compilazione durante la compilazione del codice in javascript.

Il codice sopra, quando compilato in Javascript, appare come segue:

var _imagedim = {
    width: "100px",
    height: "200px"
};

Vediamo ora come utilizzare un'interfaccia con una funzione.

Utilizzo dell'interfaccia su una funzione come tipo restituito

Esempio:

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

Nell'esempio precedente, l'interfaccia Dimension è implementata sulla funzione getDimension() come tipo restituito. Il tipo restituito di getDimension() deve corrispondere alle proprietà e al tipo menzionati per Interface Dimension.

Il codice compilato in Javascript sarà come segue:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

Durante la compilazione, se il tipo restituito non corrisponde all'interfaccia, verrà generato un errore.

Interfaccia come parametro di funzione

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width +"-"+ dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // will get "300px-250px"

Nell'esempio sopra, hai utilizzato Interface Dimension come parametro per la funzione getDimension(). Quando chiami la funzione, devi assicurarti che il parametro che le viene passato corrisponda alla regola di interfaccia definita.

Il codice compilato in Javascript sarà come segue:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

Classe che implementa l'interfaccia

Per utilizzare l'interfaccia con una classe, è necessario utilizzare la parola chiave attrezzi.

Sintassi per la classe che implementa un'interfaccia:

class NameofClass implements InterfaceName {
}

L'esempio seguente mostra il funzionamento dell'interfaccia con la classe.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string; 
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

Nell'esempio precedente, hai definito l'interfaccia Dimension con le proprietà larghezza e altezza entrambe di tipo stringa e un metodo chiamato getWidth() che ha il valore restituito come stringa.

Il codice compilato in Javascript sarà come segue:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

Funzioni in TypeScript

Le funzioni sono un insieme di istruzioni eseguite per eseguire un compito. In Javascript, la maggior parte del codice è scritta sotto forma di funzioni e svolge un ruolo importante. In TypeScript, hai classi, interfacce, moduli, spazi dei nomi disponibili, ma le funzioni svolgono comunque un ruolo importante. La differenza tra la funzione in javascript e TypeScript la funzione è il tipo restituito disponibile con TypeScript funzione.

JavaFunzione script:

function add (a1, b1) { 
   return a1+b1;
}

TypeScript funzione:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

Nelle funzioni sopra, viene aggiunto il nome della funzione, i parametri lo sono a1e b1 entrambi hanno un tipo come numero e anche il tipo restituito è un numero. Se ti capita di passare una stringa alla funzione, verrà generato un errore in fase di compilazione durante la compilazione JavaScript.

Effettuare una chiamata alla funzione: aggiungi

let  x = add(5, 10) ;  // will return 15
let  b = add(5); // will throw an error : error TS2554: Expected 2 arguments, but got 1.
let c = add(3,4,5); // will throw an error : error TS2554: Expected 2 arguments, but got 3.
let t = add("Harry", "John");// will throw an error :  error TS2345: Argument of type '"Harry"' is not assignable to parameter of type 'number'.

I parametri a1 e b1 sono parametri obbligatori e genereranno un errore se non ricevuti in questo modo. Inoltre, il tipo di parametro e il tipo restituito sono molto importanti e non possono essere modificati una volta definiti.

Parametri facoltativi per una funzione

In javascript, tutti i parametri delle funzioni sono facoltativi e considerati indefiniti se non vengono passati. Ma non è lo stesso caso con TypeScript, una volta definiti i parametri è necessario inviare anche quelli, ma nel caso in cui si desideri mantenere qualche parametro facoltativo, è possibile farlo utilizzando? contro il nome del parametro come mostrato di seguito:

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3.

Tieni presente che i parametri opzionali devono essere definiti in una funzione solo per ultimi, non puoi avere il primo parametro come opzionale e il secondo come obbligatorio. Quando chiami la funzione con un parametro il compilatore genererà un errore. Quindi è necessario mantenere i parametri opzionali alla fine.

Assegna valori predefiniti a Params

È possibile assegnare valori predefiniti ai parametri come mostrato di seguito:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John"); // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

Similmente ai parametri opzionali, anche in questo caso i parametri inizializzati di default devono essere mantenuti alla fine di una funzione.

Parametri di riposo

Hai visto come TypeScript gestisce i parametri obbligatori, i parametri facoltativi e i parametri inizializzati con il valore predefinito. Ora daremo un'occhiata ai parametri di riposo. I parametri rest sono un gruppo di parametri opzionali definiti insieme e vengono definiti utilizzandone tre punti (…) seguito dal nome del param, che è un array.

Sintassi per i parametri Rest:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

Come mostrato sopra, i restanti parametri sono definiti utilizzando (…param-name); il resto param è un array con il prefisso di tre punti. All'array verranno passati tutti i parametri. È possibile chiamare la funzione, come mostrato nell'esempio seguente:

Esempio:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as MondayTuesdayWednesdayThursday

Funzioni freccia

La funzione freccia è una delle funzionalità importanti rilasciate in ES6 ed è disponibile in TypeScript pure. La sintassi della funzione freccia contiene una freccia grossa per cui la funzione è chiamata funzione freccia.

Funzione freccia Sintassi:

var nameoffunction = (params) => {				
 // code here			
}

A cosa serve la funzione freccia?

Diamo un'occhiata all'esempio per comprendere il caso d'uso della funzione Arrow:

Esempio:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined.    
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

Hai creato una funzione anonima che ha la proprietà this. Il punteggio viene inizializzato su 0 e un metodo getScore che internamente ha un setTimeout e in 1 secondo consola this.score. Il valore consolato fornisce undefine anche se hai this.score definito e inizializzato. Il problema qui è con this parola chiave. La funzione all'interno di setTimeout ha il suo this e cerca di fare riferimento al punteggio internamente e, poiché non è definito, restituisce indefinito.

Lo stesso può essere fatto utilizzando la funzione Freccia come mostrato di seguito:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

Hai modificato la funzione all'interno di setTimeout in una funzione freccia come mostrato di seguito:

setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);

Una funzione freccia non ha una propria questo definito e condivide il suo genitore questo, quindi le variabili dichiarate all'esterno sono facilmente accessibili utilizzando this all'interno di una funzione freccia. Sono utili a causa della sintassi più breve nonché per callback, gestori di eventi, funzioni di temporizzazione interne, ecc.

TypeScript Enums

TypeScript Enum è un oggetto che ha una raccolta di valori correlati archiviati insieme. Javascript non supporta le enumerazioni. La maggior parte dei linguaggio di programmazione piace Java, C, C++ supporta TypeScript Enum ed è disponibile anche con TypeScript pure. Le enumerazioni vengono definite utilizzando la parola chiave enum.

Come dichiarare un Enum?

Sintassi:

enum NameofEnum {
   value1,
   value2,
    ..
}

Esempio: Enum

enum Directions {
North,
South,
East,
West
}

Nell'esempio precedente, hai definito un'enumerazione chiamata Directions. Il valore fornito è Nord, Sud, Est, Ovest. I valori sono numerati da 0 per il primo valore nell'enumerazione e successivamente incrementati di 1 per il valore successivo.

Dichiarare un enum con un valore numerico

Per impostazione predefinita, se a un enum non viene assegnato alcun valore, viene considerato un numero che inizia da 0. L'esempio seguente mostra un enum con un valore numerico.

enum Directions {
North = 0,
South = 1, 
East =2,
West =3
}

Puoi anche assegnare un valore iniziale all'enumerazione e i valori enumerativi successivi otterranno i valori incrementati. Per esempio:

enum Directions {
North = 5,
South, // will be 6
East, // 7
West // 8
}

Ora il valore enum Nord inizia con 5, quindi Sud avrà valore 6, Est = 7 e Ovest = 8.

Puoi anche assegnare valori di tua scelta invece di prendere quelli predefiniti. Per esempio:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Come accedere a un Enum?

L'esempio seguente mostra come utilizzare Enum nel codice:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North); // output is  0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]); //output is North

Il codice compilato in Javascript è il seguente:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Dal Javascript non supporta le enumerazioni, converte l'enumerazione in funzioni autoinvocate come mostrato sopra.

Dichiarare un enum con un valore stringa

Puoi assegnare valori stringa a tua scelta, come mostrato nell'esempio seguente:

Esempio:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North); // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]); // output is North

Il codice compilato in Javascript è il seguente:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

In cosa sono contenuti i moduli TypeScript?

I file creati in TypeScript hanno accesso globale, il che significa che le variabili dichiarate in un file sono facilmente accessibili in un altro file. Questa natura globale può causare conflitti di codice e causare problemi con l'esecuzione in fase di esecuzione. Sono disponibili funzionalità del modulo di esportazione e importazione che possono essere utilizzate per evitare conflitti tra variabili globali e funzioni. Questa funzionalità è disponibile in JavaScript con rilascio ES6 e supportato anche in TypeScript.

Perché hai bisogno dei moduli in TypeScript?

L'esempio seguente mostra il problema senza moduli:

Esempio test1.ts

let age : number = 25;

Hai definito un'età variabile di tipo numero in test1.ts.

Esempio test2.ts

Nel file test2.ts puoi accedere facilmente alla variabile definito in test1.ts e modificarlo anche come mostrato di seguito:

age = 30; // changed from 25 to 30.
let _new_age = age;

Quindi il caso precedente può creare molti problemi poiché le variabili sono disponibili a livello globale e possono essere modificate.

Con moduli, il codice scritto rimane locale del file e non è possibile accedervi al di fuori di esso. Per accedere a qualsiasi cosa dal file, è necessario esportarlo utilizzando la parola chiave export. It viene utilizzato quando si desidera che la variabile, la classe, la funzione o l'interfaccia vengano utilizzate in un altro file. Importare viene utilizzato quando si desidera accedere anche alla variabile, classe, interfaccia o funzione esportata. In questo modo il codice scritto rimane intatto all'interno del file e, anche se si definiscono gli stessi nomi di variabili, questi non vengono confusi e si comportano in modo locale rispetto al file in cui sono dichiarati.

Utilizzo di Esporta e Importa

Esistono molti modi per esportare e importare. Quindi discuteremo qui la sintassi che viene maggiormente utilizzata.

La sintassi per l'importazione e l'esportazione 1:

export  nameofthevariable or class name or interface name etc

//To import above variable or class name or interface you have to use import as shown below:
 

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

Ecco un esempio funzionante utilizzando l'esportazione e l'importazione.

Esempio:

prova1.ts

export let age: number = 25;

La parola chiave Esporta viene utilizzata per condividere la variabile età in un altro file.

prova2.ts

import { age } from "./test1"
let new_age :number = age;

La parola chiave Import viene utilizzata per accedere a variabile ed è necessario specificare il percorso del file come mostrato sopra.

Sintassi per l'importazione e l'esportazione 2:

Esiste un altro modo per esportare e importare e la sintassi per lo stesso è quella mostrata di seguito:

export = classname;

import classname = require(“file path of modulename”)

Quando si utilizza esportare = per esportare il tuo modulo, l'importazione deve utilizzare require ("percorso file di nomemodulo") per importarlo.

Ecco un esempio pratico che illustra il caso sopra descritto:

Cliente.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testCliente.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

Caricatore di moduli

I moduli non possono funzionare da soli, quindi è necessario il caricatore dei moduli per individuare le dipendenze di importazione come hai visto in TypeScript esempi mostrati sopra. Il caricatore di moduli disponibile è CommonJS per nodejs e Require.js da eseguire nel browser.

Per compilare il codice utilizzando il modulo CommonJS utilizzare il seguente comando:

tsc --module commonjs testCustomer.ts

Per compilare il codice utilizzando il modulo Requirejs utilizzare il seguente comando:

tsc --module amd testCustomer.ts

I file dipendenti verranno convertiti in file js con il comando precedente.

Esempio da testCustomer.ts a testCustomer.js utilizzando Requirejs

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Esempio da Customer.ts a Customer.js utilizzando Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

Per testarlo utilizzando require.js, è necessario creare un file chiamato main.js, che fa riferimento alle dipendenze come mostrato.

Ecco la struttura delle cartelle:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

principale.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

test.html

<!DOCTYPE html>			
<html>			
<head>			
    <title>TypeScript Module testing using Requirejs</title>			
    <script data-main="main" src="require.js"></script>			
</head>			
<body>			
    <h3>Testing modules using Requirejs</h3>			
</body>			
</html>

Caricatore di moduli

Spazi dei nomi in TypeScript

Lo spazio dei nomi è fondamentalmente una raccolta di classi, interfacce, variabili e funzioni insieme in un unico file.

Sintassi dello spazio dei nomi

namespace name{

export class {
}

export interface {
}

export const constname;

}

Il codice correlato è disponibile in uno spazio dei nomi.

Esempio di funzionamento dello spazio dei nomi: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

Il nome dello spazio dei nomi è Configurazione studente, hai aggiunto un'interfaccia StudDetails, la funzione addSpace e una classe chiamata Student.

Accesso allo spazio dei nomi

Di seguito è riportato il codice in cui si utilizza lo spazio dei nomi Configurazione dello studente.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

La classe, l'interfaccia, una funzione disponibile all'interno di uno spazio dei nomi deve essere riferita utilizzando il nome dell'esempio dello spazio dei nomi StudentSetup.addSpace per accedere alla funzione, StudentSetup.Student per accedere alla lezione.

Puoi compilare entrambi i file in un unico js come mostrato di seguito:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

Controlla l'output nel prompt dei comandi utilizzando il comando seguente:

node namespace.js

Verrà visualizzato l'output come:

The name is: H a r r y

Dichiarazioni ambientali in TypeScript

TypeScript consente di utilizzare file javascript di terze parti tramite dichiarazione ambientale. Il vantaggio di questa funzionalità è che non è necessario riscrivere e tuttavia utilizzare tutte le funzionalità della libreria in TypeScript.

Sintassi ambientale

Per dichiarare il modulo ambientale:

declare module moduleName {
   //code here
}

Il file ambientale deve essere salvato come:

filename.d.ts

Per utilizzare il file nomefile.d.ts nel tuo .ts devi riferirlo come:

/// <reference path="filename.d.ts"/>

La dichiarazione del tipo ambientale in TypeScript avrà un riferimento alla libreria di terze parti e ri-dichiarerà le funzioni richieste con il suo tipo. Ad esempio, considera di avere una piccola libreria javascript, come mostrato di seguito:

Terzo JavaFile di script: testString.js

Esempio: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

Hai un oggetto chiamato StringChecks che ha funzioni come isString, convertToUpperCase, convertToLowerCase e converToStringBold.

Creazione del Modulo Ambientale in TypeScript

Ora creeremo un modulo ambientale che farà riferimento alle funzioni js di cui sopra e aggiungerà anche il controllo del tipo secondo i nostri requisiti.

Nome file: tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

È necessario definire un nome di modulo come TestString e avere esportato l'interfaccia StringsFunc.

isString(str: stringa): booleano

=> Questo prenderà param come una stringa e il tipo restituito sarà booleano. Quando lo usi nel tuo file .ts, nel caso in cui ti capita di passare il parametro come numero o qualcosa di diverso da una stringa, ti verrà restituito un errore di tipo di compilazione.

convertToUpperCase(str:string): stringa

=> Questo prenderà l'argomento come stringa e restituirà una stringa. Lo stesso vale convertToLowerCase(str: stringa)
: corda; E convertToStringBold(str: stringa): stringa
;

Poiché nel file javascript hai il nome dell'oggetto come StringChecks, finalmente dobbiamo fare riferimento allo stesso nel file .d.ts che viene fatto come:

declare var StringChecks: TestString.StringsFunc;

Utilizzo del modulo Ambient in TypeScript

Ora ecco il file test.ts in cui verrà utilizzato il file di ambiente tstring.d.ts

Esempio: test.ts

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Compilare TypeScript tsc test.ts in test.js

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Ora puoi utilizzare test.js nel file html e anche il file di libreria testString.js

<html>			
<head>			
    <title>Test TypeScript Ambient</title>			
    <script src="testStrings.js"></script>			
    <script src="test.js"></script>			
</head>			
<body>			
</body>			
</html>

Questo è l'output visto nella console:

true			
HELLO WORLD			
hello			
<b>Hello World</b>

TypeScript Storia

Vediamo importanti punti di riferimento della storia di TypeScript:

  • Dopo due anni di sviluppo interno presso Microsoft. TypeScript 0.9, rilasciato nel 2013
  • Supporto aggiuntivo per i farmaci generici TypeScript 1.0 è stato rilasciato alla build 2014
  • Nel luglio 2014, un nuovo TypeScript è arrivato il compilatore che è cinque volte più veloce della versione precedente.
  • Nel luglio 2015, supporto per i moduli ES6, parola chiave dello spazio dei nomi, per, di supporto, decoratori.
  • Nel novembre 2016 è stata aggiunta una funzionalità come i tipi di chiave e di ricerca dei tipi mappati e rest.
  • Il 27 marzo 2018, i tipi condizionali, la chiave migliorata con i tipi di intersezione supporta l'aggiunta nel file TypeScript.

Perché usare TypeScript?

Qui ci sono importanti vantaggi / vantaggi dell'utilizzo TypeScript

  • Progetto grande e complesso in JavaGli script sono difficili da codificare e gestire.
  • TypeScript aiuta molto nell'organizzazione del codice e tuttavia elimina la maggior parte degli errori durante la compilazione.
  • TypeScript supporta le librerie JS e la documentazione API
  • È un linguaggio di scripting digitato facoltativamente
  • TypeScript Il codice può essere convertito in plain JavaCodice script
  • Migliore strutturazione del codice e tecniche di programmazione orientata agli oggetti
  • Consente un migliore supporto dello strumento per i tempi di sviluppo
  • Può estendere il linguaggio oltre i decoratori standard, async/await

Chi usa TypeScript?

Ecco alcune delle applicazioni più comuni di TypeScript:

  • Il team angolare utilizza TypeScript.
  • Installazione di NodeJS e NPM
  • TypeScript SERVIZIO DI
  • Compilare TypeScript codice a Javascript
  • Esegui il codice utilizzando Nodejs
  • Eseguire Javascript nel navigatore
  • Compilare TypeScript codice a Javascript utilizzando la versione EcmaScript
  • Puoi facilmente compilare il codice scritto in TypeScript a JavaScript che utilizza NodeJS.
  • Quindi con cui lavorare TypeScript devi prima scaricare e installare NodeJS.

Sintesi

  • TypeScript è un superset di JavaScript. TypeScript è un puro linguaggio di programmazione orientato agli oggetti che supporta classi, interfacce, ecc.
  • TypeScript supporta tutte le funzionalità Ecmascript rilasciate e gli sviluppatori possono utilizzare le stesse durante la codifica.
  • Le variabili vengono utilizzate per memorizzare valori e il valore può essere una stringa, un numero, un valore booleano o un'espressione.
  • In TypeScript, il tipo di una variabile è definito solo all'inizio e durante l'esecuzione deve mantenere lo stesso tipo; qualsiasi modifica comporterà un errore in fase di compilazione in JavaScript.
  • Una matrice in TypeScript è un tipo di dati in cui è possibile memorizzare più valori.
  • La classe è una nuova funzionalità aggiunta da ES6 in poi, quindi prima JavaÈ stato provato lo script della funzionalità di tipo classe utilizzando una funzione con funzionalità di prototipo per riutilizzare il codice.
  • TypeScript supporta i modificatori di accesso pubblico, privato e protetto ai tuoi metodi e proprietà.
  • Una delle caratteristiche principali di TypeScript sono le interfacce. L'interfaccia è un insieme di regole definite che devono essere implementate dall'entità che la utilizza.
  • Le funzioni sono un insieme di istruzioni eseguite per eseguire un compito.
  • TypeScript Enum è un oggetto che ha una raccolta di valori correlati archiviati insieme.