Share
Dopo aver letto l'esercitazione introduttiva di TypeScript, ora dovresti essere in grado di scrivere il tuo codice TypeScript in un IDE che lo supporta e quindi compilarlo in JavaScript. In questo tutorial, imparerai a conoscere i diversi tipi di tipi di dati disponibili in TypeScript.
JavaScript ha sette diversi tipi di dati: Null, Undefined, Boolean, Number, String, Symbol (introdotto in ES6) e Object. TypeScript definisce alcuni altri tipi e tutti saranno trattati in dettaglio in questo tutorial.
Proprio come in JavaScript, il nullo il tipo di dati in TypeScript può avere solo un valore valido: nullo. Una variabile nulla non può contenere altri tipi di dati come il numero e la stringa. L'impostazione di una variabile su null cancellerà il suo contenuto se ne avesse.
Ricorda che quando il strictNullChecks flag è impostato su vero nel tsconfig.json, solo il valore nullo è assegnabile a variabili con tipo nullo. Questo flag è disattivato per impostazione predefinita, il che significa che è anche possibile assegnare il valore null alle variabili con altri tipi come numero o vuoto.
// Con strictNullChecks impostato su true let a: null = null; // Ok let b: undefined = null; // Errore let c: number = null; // Errore let d: void = null; // Errore // Con strictNullChecks impostato su false let a: null = null; // Ok let b: undefined = null; // Ok let c: number = null; // Ok let d: void = null; // Ok
Qualsiasi variabile il cui valore non è stato specificato è impostato su non definito. Tuttavia, è anche possibile impostare in modo esplicito il tipo di variabile non definita, come nell'esempio seguente.
Tieni presente che una variabile con genere impostato non definito può avere solo un valore non definito. Se la strictNullChecks l'opzione è impostata su falso, sarai anche in grado di assegnare non definito alle variabili con numeri e tipi di stringhe, ecc.
// Con strictNullChecks impostato su true let a: undefined = undefined; // Ok let b: undefined = null; // Errore let c: number = undefined; // Errore let d: void = undefined; // Ok // Con strictNullChecks impostato su false let a: undefined = undefined; // Ok let b: undefined = null; // Ok let c: number = undefined; // Ok let d: void = undefined; // Ok
Il tipo di dati void viene utilizzato per indicare la mancanza di a genere per una variabile. Impostazione delle variabili per avere a vuoto il tipo potrebbe non essere molto utile, ma è possibile impostare il tipo di restituzione delle funzioni a cui non viene restituito nulla vuoto. Se utilizzato con variabili, il tipo vuoto può avere solo due valori validi: nullo e non definito.
// Con strictNullChecks impostato su true, lasciare a: void = undefined; // Ok let b: void = null; // Errore let c: void = 3; // Errore let d: void = "apple"; // Errore // Con strictNullChecks impostato su false, lasciare a: void = undefined; // Ok let b: void = null; // Ok let c: void = 3; // Errore let d: void = "apple"; // errore
non mi piace il numero e stringa tipi di dati, booleano ha solo due valori validi. Puoi solo impostare il suo valore su entrambi vero o falso. Questi valori sono usati molto nelle strutture di controllo in cui un pezzo di codice viene eseguito se una condizione lo è vero e un altro pezzo di codice viene eseguito se una condizione lo è falso.
Ecco un esempio molto semplice di dichiarazione delle variabili booleane:
let a: boolean = true; Sia b: booleano = falso; sia c: booleano = 23; // Errore let d: boolean = "blue"; // errore
Il numero il tipo di dati viene utilizzato per rappresentare sia gli interi che i valori a virgola mobile in JavaScript e anche in TypeScript. Tuttavia, dovresti ricordare che tutti i numeri sono rappresentati internamente come valori a virgola mobile. I numeri possono anche essere specificati come valori letterali esadecimali, ottali o binari. Tieni presente che le rappresentazioni Octal e binarie sono state introdotte in ES6 e ciò può comportare un output di codice JavaScript diverso in base alla versione che stai prendendo di mira.
Ci sono anche altri tre valori simbolici speciali che rientrano nel numero genere: +Infinito, -Infinito, e NaN. Ecco alcuni esempi di utilizzo del numero genere.
// Con strictNullChecks impostato su true, lasciare a: number = undefined; // Errore let b: number = null; // Errore let c: number = 3; let d: number = 0b111001; // Binary let e: number = 0o436; // Octal let f: number = 0xadf0d; // Esadecimale let g: number = "cat"; // Errore // Con strictNullChecks impostato su false, lasciare a: number = undefined; // Ok let b: number = null; // Ok let c: number = 3; let d: number = 0b111001; // Binary let e: number = 0o436; // Octal let f: number = 0xadf0d; // Esadecimale let g: number = "cat"; // errore
Quando la versione di destinazione è impostata su ES6, il codice sopra riportato verrà compilato nel seguente codice JavaScript:
lascia a = indefinito; sia b = null; sia c = 3; sia d = 0b111001; sia e = 0o436; sia f = 0xadf0d; lascia g = "gatto";
Dovresti notare che le variabili JavaScript sono ancora dichiarate usando permettere, che è stato introdotto in ES6. Inoltre, non vengono visualizzati messaggi di errore relativi a genere di variabili diverse perché il codice JavaScript non ha alcuna conoscenza dei tipi che abbiamo usato nel codice TypeScript.
Se la versione di destinazione è impostata su ES5, il codice TypeScript che abbiamo scritto in precedenza verrà compilato nel seguente JavaScript:
var a = indefinito; var b = null; var c = 3; var d = 57; var e = 286; var f = 0xadf0d; var g = "cat";
Come puoi vedere, questa volta tutte le occorrenze del permettere parola chiave sono stati cambiati in var. Si noti inoltre che i numeri ottali e binari sono stati modificati in forma decimale.
Il tipo di dati stringa viene utilizzato per memorizzare informazioni testuali. Sia JavaScript che TypeScript usano virgolette (") e virgolette singole (') per racchiudere le informazioni testuali come una stringa.Una stringa può contenere zero o più caratteri racchiusi tra virgolette.
// Con strictNullChecks impostato su true let a: string = undefined; // Errore let b: string = null; // Errore let c: string = ""; let d: string = "y"; let e: string = "building"; let f: string = 3; // Error let g: string = "3"; // Con strictNullChecks impostato su false let a: string = undefined; // Ok let b: string = null; // Ok let c: string = ""; let d: string = "y"; let e: string = "building"; let f: string = 3; // Error let g: string = "3";
TypeScript supporta anche stringhe di template o letterali di template. Questi valori letterali di modello ti consentono di incorporare espressioni in una stringa. I valori letterali del modello sono racchiusi dal carattere back-tick (') invece di virgolette doppie e virgolette singole che racchiudono stringhe regolari. Sono stati introdotti in ES6. Ciò significa che otterrai un output JavaScript diverso in base alla versione che hai scelto come target. Ecco un esempio di utilizzo di letterali di template in TypeScript:
let e: string = "building"; let f: number = 300; let sentence: string = '$ e davanti al mio ufficio è alto $ f.';
Dopo la compilazione, otterrai il seguente codice JavaScript:
// Output in ES5 var e = "building"; var f = 300; var sentence = "Il" + e + "davanti al mio ufficio è" + f + "piedi alti."; // Output in ES6 let e = "building"; sia f = 300; let sentence = '$ e davanti al mio ufficio è alto $ f.';
Come puoi vedere, il modello letterale è stato modificato in una normale stringa in ES5. Questo esempio mostra come TypeScript rende possibile l'utilizzo di tutte le funzionalità JavaScript più recenti senza preoccuparsi della compatibilità.
È possibile definire i tipi di array in due modi diversi in JavaScript. Nel primo metodo, si specifica il tipo di elementi di matrice seguiti da [] che denota una matrice di quel tipo. Un altro metodo consiste nell'utilizzare il tipo di array generico schieramento. L'esempio seguente mostra come creare matrici con entrambi questi metodi. specificando nullo o non definito come uno degli elementi produrrà errori quando il strictNullChecks la bandiera è vero.
// Con strictNullChecks impostato su false, lasciare a: number [] = [1, 12, 93, 5]; let b: string [] = ["a", "albicocca", "mango"]; sia c: numero [] = [1, "mela", "patata"]; // Errore let d: Array= [null, indefinito, 10, 15]; let e: Array = ["pie", null, ""]; // Con strictNullChecks impostato su true, lasciare a: number [] = [1, 12, 93, 5]; let b: string [] = ["a", "albicocca", "mango"]; sia c: numero [] = [1, "mela", "patata"]; // Errore let d: Array = [null, indefinito, 10, 15]; // Errore let e: Array = ["pie", null, ""]; // errore
Il tipo di dati tupla consente di creare una matrice in cui il tipo di un numero fisso di elementi è noto in anticipo. Il tipo del resto degli elementi può essere solo uno dei tipi che hai già specificato per la tupla. Ecco un esempio che renderà più chiaro:
faccia un: [numero, stringa] = [11, "lunedì"]; let b: [numero, stringa] = ["lunedì", 11]; // Errore c: [numero, stringa] = ["a", "scimmia"]; // Errore let d: [numero, stringa] = [105, "gufo", 129, 45, "gatto"]; let e: [numero, stringa] = [13, "bat", "spiderman", 2]; e [13] = "elefante"; e [15] = falso; // errore
Per tutte le tuple nel nostro esempio, abbiamo impostato il genere del primo elemento ad a numero e il genere del secondo elemento ad a stringa. Dal momento che abbiamo specificato solo a genere per i primi due elementi, il resto può essere una stringa o un numero. Creare tuple B e c genera un errore perché abbiamo provato ad usare una stringa come valore per il primo elemento quando abbiamo menzionato che il primo elemento sarebbe un numero.
Allo stesso modo, non possiamo impostare il valore di un elemento tupla su falso dopo aver specificato che conterrà solo stringhe e numeri. Ecco perché l'ultima riga genera un errore.
Il enum il tipo di dati è presente in molti linguaggi di programmazione come C e Java. Manca da JavaScript, ma TypeScript ti permette di creare e lavorare con le enumerazioni. Se non sai cosa enumerazioni sono, ti permettono di creare una collezione di valori correlati usando nomi memorabili.
enum Animali gatto, leone, cane, mucca, scimmia let c: Animals = Animals.cat; console.log (animali [3]); // cow console.log (Animals.monkey); // 4
Per impostazione predefinita, la numerazione delle enumerazioni inizia da 0, ma puoi anche impostare un valore diverso per il primo o qualsiasi altro membro manualmente. Questo cambierà il valore di tutti i membri che li seguono aumentando il loro valore di 1. Puoi anche impostare tutti i valori manualmente in un enum.
enum Animali cat = 1, lion, dog = 11, cow, monkey let c: Animals = Animals.cat; console.log (animali [3]); // undefined console.log (Animals.monkey); // 13
A differenza dell'esempio precedente, il valore di Animali [3] è non definito questa volta. Questo perché il valore 3 sarebbe stato assegnato a dog, ma impostiamo il suo valore in modo esplicito su 11. Il valore per cow rimane a 12 e non a 3 perché il valore dovrebbe essere maggiore del valore dell'ultimo membro.
Diciamo che stai scrivendo un programma in cui il valore di una variabile è determinato dagli utenti o dal codice scritto in una libreria di terze parti. In questo caso, non sarà possibile impostare correttamente il tipo di tale variabile. La variabile potrebbe essere di qualsiasi tipo come una stringa, un numero o un valore booleano. Questo problema può essere risolto utilizzando il qualunque genere. Ciò è utile anche quando si creano array con elementi di tipi misti.
let a: any = "apple"; sia b: any = 14; sia c: any = false; let d: any [] = ["door", "kitchen", 13, false, null]; b = "persone";
Nel codice precedente, siamo stati in grado di assegnare un numero a B e quindi modificare il suo valore in una stringa senza ottenere alcun errore a causa del tipo qualunque può accettare tutti i tipi di valori.
Il mai type è usato per rappresentare valori che non dovrebbero mai accadere. Ad esempio, puoi assegnare mai come il tipo di ritorno di una funzione che non restituisce mai. Questo può accadere quando una funzione genera sempre un errore o quando si blocca in un loop infinito.
lascia a: mai; // Ok let b: never = false; // Errore let c: never = null; // Errore let d: never = "lunedi"; // Funzione errore bloccata (): mai while (true)
Questo tutorial ti ha presentato tutti i tipi disponibili in TypeScript. Abbiamo appreso come l'assegnazione di un diverso tipo di valore a una variabile mostrerà errori in TypeScript. Questo controllo può aiutarti a evitare molti errori durante la scrittura di programmi di grandi dimensioni. Abbiamo anche imparato come scegliere come target diverse versioni di JavaScript.
Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione sul mercato Envato.
Nel prossimo tutorial, imparerai a conoscere le interfacce in TypeScript. Se hai domande relative a questo tutorial, fammelo sapere nei commenti.
Accentsconagua