TypeScript Tutorial: Cos'è un'interfaccia, un'enumerazione e un array?

Cosa è TypeScript?

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

Sono supportate tutte le ultime funzionalità rilasciate per ECMAScript TypeScripte inoltre TypeScript possiede le proprie caratteristiche orientate agli oggetti come interfacce, dichiarazioni ambientali ed ereditarietà di classe, che aiutano nello sviluppoping una grande applicazione che altrimenti sarebbe difficile da realizzare JavaCopione.

La relazione è unidirezionale. Ogni valido JavaIl file di script è già valido TypeScript, ma il contrario non è vero, perché le annotazioni di tipo esistono solo in TypeScript e vengono cancellati durante la compilazione.

Perché usare TypeScript?

Ecco i vantaggi principali dell'utilizzo TypeScript:

• Grandi e complessi progetti in JavaGli script sono difficili da codificare e gestire.
• TypeScript Aiuta molto nell'organizzazione del codice e corregge la maggior parte degli errori durante la compilazione anziché in fase di esecuzione.
• TypeScript Supporta librerie JS e documentazione API.
• Si tratta di un linguaggio di scripting a tipizzazione opzionale, quindi i tipi possono essere adottati gradualmente.
• TypeScript il codice può essere convertito in codice semplice JavaCodice script per qualsiasi browser di destinazione.
• Offre una migliore strutturazione del codice e tecniche di programmazione orientata agli oggetti.
• Consente un migliore supporto degli strumenti in fase di sviluppo, tra cui il completamento automatico e il refactoring sicuro.
• Può estendere il linguaggio oltre lo standard, con funzionalità come i decoratori.

Il vantaggio pratico più significativo è il supporto dell'editor. Poiché il compilatore conosce la struttura di ogni valore, un editor può rinominare una proprietà in tutto il progetto e segnalare ogni punto in cui la struttura non corrisponde più.

TypeScript Storia

Vediamo i punti di riferimento più importanti della storia di TypeScript:

• Dopo due anni di sviluppo interno presso Microsoft, TypeScript La versione 0.9 è stata rilasciata nel 2013.
• TypeScript La versione 1.0, con supporto aggiuntivo per i tipi generici, è stata rilasciata alla Build 2014.
• Nel luglio 2014, un nuovo TypeScript È arrivato un compilatore cinque volte più veloce della versione precedente.
• Nel luglio 2015 è stato aggiunto il supporto per i moduli ES6, la parola chiave namespace, for…of e i decoratori.
• Nel novembre 2016 sono stati aggiunti i tipi mappati, i tipi chiave e di ricerca, e il resto e la diffusione degli oggetti.
• Il 27 marzo 2018 sono stati aggiunti i tipi condizionali e una versione migliorata di keyof con i tipi di intersezione.
• TypeScript La versione 5.0, rilasciata a marzo 2023, ha modernizzato i decoratori e ridotto le dimensioni del pacchetto.
• TypeScript La versione 6.0 è arrivata nel marzo 2026 come rilascio finale basato su JavaCodice sorgente dello script.
• TypeScript La versione 7.0 sposta il compilatore a un'implementazione nativa di Go, che Microsoft Secondo le segnalazioni, è circa dieci volte più veloce della versione 6.0.

Chi usa TypeScript?

TypeScript Non è più una scelta di nicchia. È alla base di molti degli strumenti front-end e back-end più diffusi, e l'elenco seguente mostra dove è più probabile che un principiante lo incontri.

• Angolare: Il framework Angular è scritto in TypeScripte si prevede che anche il codice dell'applicazione venga scritto in esso.
• Progetti React e Vue: Entrambi gli ecosistemi sono ufficiali di bordo TypeScript modelli, e la maggior parte degli starter moderni lo abilita di default.
• Backend Node.js: I framework server come NestJS sono costruiti attorno TypeScript classi e decoratori.
• Strumenti di modifica: Visual Studio Code è di per sé un grande TypeScript codice sorgente, ed è per questo che il supporto linguistico è così completo.
• Front-end per grandi aziende: I team che lavorano con molti collaboratori lo adottano per individuare gli errori di integrazione prima della distribuzione.

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 scaricare e installare Nodejs per il proprio sistema operativo. Istruzioni dettagliate sono disponibili nella guida su Come scaricare e installare Node.js.

Passaggio 2) Controlla la versione di Nodejs e npm

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

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

Qualsiasi versione LTS corrente di Node funziona. TypeScript Richiede solo una versione di Node supportata per eseguire il compilatore.

Passo 3) TypeScript Installazione

Crea la directory del tuo progetto (tipoproject\) ed esegui npm init, come mostrato nel comando seguente:

npm init

Passaggio 4) Avviare l'installazione

Questo crea il file package.json, che conterrà le dipendenze del nostro progetto.

Una volta terminato, installare 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 potrai usare il TypeScript TSC comando da qualsiasi directory, poiché è installato globalmente. Nel caso in cui non si desideri installare TypeScript A livello globale, utilizzare il comando seguente:

npm install --save-dev typescript

Crea una cartella src\ nella directory del tuo progetto e all'interno di src\ crea il 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 sopra riportato, utilizzare il seguente comando.

If TypeScript per l'installazione globale utilizzare il comando seguente:

tsc test.ts

If TypeScript è installato localmente nel tuo progetto devi usare il percorso di TypeScript dalla cartella node_modules, come mostrato, oppure eseguilo tramite npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Il comando precedente creerà un file test.js che conterrà 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

Ora eseguiremo test.js in Node.js come segue:

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

Il valore passato a console.log viene visualizzato quando viene eseguito test.js.

Eseguire JavaScript nel browser

Esempio:

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

Compilare TypeScript codice a Javascript utilizzando la versione EcmaScript

TypeScript Il browser supporta tutte le funzionalità di ECMAScript rilasciate e gli sviluppatori possono utilizzarle durante la programmazione. Tuttavia, non tutte le nuove funzionalità sono supportate dai browser meno recenti, quindi potrebbe essere necessario compilare il codice per una versione precedente di ECMAScript. TypeScript fornisce opzioni del compilatore che fanno esattamente questo.

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, il target è ES3 per il compilatore classico. Se si desidera modificarlo, è possibile utilizzare il comando sopra indicato.

Al momento utilizzeremo ES6 come target:

tsc --target ES6  test.ts

test.ts in test.js

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

addnumbers(10, 20);

Il codice rimane invariato perché la funzione freccia che hai utilizzato è una funzionalità di ES6 e non subisce modifiche quando viene compilata in ES6.

Per impostazione predefinita il target è ES3, quindi senza un target si ottiene test.js come:

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

Quindi, in questo caso, la freccia spessa viene sostituita da una normale funzione anonima.

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. Impariamo quindi a dichiarare e assegnare un valore alle variabili in TypeScript.

Le variabili non possono essere utilizzate nel codice senza essere definite. Per dichiarare una variabile puoi usare

var parola chiave,

lasciare parola chiave

const parola chiave

Lavorare con le variabili in TypeScript è simile JavaScript e utenti che hanno familiarità con JavaLo script lo troverà molto facile. Nel codice moderno, lasciare and const sono preferiti su var, perché il loro ambito di blocco impedisce un'intera classe di bug.

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 and accessible only inside function test
    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; // t is redeclared inside the function, so changes stay local
    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(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

Dichiarare variabili utilizzando let

Migliori TypeScript la sintassi di let è la seguente:

Sintassi:

let name = "Roy";

Il funzionamento del lasciare la variabile è quasi la stessa di var, ma con un'importante differenza, che l'esempio seguente illustra.

Esempio:

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

test(); // throws an error: Cannot find name 't'

Quanto sopra TypeScript l'esempio genera un errore, ma lo stesso codice avrebbe funzionato con var parola chiave. Variabili dichiarate usando lasciare sono disponibili solo all'interno del blocco in cui sono dichiarati. In questo esempio, t esiste solo all'interno del blocco if, non nell'intera funzione.

Lo stesso principio si applica all'interno di qualsiasi funzione, ciclo for, ciclo while o blocco switch. Una variabile `let` è disponibile solo all'interno di quel blocco e farvi riferimento all'esterno genera un errore. Questa è la principale differenza tra `var` e `let`.

Dichiarare variabili utilizzando const

Const indica le variabili costanti. Sono simili alle variabili let, con la differenza che una volta assegnato un valore, questo non può essere modificato. Una dichiarazione const deve quindi essere inizializzata sulla stessa riga.

Sintassi:

const name = "Roy";

Esempio:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

Quindi, usa `const` ogni volta che sai che il valore assegnato non verrà riassegnato. Tieni presente che `const` impedisce la riassegnazione del binding, non la modifica dell'oggetto a cui punta.

Digita in TypeScript

TypeScript è un linguaggio fortemente tipizzato, mentre JavaLo script non lo è. Una variabile il cui valore è definito come stringa può essere cambiato in un numero senza alcun problema in JavaSceneggiatura. Lo stesso non è tollerato in TypeScript. in TypeScript, il tipo di una variabile è definito all'inizio e durante l'esecuzione deve mantenere quel tipo. Qualsiasi modifica porta a un errore in fase di compilazione durante la compilazione a JavaScript.

Di seguito sono riportate le tipologie principali:

Numero

Accetta solo numeri interi, numeri decimali, frazioni e valori numerici simili.

Sintassi:

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

Ecco alcuni metodi importanti che possono essere utilizzati con i tipi numerici:

aRisolto() – convertirà il numero in una stringa mantenendo le cifre decimali passate 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 numerici

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 di tipo stringa.

Sintassi:

let str :string = "hello world";

Ecco alcuni metodi importanti che possono essere utilizzati con i tipi stringa:

• dividere() – questo metodo dividerà la stringa in un array.
• charat() – questo metodo restituirà il carattere all'indice specificato.
• indice di() – questo metodo restituirà la posizione della prima occorrenza del valore fornito.
• sostituire() – questo metodo accetta 2 stringhe. Cerca il primo valore nella stringa e, se presente, lo sostituisce con il secondo, restituendo una nuova stringa.
• tagliare() – questo metodo rimuoverà gli spazi bianchi da entrambi i lati della stringa.
• substr() – questo metodo restituirà una parte della stringa, a seconda della posizione iniziale e della lunghezza specificata.
• sottostringa() – questo metodo restituirà una parte della stringa, a seconda delle posizioni di inizio e fine. Il carattere in posizione finale è 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 if the value does not exist
_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

Un valore booleano accetta solo i valori logici vero e falso. A differenza del semplice JavaScript, i numeri 0 e 1 non sono accettati perché sono di tipo numerico.

Sintassi:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

Qualsiasi

Sintassi:

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

Variabili dichiarate utilizzando il in qualsiasi Il tipo può contenere una stringa, un numero, un array, un valore booleano o essere vuoto. TypeScript non genererà alcun errore in fase di compilazione, il che è simile alle variabili in JavaScript. Utilizzare any type solo quando non si è certi del tipo di valore che verrà associato a quella variabile, perché disattiva ogni controllo su quel valore.

vuoto

Il tipo void viene utilizzato principalmente come tipo di ritorno di una funzione che non restituisce alcun valore.

Sintassi:

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

TypeScript Italia

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

Dal TypeScript È un linguaggio fortemente tipizzato, quindi è necessario specificare il tipo di dati dei valori in un array. Altrimenti, verranno trattati come 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 with all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

Diversi modi per accedere agli elementi di un array

Per ottenere gli elementi da un array, i valori partono dall'indice 0 e arrivano fino alla lunghezza dell'array meno uno.

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

È anche possibile ottenere gli elementi da un array utilizzando un TypeScript per 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]);
}

Produzione:

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]);
}

Produzione:

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);
}

Produzione:

2016
2017
2018
2019

Utilizzo del ciclo forEach

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

Produzione:

2016
2017
2018
2019

TypeScript Metodi di matrice

Migliori TypeScript L'oggetto Array possiede numerose 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 arrayname.method().

Esempio per la proprietà della lunghezza

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

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

Esempio di metodo inverso

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

Esempio per il metodo di ordinamento

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

Esempio per il metodo pop

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

Esempio per il metodo dello spostamento

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

Esempio per il metodo push

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
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 ciò che è possibile in JavaLa sceneggiatura è possibile anche in TypeScript. La classe è una funzionalità aggiunta da ES6 in poi. In precedenza in JavaLa funzionalità di script e classe è stata ottenuta utilizzando una funzione con metodi prototipo per riutilizzare il codice. Utilizzando le classi, il tuo codice può avvicinarsi a linguaggi come Java, C# e Pythondove il codice è facilmente riutilizzabile.

Definizione di una classe in TypeScript

Ecco la 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 precedente, hai una classe chiamata Students. Essa ha le proprietà age, name e roll_no.

Costruttore in a TypeScript Classe

La classe Students definita 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 costruttore ha i parametri età, nome e numero di matricola. Il costruttore si occupa dell'inizializzazione delle proprietà quando la classe viene istanziata. Le proprietà vengono accedute tramite questo parola chiave, ad esempio this.age per accedere all'età e this.roll_no per accedere al numero di matricola. È anche possibile avere un costruttore predefinito, come mostrato di seguito:

constructor () {}

Metodi all'interno di a TypeScript Classe

Nella classe Students sono definiti dei metodi, ad esempio getRollNo(), getName() e getAge(), che restituiscono i valori delle proprietà roll_no, name e age.

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

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

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

Creazione di un'istanza di una classe in TypeScript

In TypeScriptPer creare un'istanza di una classe, si utilizza l'operatore `new`. Quando si crea un'istanza con `new`, si ottiene un 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 di un TypeScript Classe a JavaCopione

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

Command: tsc  Students.ts

L'output di JavaIl codice dello script in fase di compilazione è quello mostrato di seguito:

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 auto-invocata.

Eredità di classe

Le classi possono essere ereditate utilizzando il file si estende 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. Studente estende Persona, e l'oggetto creato da Studente può accedere ai propri metodi e proprietà, così come a quelli della classe che estende.

Ora apportiamo alcune modifiche alla classe sopra.

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);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    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 differenza rispetto all'esempio precedente consiste nella definizione di un costruttore nella classe Student. Il costruttore accetta gli stessi parametri della classe base, più eventuali parametri aggiuntivi propri.

In TypeScript È necessario chiamare `super` con tutti i parametri della classe base. Questa deve essere la prima istruzione all'interno del costruttore, perché `super` esegue il costruttore della classe estesa. Qualsiasi proprietà dichiarata dalla classe derivata, come ad esempio `tmarks`, deve quindi essere assegnata esplicitamente, altrimenti `getMarks` restituirebbe `undefined`.

Accedi ai modificatori in TypeScript

TypeScript Supporta i modificatori di accesso pubblico, privato e protetto per metodi e proprietà. Per impostazione predefinita, se non viene specificato alcun modificatore di accesso, il metodo o la proprietà sono considerati pubblici e sono facilmente accessibili dall'oggetto della classe.

Nel caso di modificatori di accesso privati, i membri non sono disponibili dall'oggetto della classe e sono destinati ad essere utilizzati solo all'interno della classe stessa. Non sono disponibili per le classi ereditate.

Nel caso dei modificatori di accesso protetto, i membri sono destinati ad essere utilizzati all'interno della classe e della classe ereditata, e non sono 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

Interfaccia in TypeScript

Una delle caratteristiche principali di TypeScript Si tratta di interfacce. Un'interfaccia è un insieme di regole 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 contrassegnare una proprietà o un metodo come opzionale utilizzando la sintassi "?". L'interfaccia aggiunge un controllo di tipo rigoroso per qualsiasi funzione, variabile o classe che la implementi.

Sintassi di un'interfaccia in TypeScript

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

Hai definito un'interfaccia denominata Dimension che ha le proprietà width e height, entrambe di tipo stringa.

Questa interfaccia può essere implementata tramite una variabile, una funzione o una classe. Ecco un esempio di 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. Se manca una proprietà o viene modificato un tipo, verrà generato un errore in fase di compilazione durante la compilazione del codice. JavaScript.

Il codice sopra riportato, una volta compilato in JavaLo script si presenta come segue:

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

Vediamo ora come utilizzare un'interfaccia con una funzione.

Utilizzo di un'interfaccia su una funzione come tipo di ritorno

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 viene utilizzata come tipo di ritorno della funzione getDimension(). Il valore di ritorno deve corrispondere alle proprietà e ai tipi dichiarati nell'interfaccia.

Il compilato JavaIl codice dello script sarà il seguente:

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

Durante la compilazione, se il tipo di ritorno 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"}); // "300px-250px"

Nell'esempio precedente, hai utilizzato l'interfaccia Dimension come parametro della funzione getDimension(). Quando chiami la funzione, il parametro che le viene passato deve corrispondere alle regole definite dall'interfaccia.

Il compilato JavaIl codice dello script sarà il seguente:

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

Classe che implementa un'interfaccia

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

Sintassi per una classe che implementa un'interfaccia:

class NameofClass implements InterfaceName {
}

L'esempio seguente mostra un'interfaccia che interagisce con una 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à width e height, entrambe di tipo stringa, e un metodo chiamato getWidth() che restituisce una stringa.

Il compilato JavaIl codice dello script sarà il seguente:

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 insiemi di istruzioni eseguite per svolgere un compito. JavaNella sceneggiatura, la maggior parte del codice è scritta sotto forma di funzioni e queste svolgono un ruolo importante. TypeScript Hai a disposizione classi, interfacce, moduli e namespace, ma le funzioni giocano ancora un ruolo importante. La differenza tra una funzione in JavaScrittura e TypeScript è il parametro e i tipi di ritorno disponibili con un TypeScript funzione.

JavaFunzione script:

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

TypeScript funzione:

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

Nella funzione sopra, il nome della funzione è add, i parametri sono a1 and b1, entrambi di tipo numero, e anche il tipo di ritorno è un numero. Se passi una stringa alla funzione, verrà generato un errore in fase di compilazione durante la compilazione in JavaScript.

Effettuare una chiamata alla funzione: add

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

I parametri a1 and b1 sono obbligatori e la loro omissione causerà un errore. I tipi di parametro e il tipo di ritorno sono ugualmente importanti e non possono essere modificati una volta definiti.

Parametri facoltativi per una funzione

In JavaScript, tutti i parametri delle funzioni sono opzionali e sono considerati indefiniti se non vengono passati. Lo stesso non vale in TypeScriptUna volta definiti i parametri, è necessario fornirli. Se si desidera che un parametro sia facoltativo, aggiungere un punto interrogativo dopo il nome del parametro, come mostrato di seguito:

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

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

Si prega di notare che i parametri opzionali devono essere definiti per ultimi. Non è possibile avere il primo parametro opzionale e il secondo obbligatorio, perché il compilatore non saprebbe quale valore è stato fornito.

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

Analogamente ai parametri opzionali, anche i parametri predefiniti inizializzati devono essere mantenuti alla fine dell'elenco dei parametri.

Parametri di riposo

Hai visto come TypeScript gestisce parametri obbligatori, parametri opzionali e parametri con valore predefinito. Ora esamineremo i parametri rimanenti. I parametri rimanenti sono un gruppo di parametri opzionali definiti insieme, utilizzando tre punti (…) seguito dal nome del parametro, che è un array.

Sintassi per i parametri Rest:

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

Come mostrato sopra, il parametro rest è un array preceduto da tre punti. L'array conterrà tutti gli argomenti rimanenti passati alla funzione.

Esempio:

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

Funzioni freccia

La funzione freccia è una delle funzionalità importanti rilasciate in ES6 ed è disponibile in TypeScript anche. La sintassi contiene una freccia spessa, da cui deriva il nome.

Funzione freccia Sintassi:

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

A cosa serve una funzione freccia?

Vediamo un esempio per comprendere il caso d'uso di una funzione freccia.

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 con una proprietà score inizializzata a 0 e un metodo getScore che internamente utilizza setTimeout e, dopo un secondo, registra this.score. Il valore registrato è indefinito anche se this.score è definito e inizializzato. Il problema risiede nel questo parola chiave. La funzione all'interno di setTimeout ha il suo this, e poiché score non è definito su di esso, il risultato è indefinito.

Lo stesso risultato si può ottenere utilizzando una 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();

Una funzione freccia non ha una propria questoe invece condivide quello del suo ambito padre, quindi le variabili dichiarate all'esterno sono accessibili con questo all'interno di una funzione freccia. Sono utili per la sintassi più breve, così come per callback, gestori di eventi e funzioni di temporizzazione.

TypeScript Enums

A TypeScript Un enum è un oggetto che contiene una raccolta di valori correlati memorizzati insieme. JavaLo script non supporta nativamente gli enum. La maggior parte dei linguaggi di programmazione come Java, C, e C++ supportare enumerazioni e TypeScript li rende disponibili anche. Gli enum vengono definiti 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 con i valori North, South, East e West. I valori sono numerati a partire da 0 per la prima voce e aumentano di 1 per ogni voce successiva.

Dichiarare un Enum con un valore numerico

Per impostazione predefinita, se a un membro di un'enumerazione non viene assegnato un valore, assume un numero a partire da 0. L'esempio seguente mostra un'enumerazione con valori numerici espliciti.

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

È inoltre possibile assegnare un valore iniziale, e i membri successivi riceveranno valori incrementali. Ad esempio:

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

Ora il Nord inizia dal numero 5, quindi il Sud è il 6, l'Est il 7 e l'Ovest l'8.

È inoltre possibile assegnare valori a propria scelta anziché utilizzare quelli predefiniti. Ad esempio:

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

Come accedere a un Enum?

L'esempio seguente mostra come utilizzare un'enumerazione 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 compilato JavaLa sceneggiatura è la 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 JavaLo script non supporta le enumerazioni, il compilatore converte l'enumerazione in una funzione auto-invocata, come mostrato sopra. La doppia assegnazione è ciò che crea la mappa inversa.ping dal numero al nome.

Dichiarare un Enum con un valore stringa

È possibile assegnare valori stringa a propria 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 undefined

Il compilato JavaLa sceneggiatura è la 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?

File creati in TypeScript hanno accesso globale, il che significa che le variabili dichiarate in un file possono essere accessibili in un altro file. Questa natura globale può causare conflitti di codice e problemi di runtime. La funzionalità di esportazione e importazione del modulo può essere utilizzata per evitare conflitti di variabili e funzioni globali. Questa funzionalità è arrivata in JavaScript con la versione ES6 ed è 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 è possibile accedere alla variabile definito in test1.ts e modificarlo come mostrato di seguito:

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

Questo può creare molti problemi, poiché le variabili sono disponibili a livello globale e possono essere modificate da qualsiasi luogo.

Con moduliIl codice scritto rimane locale al file e non può essere consultato dall'esterno. Per condividere qualsiasi elemento da un file, è necessario esportarlo utilizzando la parola chiave export. Esportare Si usa quando si desidera che una variabile, una classe, una funzione o un'interfaccia vengano utilizzate in un altro file. Importare Si usa quando si desidera accedere a un elemento esportato. In questo modo il codice rimane intatto all'interno del file e, anche se si definiscono gli stessi nomi di variabili, questi non vengono confusi.

Utilizzo di Esporta e Importa

Esistono molti modi per esportare e importare. Analizzeremo la sintassi più comunemente utilizzata.

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

export  nameofthevariable or class name or interface name etc

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

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

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

prova1.ts

export let age: number = 25;

La parola chiave export viene utilizzata per condividere la variabile età con 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 è la seguente:

export = classname;

import classname = require("file path of modulename")

Quando si utilizza esportare = Per esportare il modulo, l'importazione deve utilizzare require("percorso del file del nome del modulo").

Ecco un esempio pratico che illustra questo caso.

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 un caricatore di moduli per individuare le dipendenze di importazione, come visto in TypeScript Esempi sopra. I caricatori di moduli disponibili sono CommonJS per Node.js e Require.js per l'esecuzione nel browser.

Per compilare il codice utilizzando il formato del modulo CommonJS, utilizzare il seguente comando:

tsc --module commonjs testCustomer.ts

Per compilare il codice utilizzando il formato del modulo Requirejs, utilizzare il seguente comando:

tsc --module amd testCustomer.ts

I file dipendenti verranno convertiti in file js con il comando sopra indicato.

Esempio di conversione 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 di conversione 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 usando require.js, devi creare un file chiamato main.js che faccia 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>

Spazi dei nomi in TypeScript

Un namespace contiene una raccolta di classi, interfacce, variabili e funzioni riunite in un unico file.

Sintassi dello spazio dei nomi

namespace name{

export class {
}

export interface {
}

export const constname;

}

Il codice correlato è disponibile in un unico namespace.

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 dello studentee hai aggiunto un'interfaccia StudDetails, una funzione addSpace e una classe chiamata Student.

Accesso a uno spazio dei nomi

Di seguito è riportato il codice in cui si utilizza il namespace 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 o la funzione disponibile all'interno di un namespace deve essere referenziata utilizzando il nome del namespace, ad esempio StudentSetup.addSpace per accedere alla funzione e StudentSetup.Student per accedere alla lezione.

È possibile compilare entrambi i file in un unico file JavaScript, come mostrato di seguito:

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

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

node namespace.js

Produzione:

The name is :H a r r y

Dichiarazioni ambientali in TypeScript

TypeScript ti consente di utilizzare terze parti JavaFile di script che utilizzano dichiarazioni ambientali. Il vantaggio di questa funzionalità è che non è necessario riscrivere la libreria, eppure è possibile utilizzare tutte le sue funzionalità con il controllo dei tipi in TypeScript.

Sintassi ambientale

Per dichiarare un 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 file .ts devi farvi riferimento in questo modo:

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

La dichiarazione del tipo ambientale in TypeScript fa riferimento alla libreria di terze parti e ridichiara le funzioni richieste con i propri tipi. Ad esempio, considera il piccolo JavaLa libreria di script è mostrata di seguito.

Terzo JavaFile di script: 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 le funzioni isString, convertToUpperCase, convertToLowerCase e convertToStringBold.

Creazione di un modulo ambientale in TypeScript

Ora creeremo un modulo ambientale che fa riferimento al JavaLo script esegue le funzioni sopra descritte e aggiunge i controlli di tipo secondo necessità.

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;

Definisci un modulo chiamato TestString ed esporti l'interfaccia StringsFunc. Ogni firma specifica cosa accetta e cosa restituisce la funzione:

• isString(str: stringa): booleano – accetta una stringa e restituisce un valore booleano. Il passaggio di un numero o di qualsiasi altro tipo produce un errore in fase di compilazione.
• convertToUpperCase(str: stringa): stringa – prende una stringa e restituisce una stringa.
• convertToLowerCase(str: stringa): stringa – prende una stringa e restituisce una stringa.
• convertToStringBold(str: stringa): stringa – prende una stringa e restituisce una stringa.

Poiché JavaIl file di script espone il nome dell'oggetto StringChecks, al quale infine facciamo riferimento nel file .d.ts:

declare var StringChecks: TestString.StringsFunc;

Utilizzo di un modulo Ambient in TypeScript

Ecco il file test.ts che utilizza il file ambientale tstring.d.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);

Compila con tsc test.ts per produrre 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 è possibile utilizzare test.js in un file HTML insieme al file di libreria testString.js.

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

Produzione:

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

Per continuare, confronta direttamente le due lingue in TypeScript vs JavaCopione, rivisitare JavaMetodi degli array di script per gli equivalenti non tipizzati utilizzati qui e studiare cicli in JavaCopione and interno ed esterno JavaCopione per i principi fondamentali del browser su cui si basa l'output compilato.

DOMANDE FREQUENTI