Strict Mode och eliminering av any
Aktivera alla strict-flaggor i tsconfig, använd unknown i stället för any, tillämpa typkonverteringar säkert och migrera en svagt typad fil till strict.
Strict Mode och eliminering av any är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Varför strict?
strict: true i tsconfig.json aktiverar alla TypeScript-flaggor för typsäkerhet – ribban för seriösa projekt. Det fångar null-relaterade fel, parametrar utan typer och osäkra tilldelningar vid kompilering.
Vad strict aktiverar
strict är en övergripande flagga som aktiverar: noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, alwaysStrict, noImplicitThis, useUnknownInCatchVariables.
strictNullChecks
Utan den kan null och undefined tilldelas till alla typer – en ständig källa till buggar. Med den måste null-fall hanteras uttryckligen.
// 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
Parametrar utan en typannotering får automatiskt typen any utan denna flagga – vilket i tysthet kringgår typsystemet. Med noImplicitAny måste de typannoteras.
// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any
// With:
function format(value: string) { return value.toUpperCase(); }strictPropertyInitialization
Klassfält utan en uttrycklig initiering blir potentiellt undefined. Initiera dem eller använd operatorn för definitiv tilldelning !.
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
}Använd unknown i stället för any
any kopplar bort typkontrollen. unknown är typsäkert – typen måste begränsas innan värdet används. Föredra alltid 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');
}Säkra typassertioner
Om en assertion krävs (när mer är känt än vad TS vet), föredra syntaxen as. Gör inte dubbla assertions (x as unknown as T) om det inte verkligen saknas ett alternativ – det är en kodlukt.
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 HTMLDivElementTa bort any från ett projekt
Strategi: aktivera strict och åtgärda de fel som uppstår, en fil i taget. Använd unknown och begränsa typen. Lägg till @ts-expect-error med en TODO-kommentar för kända problemställen så att de inte kan ignoreras.
Lintregel: no-explicit-any
Lägg till @typescript-eslint/no-explicit-any i ESLint-konfigurationen för att förhindra att ny any läggs till.
// .eslintrc.json
{
"rules": {
"@typescript-eslint/no-explicit-any": "error"
}
}strictFunctionTypes
Tvingar fram kontravariant kontroll av funktionsparametrar – förhindrar tilldelning av funktioner med bredare parametertyper än förväntat, vilket annars skulle orsaka en krasch vid körning.
Typ för catch-variabler
useUnknownInCatchVariables gör att catch (e) infererar e: unknown i stället för any. Typen måste begränsas innan egenskaper nås.
try {
doRisky();
} catch (e) {
// e is unknown
if (e instanceof Error) {
console.error(e.message);
} else {
console.error('Unknown error', e);
}
}Migreringstips
Aktivera strict i nya projekt från dag ett. För äldre projekt: aktivera flaggorna stegvis. Börja med strictNullChecks (den största vinsten) och fortsätt sedan med noImplicitAny. Använd //@ts-expect-error i stället för //@ts-ignore, så att kommentaren tas bort när problemet är löst.
Snabbtest
Varför är unknown säkrare än any när typen för ett värde är okänd?
Sammanfattning: strict
Aktivera strict: true för fullständig säkerhet. strictNullChecks tvingar fram hantering av null. noImplicitAny kräver typannoteringar för parametrar. Använd strictPropertyInitialization för klassfält. Använd unknown i stället för any – begränsa typen med typvakter. Undvik dubbla assertions. Använd lintregeln no-explicit-any. Migrera äldre kod en fil i taget med @ts-expect-error-markeringar.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Strict Mode och eliminering av any” gratis?
Ja – hela texten till ”Strict Mode och eliminering av any” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Strict Mode och eliminering av any”?
Aktivera alla strict-flaggor i tsconfig, använd unknown i stället för any, tillämpa typkonverteringar säkert och migrera en svagt typad fil till strict. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Strict Mode och eliminering av any”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Mallsträngstyper
- Dekoratörer och metadata
- TypeScript med React: FC-generiska typer och hooks
- Strict Mode och eliminering av any