TypeScript Academy · Lezione

L’operatore di tipo typeof

Catturi il tipo di un valore a runtime con typeof.

L’operatore di tipo typeof è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Tipi derivati dai valori

L'operatore di tipo typeof ricava un tipo statico da un valore a runtime. Consente di definire un valore una sola volta e di riutilizzarne la struttura come tipo, mantenendo i due elementi perfettamente sincronizzati.

Due typeof differenti

Non li confonda: il typeof di JavaScript restituisce una stringa a runtime; il typeof di TypeScript compare in una posizione di tipo e produce un tipo. La parola chiave è la stessa, ma gli ambiti sono diversi.

const n = 42
console.log(typeof n) // "number" — JS runtime
type T = typeof n     // number — TS type position

Acquisizione del tipo di una variabile

Inserisca typeof prima di un valore in un'annotazione di tipo per acquisire il tipo inferito di quel valore. Qui T diventa string.

const greeting = "hello"
type G = typeof greeting // string
const another: G = "world"
console.log(another)

Acquisizione della struttura di un oggetto

Applicato a un oggetto const, typeof restituisce la struttura completa inferita, senza dover scrivere manualmente l'interfaccia.

const config = { host: "localhost", port: 8080 }
type Config = typeof config // { host: string; port: number }
const c: Config = { host: "127.0.0.1", port: 3000 }
console.log(c)

Per impostazione predefinita l'inferenza amplia i valori

Senza indicazioni aggiuntive, TypeScript amplia i valori letterali: port: 8080 diventa number, non il valore letterale 8080. Spesso questo comportamento va bene, ma in alcuni casi è preferibile conservare il valore esatto.

const settings = { mode: "dark" }
type S = typeof settings // { mode: string }
const x: S = { mode: "anything" }
console.log(x)

typeof con as const

Aggiunga as const per bloccare un valore nel suo tipo letterale più ristretto. Ora typeof acquisisce i valori letterali esatti e contrassegna tutto come readonly.

const settings = { mode: "dark" } as const
type S = typeof settings // { readonly mode: "dark" }
const x: S = { mode: "dark" }
console.log(x)

Tipi letterali dagli array

Con as const, applicare typeof a un array restituisce una tupla readonly di tipi letterali, un elemento fondamentale per derivare unioni di valori.

const roles = ["admin", "editor", "viewer"] as const
type Roles = typeof roles // readonly ["admin", "editor", "viewer"]
console.log(roles[0])

Derivazione di un'unione di valori

Combini typeof con l'accesso indicizzato tramite [number] per trasformare un array di costanti in un tipo unione dei relativi valori.

const roles = ["admin", "editor", "viewer"] as const
type Role = typeof roles[number] // "admin" | "editor" | "viewer"
const r: Role = "editor"
console.log(r)

typeof sulle funzioni

È possibile acquisire anche il tipo di una funzione. Questo è utile per tipizzare wrapper o riutilizzare altrove una firma.

function add(a: number, b: number) { return a + b }
type AddFn = typeof add // (a: number, b: number) => number
const myAdd: AddFn = (x, y) => x + y
console.log(myAdd(2, 3))

Mantenimento della sincronizzazione dei tipi

Il vantaggio principale è definire una sola volta configurazioni o costanti come valori e poi derivare i tipi con typeof. Se si modifica il valore, il tipo si aggiorna automaticamente, senza duplicazioni.

const defaults = { retries: 3, timeout: 1000 }
type Defaults = typeof defaults
function apply(opts: Defaults) { return opts.retries }
console.log(apply(defaults))

Funziona solo con identificatori

L'operatore di tipo typeof accetta un identificatore o un percorso di proprietà, non un'espressione arbitraria. typeof (a + b) non è consentito.

const obj = { user: { name: "Ada" } }
type Name = typeof obj.user.name // string
const n: Name = "Leo"
console.log(n)

Verifica rapida

Verifichi la comprensione dell'operatore di tipo typeof.

Riepilogo

L'operatore di tipo typeof (in una posizione di tipo) ricava un tipo da un valore: una variabile, un oggetto, un array o una funzione. Per impostazione predefinita i valori letterali vengono ampliati; aggiunga as const per acquisire i tipi letterali esatti come readonly. Combinato con l'accesso indicizzato (typeof arr[number]), consente di ottenere unioni di valori. Derivare i tipi dai valori mantiene un'unica fonte di verità ed evita di duplicare le strutture.

Domande Frequenti

La lezione «L’operatore di tipo typeof» è gratuita?

Sì — il testo completo di «L’operatore di tipo typeof» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «L’operatore di tipo typeof»?

Catturi il tipo di un valore a runtime con typeof. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «L’operatore di tipo typeof»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a TypeScript Academy