TypeScript Basics

Di seguito i dettagli del linguaggio TypeScript illustrato per esempi. Dove sottintesa, la semantica delle istruzioni non viene specificata.

Tutti gli esempi riportati sono eseguibili nel Playground ufficiale di TypeScript (https://www.typescriptlang.org/play).

Indice

Istruzioni
Tipi
- Predefiniti
- Definiti da utente
Risorse

Istruzioni

Dichiarazione

Variabili/costanti

var

var x = 15;

if (x > 10) {
  var x = 25;
  console.log(x);  // 25
}

console.log(x);  // 25

Non rispetta le regole di scope tradizionali.

let

let x = 15;

if (x > 10) {
  let x = 25;
  console.log(x);  // 25
}

console.log(x);  // 15

Rispetta le regole di scope tradizionali, preferibile rispetto a var!

const

const x = 15;
console.log(x);  // 15
x = 20;          // Errore a tempo di compilazione.

Il suo valore è immutabile, se sovrascritto il type checking non passa.

Funzioni

function

function myFun() {
  console.log("myFun");
}

myFun();

// Output:
// myFun

lambda

const myLambdaFun = () => {
  console.log("myLambdaFun");
}

myLambdaFun();

// Output:
// myLambdaFun

Le funzioni in TypeScript possono essere memorizzate con costanti e/o variabili. In questo caso myLambdaFun è un costante di tipo funzione che non prende in input nessun parametro e non restituisce nulla, ovvero () => void.

Si veda la sezioni Tipi per altri dettagli.

high-order

type Funzione = (x: number) => number;

function esegui(f: Funzione, x: number) {
    return f(x)
}

function identita(x: number): number {
    return x;
}

function per2(x: number): number {
    return x * 2;
}

function potenza2(x: number): number {
    return x ** 2;
}

const operazioni = [identita, per2, potenza2];

for (const operazione of operazioni) {
  console.log(esegui(operazione, 4));
}

// OUTPUT
// 4
// 8
// 16

Assegnamento

let x = { nome: "Pippo", eta: 14 };

Selezione

let x = { nome: "Pippo", eta: 14 };

if (x.eta >= 18) {
  console.log("Maggiorenne");
}
else if (x.eta < 0) {
  console.log("Età non può essere < 0");
}
else {
  console.log("Minorenne");
}

// Output: Minorenne

switch

var i = 4;

switch(i) {
  case 1: console.log("Primo"); break;
  case 2: console.log("Secondo"); break;
  case 3: case 4: console.log("Terzo e quarto"); break;
  default: console.log("Ultimo");
}

// Output
// Terzo e quarto

Attenzione a specificare il break! La keyword default è usata per tutti i casi che non sono elencati, non è obbligatoria.

Ciclo

for

for (let i = 0; i < 3; i++) {
  console.log(i * i);
}

// Output:
// 0
// 1
// 4
// 9

while (esiste anche la variante do while)

let i = 2;

while(i >= 0) {
  console.log(i * i)
  i--
}

// Output:
// 9
// 4
// 1
// 0

Tipi

Predefiniti

Tipo	Sintassi	Descrizione	Esempio
Numero	`number`	Double precision 64-bit floating point values. It can be used to represent both, integers and fractions.	`55` , `1.25`
Stringa	`string`	Represents a sequence of Unicode characters	`"Hello!"`
Booleano	`boolean`	Represents logical values, true and false	`true`, `false`
Void	`void`	Used on function return types to represent non-returning functions	[^1]
Null	`null`	Represents an intentional absence of an object value.	`null`
Undefined	`undefined`	Denotes value given to all uninitialized variables	`undefined`

[^1]: nessun valore lo rappresenta!

equal vs strict-equal

Oltre agli operatori "standard" sui tipi di dato primitivi (e.g., +, -, *, /, %, >, >=, ecc. per il tipo number; &&, ||, ecc. per il tipo boolean; ...), una piccola nota è doverosa per quanto riguarda l'operatore di uguaglianza.

In TypeScript sono definiti due operatori di uguaglianza: il doppio uguale anche equal (==) ed il triplo uguale anche detto strict-equal (===). La differenza sta nel fatto che === verifica l'uguaglianza sul tipo oltre che sul valore. Vediamo un esempio per capirlo meglio.

let a = 10;  // ha tipo `number`

console.log(a == 10);    // true
console.log(a == "10");  // true! viene effettuato un cast automatico.
// di fatto, l'espressione viene convertita automaticamente a `ToNumber("10") === 10`

let a = 10;  // ha tipo number

console.log(a === 10);    // true
console.log(a === "10");  // false

Concludendo, è sempre preferibile utilizzare === e esplicitare il cast manualmente: permette di rendere il codice più leggibile e senza ambiguità.

Definiti da utente

enum

enum STILE {
    GRASSETTO, ITALICO
}

const stile: STILE = Math.random() >  0.5 ? STILE.GRASSETTO : STILE.ITALICO

if (stile === STILE.GRASSETTO) {
    console.log("Testo in grassetto")
}

if (stile === STILE.ITALICO) {
    console.log("Testo in italico")
}

array

type Frutti = string[];

const frutti: Frutti = [ "Mela", "Pera", "Banana"]

const numeriPrimi: number[] = [ 2, 3, 5, 7, 11, 13 ];

Attenzione! Il tipo di dato di un array è dato dal tipo che è possibile inserire nell'array seguito da quadre. Per esempio, la sintassi del tipo di dato "array di stringhe" è string[].

tuple

// Componenti    0     , 1
type Verifica = [string, number];

// Array di tuple
const verifiche: Verifica[] = [["Pippo", 5.5], ["Pluto", 7], ["Minnie", 10]];

for (let i = 0; i < 3; i++) {
    const verifica = verifiche[i];
    // Accesso ai componenti della tupla
    const nome = verifica[0];
    const voto = verifica[1];
    console.log("NOME: " + nome + ", VOTO: " + voto)
}

// Output
// NOME: Pippo, VOTO: 5.5
// NOME: Pluto, VOTO: 7
// NOME: Minnie, VOTO: 10

union

type Bussola = "NORD" | "SUD" | "EST" | "OVEST";

const b1: Bussola = "NORD";        // OK
const b2: Bussola = "NORD-OVEST";  // Errore a tempo di compilazione

oggetti

type Persona = { nome: string, eta: number };

const pippo: Persona = { nome: "Pippo", eta: 14 };
const pluto: Persona = { nome: "Pluto", eta: 27 };

console.log(pippo.nome);
console.log(pluto.nome);

// Output
// Pippo
// Pluto

Accesso ai campi dell'oggetto viene effettuato con l'operatore ..

Risorse

Tutorial passo passo con molti più dettagli rispetto a questa guida e che ho utilizzato come riferimento.
Documentazione ufficiale TypeScript
Sito ufficiale TypeScript

lparolari/typescript-basics.md