Capitolo 3: Differenze fondamentali tra JavaScript e TypeScript

  

In questo capitolo vedremo quali sono le differenze fondamentali tra JavaScript e TypeScript:

• Tipizzazione statica vs dinamica

• Tipi primitivi e complessi

• Interfacce e tipi personalizzati

• Moduli e namespaces

• Classi, ereditarietà e decoratori

🔗 Ti piace Techelopment? Dai un’occhiata al sito per tutti i dettagli!

1. Tipizzazione statica vs dinamica

🔸 JavaScript non impone alcun tipo. Una variabile può cambiare tipo durante l’esecuzione:

let x = 5;
x = "hello"; // everything ok

🔹 TypeScript permette (e incoraggia) l’uso di tipi statici, cioè che non cambiano:

let x: number = 5;
x = "hello"; // Error: You cannot assign a string to a number variable

Questo controllo avviene a tempo di compilazione, non durante l’esecuzione.

2. Definizione esplicita dei tipi

In TypeScript puoi dichiarare tipi per variabili, parametri, ritorni di funzione, oggetti e altro:

function greeting(name: string): string {
  return `Hello, ${name}`;
}

In JavaScript non puoi farlo, e il tipo del parametro name è sconosciuto fino al runtime.

3. Interfacce e tipi personalizzati

🔸 In JavaScript, spesso definisci oggetti "al volo", senza sapere esattamente la loro forma:

const user = {
  name: "Carrie",
  age: 25,
};

🔹 In TypeScript, puoi definire una interfaccia o un type per descrivere la struttura attesa:

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "Carrie",
  age: 25,
};

Vantaggio: ogni campo è controllato. Se sbagli a scrivere name o ometti age, TypeScript ti avvisa.

4. Union types

TypeScript ti permette di dire: "questa variabile può essere una cosa o un’altra":

let value: string | number;

value= "hello";
value = 42;
value = true; // Error: it is neither a string nor a number

In JavaScript tutto è lecito, ma può causare bug se ti aspetti un tipo e ne ricevi un altro.

5. Funzioni più sicure

🔸 JavaScript non ti avvisa se chiami una funzione nel modo sbagliato:

function sum(a, b) {
  return a + b;
}

sum(3); // NaN, no errors

🔹 TypeScript ti obbliga a rispettare la firma della funzione:

function sum(a: number, b: number): number {
  return a + b;
}

sum(3); // Error: missing argument

6. Classi con modificatori di accesso

TypeScript migliora le classi introducendo concetti da linguaggi OOP classici:

class Person {
  private name: string;

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

  greeting(): string {
    return `Hello, I am ${this.name}`;
  }
}

const p = new Person("Mike");
console.log(p.name); // Error: "name" is private

In JavaScript, tutti i membri delle classi sono pubblici per default.

7. Decoratori (funzionalità avanzata)

TypeScript supporta decoratori, una funzione speciale che può modificare il comportamento di classi o metodi. È una funzionalità ancora "sperimentale" ma molto usata in framework come Angular e NestJS.

Esempio semplice:

function Log(target: any, key: string) {
  console.log(`Called method: ${key}`);
}

class MyClasse {
  @Log
  greeting() {
    console.log("Hello");
  }
}

8. Tipi di ritorno e void

Puoi indicare chiaramente cosa restituisce una funzione, o specificare che non restituisce nulla (void):

function logMessage(msg: string): void {
  console.log(msg);
}

Questo è molto utile per capire a colpo d’occhio lo scopo della funzione, senza leggerne il corpo.

9. Inferenza intelligente dei tipi

TypeScript capisce da solo i tipi in molti casi:

let greet = "Hello"; // it is a string
greet = 42; // Error

Non devi sempre scrivere i tipi a mano: basta usare buone pratiche e TypeScript farà il resto.

10. Suggerimenti dell’IDE e controllo statico

Con TypeScript, il tuo editor (soprattutto VSCode) diventa molto più intelligente:

• Suggerisce metodi e proprietà valide

• Ti segnala errori prima ancora di salvare

• Ti aiuta a navigare il codice come se fosse una documentazione viva

Esempio:

const today = new Date();
today.getFullYear(); // with IntelliSense

In sintesi

JavaScript	TypeScript
Tipi dinamici	Tipi statici opzionali
Nessuna verifica a tempo di scrittura	Controllo errori in fase di sviluppo
Nessun supporto nativo a interfacce	Interfacce per oggetti, classi, funzioni
IDE meno "intelligente"	IntelliSense, refactoring sicuro
Tutto succede a runtime	Errori individuabili prima della build

 

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment