Strict Mode ed eliminazione di any
Abilitare tutti i flag strict in tsconfig, usare unknown al posto di any, applicare in sicurezza le asserzioni di tipo e migrare un file debolmente tipizzato alla modalità strict
Strict Mode ed eliminazione di any è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Perché la modalità strict?
strict: true in tsconfig.json abilita ogni opzione di sicurezza di TypeScript: è lo standard per i progetti seri. Individua già in fase di compilazione i bug relativi a null, i parametri senza tipo e le assegnazioni non sicure.
Cosa abilita strict
strict è un meta-flag che abilita: noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, alwaysStrict, noImplicitThis, useUnknownInCatchVariables.
strictNullChecks
Senza questa opzione, null e undefined possono essere assegnati a ogni tipo, diventando una fonte costante di bug. Con questa opzione, deve gestire esplicitamente i casi null.
// Without strictNullChecks — runtime error:
function greet(name: string) { return name.toUpperCase(); }
greet(null); // compiler allows, crashes at runtime
// With strictNullChecks:
function greet(name: string | null) {
if (name == null) return '';
return name.toUpperCase();
}noImplicitAny
Senza questo flag, i parametri privi di annotazione di tipo vengono impostati su any, aggirando silenziosamente il sistema dei tipi. Con noImplicitAny, deve annotarli.
// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any
// With:
function format(value: string) { return value.toUpperCase(); }strictPropertyInitialization
Le proprietà delle classi prive di un inizializzatore certo diventano potenzialmente undefined. Le inizializzi oppure utilizzi l'operatore di assegnazione definita !.
class User {
name!: string; // tell TS: I'll set this elsewhere
age = 0; // default initialiser
email: string; // ERROR with strictPropertyInitialization
constructor(email: string) { this.email = email; } // FIX: init in ctor
}Usare unknown invece di any
any disattiva il controllo dei tipi. unknown è sicuro dal punto di vista dei tipi: deve restringerne il tipo prima di utilizzarlo. Preferisca sempre unknown.
// any — no checks, bug magnet:
function parse(input: any) {
return input.toUpperCase(); // compiler is fine, runtime may crash
}
// unknown — must narrow:
function parse(input: unknown) {
if (typeof input === 'string') {
return input.toUpperCase();
}
throw new Error('Expected string');
}Asserzioni di tipo sicure
Se deve usare un'asserzione (perché sa di avere informazioni più precise di TS), preferisca la sintassi as. Non usi doppie asserzioni (x as unknown as T) a meno che non sia davvero inevitabile: sono un segnale di codice problematico.
const el = document.getElementById('app') as HTMLDivElement;
el.style.background = 'blue';
// Safer alternative: runtime check
const el = document.getElementById('app');
if (!(el instanceof HTMLDivElement)) throw new Error('app missing');
el.style.background = 'blue'; // narrowed to HTMLDivElementEliminare any da un progetto
Strategia: abiliti strict e corregga gli errori risultanti un file alla volta. Usi unknown e ne restringa il tipo. Aggiunga @ts-expect-error con un commento TODO nei punti noti come problematici, così non possono essere ignorati.
Regola di lint: no-explicit-any
Aggiunga @typescript-eslint/no-explicit-any alla configurazione ESLint per impedire l'introduzione di nuovo any.
// .eslintrc.json
{
"rules": {
"@typescript-eslint/no-explicit-any": "error"
}
}strictFunctionTypes
Imposta il controllo controvariante dei parametri delle funzioni e impedisce di assegnare funzioni con tipi di parametro più ampi di quelli previsti, cosa che causerebbe un crash a runtime.
Tipo della variabile catch
useUnknownInCatchVariables fa sì che catch (e) deduca e: unknown invece di any. Deve restringere il tipo prima di accedere alle proprietà.
try {
doRisky();
} catch (e) {
// e is unknown
if (e instanceof Error) {
console.error(e.message);
} else {
console.error('Unknown error', e);
}
}Suggerimenti per la migrazione
Abiliti strict nei nuovi progetti fin dal primo giorno. Per il codice legacy, abiliti i flag gradualmente. Inizi con strictNullChecks, che offre il vantaggio maggiore, poi passi a noImplicitAny. Utilizzi //@ts-expect-error invece di //@ts-ignore, così il commento può essere rimosso quando il problema viene risolto.
Verifica rapida
Perché unknown è più sicuro di any quando non conosce il tipo di un valore?
Riepilogo: modalità strict
Abiliti strict: true per ottenere la massima sicurezza. strictNullChecks impone la gestione di null. noImplicitAny richiede annotazioni sui parametri. Utilizzi strictPropertyInitialization per i campi delle classi. Preferisca unknown a any e ne restringa il tipo con i type guard. Eviti le doppie asserzioni. Utilizzi il lint con no-explicit-any. Esegua la migrazione del codice legacy un file alla volta, usando marcatori @ts-expect-error.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «Strict Mode ed eliminazione di any» è gratuita?
Sì — il testo completo di «Strict Mode ed eliminazione di any» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Strict Mode ed eliminazione di any»?
Abilitare tutti i flag strict in tsconfig, usare unknown al posto di any, applicare in sicurezza le asserzioni di tipo e migrare un file debolmente tipizzato alla modalità strict Eserciti Frontend 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 Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend 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 4 di 4.
Quanto tempo richiede la lezione «Strict Mode ed eliminazione di any»?
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 Frontend Academy?
Sì. Ogni lezione Frontend 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
- Tipi di literal template
- Decorator e metadati
- TypeScript con React: generics, hook e FC
- Strict Mode ed eliminazione di any