Articles
Introduzione a TypeScript
Fondamenti di TypeScript

Fondamenti di TypeScript

Questo articolo spiega i fondamenti di TypeScript.

YouTube Video

Esecuzione di "Hello World!"

Per prima cosa, eseguiremo il classico esempio "Hello World!" in TypeScript usando Visual Studio Code.

npm install -g typescript

Installa typescript utilizzando il comando npm.

Crea un file tsconfig.json.

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

Crea un file .vscode/launch.json per abilitare l'esecuzione del file main.ts in Visual Studio Code.

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

Crea un file main.ts che mostri "Hello World!". Puoi eseguirlo in Visual Studio Code premendo il tasto F5.

1console.log("Hello World!");

Configurando in questo modo, puoi eseguire file TypeScript all'interno di VSCode.

Panoramica di TypeScript

TypeScript (TS) è un superset di JavaScript sviluppato da Microsoft. TypeScript supporta il tipaggio statico, consentendo un codice più robusto e manutenibile.

Tipaggio Statico

  • TypeScript aggiunge i tipi a JavaScript ed esegue il controllo dei tipi al momento della compilazione. Ciò consente di prevenire in anticipo i bug relativi ai tipi.
1let message: string = "Hello, TypeScript";
2console.log(message);

Compilazione

  • Poiché TypeScript non può essere eseguito direttamente in un browser, deve essere traspilato (compilato) in JavaScript. Utilizza tsc (TypeScript Compiler) per convertire i file TS in file JS.

Annotazioni di Tipo Opzionali

  • TypeScript esegue anche l'inferenza dei tipi, ma ti consente di specificare esplicitamente i tipi quando necessario. Ciò migliora la leggibilità e l'affidabilità del codice.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Interfacce

  • TypeScript fornisce interface per definire la struttura degli oggetti. Ciò consente una gestione rigorosa della struttura degli oggetti.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Classi

  • TypeScript fornisce estensioni alla sintassi delle classi di JavaScript e supporta l'ereditarietà, i modificatori di accesso (public, private, protected) e le classi astratte.
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

Generici

  • In TypeScript è possibile scrivere codice riutilizzabile e sicuro dal punto di vista dei tipi utilizzando i generici.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Ecosistema

  • TypeScript è completamente compatibile con l'ecosistema JavaScript e può utilizzare il codice JavaScript esistente così com'è. Inoltre, è integrato con librerie popolari come React e Node.js.

Strumenti Potenti per Sviluppatori

  • TypeScript offre funzionalità avanzate come il completamento automatico, il supporto al refactoring e il controllo degli errori in editor come VSCode.

TypeScript è particolarmente utile per aumentare l'affidabilità e migliorare la produttività degli sviluppatori nei progetti di grandi dimensioni.

Variabili in TypeScript

Questo spiega i concetti di base e l'uso delle variabili in TypeScript.

Dichiarazione di Variabili

In TypeScript, le variabili vengono dichiarate utilizzando tre parole chiave: let, const e var. Ogni parola chiave ha caratteristiche diverse.

Esempio di let:

let ha un ambito di blocco (valido solo all'interno delle parentesi graffe {}). I valori possono essere riassegnati in seguito.

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

Esempio di const:

const non può essere riassegnato, quindi il valore assegnato una volta non può essere modificato. Tuttavia, il contenuto di oggetti e array può essere modificato.

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

Esempio di var:

var ha ambito di funzione e può essere riassegnato. Tuttavia, ignorando l'ambito di blocco, potrebbe causare comportamenti inattesi rispetto a let o const.

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

Annotazioni di Tipo

In TypeScript, puoi annotare esplicitamente i tipi per le variabili. Anche l'inferenza dei tipi è supportata, ma le annotazioni dei tipi sono utili in scenari complessi.

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

Variabili non inizializzate

Se una variabile viene dichiarata senza inizializzazione, a essa viene assegnato automaticamente undefined. Una variabile dichiarata con let deve essere esplicitamente assegnata a undefined o includere undefined nel suo tipo se non inizializzata.

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

Ambito delle variabili

let e const hanno ambito di blocco, quindi sono validi solo all'interno dello stesso blocco.

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

Sollevamento delle Variabili

Poiché TypeScript è un superset di JavaScript, eredita la caratteristica di sollevamento delle variabili propria di JavaScript. Il sollevamento si riferisce al comportamento per cui le dichiarazioni di variabili e funzioni sono trattate come se fossero messe all'inizio del loro contesto. Tuttavia, viene sollevata solo la dichiarazione, mentre l'inizializzazione rimane nel punto in cui è definita. Le variabili dichiarate con var vengono sollevate, ma l'uso di let o const prima della dichiarazione genera un errore.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • In questo caso, le variabili dichiarate con var vengono sollevate e i loro valori vengono stampati.
1console.log(b); // ReferenceError
2let b = 20;
  • Le variabili dichiarate con let non vengono sollevate, il che porta a un errore.

Riepilogo

Di seguito è riportato un riepilogo di let, const e var.

  • let è riassegnabile e ha un ambito di blocco.
  • const non è riassegnabile e ha un ambito di blocco.
  • var è riassegnabile e ha un ambito di funzione.
  • Tutti consentono un'annotazione esplicita del tipo per specificare i tipi di variabili.

Caratteri di escape in TypeScript

I caratteri di escape vengono utilizzati quando determinati caratteri non possono essere inseriti direttamente o per rappresentare caratteri che hanno un significato speciale all'interno di una stringa. In TypeScript, i caratteri di escape vengono utilizzati per rappresentare caratteri di controllo o caratteri speciali.

Ad esempio, usa \n per stampare un messaggio che include una nuova riga.

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

Escape dei caratteri speciali

I caratteri di escape sono utili anche quando si devono includere caratteri speciali in una stringa. Ad esempio, potresti voler usare virgolette doppie o singole direttamente all'interno di una stringa.

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

Escape del backslash

Per inserire un backslash in una stringa, devi scriverlo come un doppio backslash.

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Escape Unicode e esadecimale

In TypeScript, i punti di codice Unicode possono essere rappresentati utilizzando sequenze di escape.

Sequenza di escape Unicode

Puoi rappresentare caratteri Unicode specificando un numero esadecimale a quattro cifre dopo \u.

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

Escape esadecimale

Puoi rappresentare caratteri specifici utilizzando un numero esadecimale a due cifre dopo \x.

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

Template literals ed escape

I template literal sono definiti racchiudendoli tra backtick e offrono un modo semplice per creare espressioni incorporate o stringhe multilinea. I normali caratteri di escape possono essere utilizzati direttamente nei template literals.

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

Casi speciali

In TypeScript, l'uso di sequenze di escape non valide all'interno di una stringa può causare un errore di sintassi. Pertanto, è importante verificare se i caratteri di escape sono validi.

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

Esempi pratici di utilizzo

Ecco un esempio di costruzione di una stringa complessa utilizzando caratteri di escape.

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

In questo esempio, \n viene utilizzato per una nuova riga e \t per aggiungere un'indentazione. Questo rende la struttura JSON più facile da leggere.

Riepilogo

I caratteri di escape sono molto importanti quando si lavora con le stringhe in TypeScript. Quando vuoi includere caratteri speciali o di controllo in una stringa, puoi creare stringhe espressive utilizzando le sequenze di escape appropriate. Comprendere e utilizzare correttamente i caratteri di escape può migliorare la leggibilità e la manutenibilità del codice.

Versioni di TypeScript

Di seguito una panoramica delle versioni di TypeScript.

  1. TypeScript 1.0 (2014)

    La prima versione stabile di TypeScript. Sono state introdotte funzionalità di base come la tipizzazione, le classi e i moduli.

  2. TypeScript 2.0 (2016)

    Sono stati introdotti i Non-nullable Types, l'Analisi del flusso di controllo, le Proprietà di sola lettura e il tipo Never, migliorando l'inferenza dei tipi.

  3. TypeScript 3.0 (2018)

    È stato introdotto un sistema di tipi più flessibile, con funzionalità come i Riferimenti ai progetti, le estensioni per i Tipi Tuple e miglioramenti ai Parametri Rest.

  4. TypeScript 4.0 (2020)

    Sono state aggiunte funzionalità come i Tipi Tuple Variadici, miglioramenti all'editor, inferenza dei tipi migliorata e Elementi Tuple Etichettati per migliorare l'esperienza di sviluppo.

  5. TypeScript 4.1 (2020)

    Sono stati introdotti i Template Literal Types, rendendo più potente la manipolazione dei tipi stringa.

  6. TypeScript 4.3 (2021)

    L'aggiunta della parola chiave Override, miglioramenti ai modificatori di accesso nei costruttori e supporto tipizzato migliorato per WeakMap e WeakSet.

  7. TypeScript 4.5 (2021)

    Sono stati aggiunti il tipo Awaited, i ModuleSuffixes e una maggiore compatibilità con i moduli ECMAScript.

  8. TypeScript 5.0 (2023)

    Sono stati realizzati la standardizzazione dei Decorators, il miglioramento della velocità di compilazione dei progetti, il potenziamento del sistema dei tipi e il supporto per le ultime funzionalità di ECMAScript.

TypeScript è in continua evoluzione, con più versioni rilasciate ogni anno che introducono nuove funzionalità e miglioramenti.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Tipi di Dati in TypeScript