Frontend Academy · leksjon

Strict Mode og eliminering av any

Aktiver alle strict-flagg i tsconfig, bruk unknown i stedet for any, bruk type assertions på en trygg måte, og migrer en svakt typet fil til strict.

Leksjon 4 av 414 trinn

Strict Mode og eliminering av any er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hvorfor Strict Mode?

strict: true i tsconfig.json aktiverer alle TypeScript-sikkerhetsflaggene – standarden for seriøse prosjekter. Det oppdager null-feil, parametere uten type og utrygge tilordninger ved kompilering.

Hva strict aktiverer

strict er et metaalternativ som aktiverer: noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, alwaysStrict, noImplicitThis, useUnknownInCatchVariables.

strictNullChecks

Uten dette flagget kan null og undefined tilordnes til alle typer – en konstant kilde til feil. Med flagget må du håndtere null-tilfeller eksplisitt.

// 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

Parametere uten typeannotasjon får typen any som standard uten dette flagget – og omgår typesystemet i stillhet. Med noImplicitAny må du angi type på dem.

// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any

// With:
function format(value: string) { return value.toUpperCase(); }

strictPropertyInitialization

Klasseegenskaper uten en definitiv initialisering kan bli undefined. Enten initialiserer du dem, eller så bruker du operatoren for definitiv tilordning !.

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
}

Bruk unknown i stedet for any

any melder seg ut av typesjekkingen. unknown er typesikkert – du må snevre inn typen før du bruker verdien. Foretrekk 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');
}

Trygge typepåstander

Hvis du må bruke en typepåstand (fordi du vet bedre enn TS), bør du foretrekke syntaksen med as. Ikke bruk doble typepåstander (x as unknown as T) med mindre du virkelig ikke har noe valg – det er et kode-lyte.

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 HTMLDivElement

Fjern any fra et prosjekt

Strategi: aktiver strict, og rett feilene som oppstår, én fil om gangen. Bruk unknown sammen med innsnevring av typer. Legg til @ts-expect-error med en TODO-kommentar på kjente problemområder, slik at de ikke kan ignoreres.

Lint-regel: no-explicit-any

Legg til @typescript-eslint/no-explicit-any i ESLint-konfigurasjonen for å hindre at ny any blir lagt til.

// .eslintrc.json
{
  "rules": {
    "@typescript-eslint/no-explicit-any": "error"
  }
}

strictFunctionTypes

Håndhever kontravariant typesjekking av funksjonsparametere – og hindrer tilordning av funksjoner med bredere parametertyper enn forventet, noe som ellers kunne ført til krasj under kjøring.

Typen til catch-variabelen

useUnknownInCatchVariables gjør at catch (e) utleder e: unknown i stedet for any. Du må snevre inn typen før du får tilgang til egenskaper.

try {
  doRisky();
} catch (e) {
  // e is unknown
  if (e instanceof Error) {
    console.error(e.message);
  } else {
    console.error('Unknown error', e);
  }
}

Tips for migrering

Aktiver strict i nye prosjekter fra første dag. For eldre kodebaser: aktiver flaggene trinnvis. Start med strictNullChecks (størst gevinst), og fortsett deretter med noImplicitAny. Bruk //@ts-expect-error i stedet for //@ts-ignore, slik at kommentaren fjernes når problemet er løst.

Hurtigsjekk

Hvorfor er unknown tryggere enn any når du ikke kjenner typen til en verdi?

Besvar den i den interaktive leksjonen

Oppsummering: Strict Mode

Aktiver strict: true for full typesikkerhet. strictNullChecks tvinger deg til å håndtere null. noImplicitAny krever typeannotasjoner på parametere. Bruk strictPropertyInitialization for klassefelt. Bruk unknown i stedet for any – snevr inn typen med typevakter. Unngå doble typepåstander. Bruk lint med no-explicit-any. Migrer eldre kode én fil om gangen ved hjelp av @ts-expect-error-markører.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Strict Mode og eliminering av any» gratis?

Ja – hele teksten i «Strict Mode og eliminering av any» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Strict Mode og eliminering av any»?

Aktiver alle strict-flagg i tsconfig, bruk unknown i stedet for any, bruk type assertions på en trygg måte, og migrer en svakt typet fil til strict. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Strict Mode og eliminering av any»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Template Literal-typer
Dekoratorer og metadata
TypeScript med React: FC-generiske typer og hooks
Strict Mode og eliminering av any

← Tilbake til Frontend Academy