TypeScript Academy · Les

Conversiestrategie per bestand

Hernoem stapsgewijs .js naar .ts zonder iets te breken.

Les 3 van 413 stappen

Conversiestrategie per bestand is een gratis TypeScript Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject TypeScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus TypeScript Academy bevat in totaal 4 lessen.

De incrementele aanpak

Bij bestandsgewijze conversie geef je steeds één .js-bestand de naam .ts en los je onderweg typefouten op. Zo blijft het project bij elke stap compileren.

# Step 1: rename
mv src/utils.js src/utils.ts
# Step 2: fix errors
npx tsc --noEmit
# Step 3: commit and repeat

Bepalen waar je begint

Begin met bladmodules: bestanden die niets uit andere projectbestanden importeren. Deze hebben geen TypeScript-afhankelijkheden verderop waarvoor je eerst iets moet regelen.

# Find files with fewest imports from other project files:
grep -r "from './" src --include="*.js" | sort | uniq -c | sort -n
# Convert lowest-count files first

Fouten door impliciete any afhandelen

Wanneer je een JS-bestand de naam .ts geeft, veroorzaken parameters zonder typen impliciete any-fouten als noImplicitAny: true is ingesteld. Voeg expliciete typen toe of gebruik tijdelijk any.

// Before: JS
function process(data) { return data.value; }

// After: TS (add annotation)
function process(data: { value: string }) { return data.value; }
// Or temporarily:
function process(data: any) { return data.value; }

Fouten tijdelijk onderdrukken

Gebruik // @ts-ignore op moeilijk te herstellen regels en houd ze bij als TODO's, zodat je ze niet vergeet.

// TODO: type this properly in follow-up PR
// @ts-ignore
const result = complexLegacyFunction(x);

Importinstructies bijwerken

Wanneer een bestand .ts wordt, moeten de bestanden die het gebruiken mogelijk hun importinstructies bijwerken. TypeScript vindt .ts-bestanden automatisch zonder bestandsextensies in importpaden.

// No extension needed — TypeScript finds .ts
import { process } from "./utils";

Require-aanroepen van derden omzetten

Vervang CommonJS-require-aanroepen tijdens de conversie door ES-module-import-syntaxis, zodat deze overeenkomt met de moduleoplossing van TypeScript.

// Before: CommonJS
const fs = require("fs");
// After: ES module
import fs from "fs";

Strikte modus stapsgewijs invoeren

Schakel strikte vlaggen per bestand stapsgewijs in met opmerkingen als // @ts-strict-ignore per bestand, of migreer naar een afzonderlijke tsconfig waarin strict is ingeschakeld.

// tsconfig.strict.json — points to converted files only
{
  "extends": "./tsconfig.json",
  "compilerOptions": { "strict": true },
  "include": ["src/converted/**/*"]
}

Resterende bestanden bijhouden

Houd een checklist bij of gebruik een script om de resterende .js-bestanden te tellen en de migratievoortgang in de loop van de tijd te volgen.

find src -name "*.js" | wc -l   # remaining JS files
find src -name "*.ts" | wc -l   # converted TS files

Grote PR's vermijden

Converteer één bestand per PR om beoordelingen beheersbaar te houden. Grote TypeScript-migraties zijn gemakkelijker te beoordelen en terug te draaien wanneer ze tot afzonderlijke bestanden zijn beperkt.

# Good: one file per PR
# Bad: 50 files renamed in one PR

Tests uitvoeren na elke conversie

Voer de testsuite na elke bestandsconversie uit om regressies tijdens de uitvoering op te sporen die de TypeScript-typechecker mogelijk niet ontdekt.

npm test
# Ensure all tests pass after each .js → .ts rename

Samenvatting: bestandsgewijze strategie

Converteer eerst bladbestanden, herstel of onderdruk fouten, laat het project bij elke stap compileren, houd resterende JS-bestanden bij en dien één bestand per PR in voor beheersbare beoordelingen.

Korte controle

Welke bestanden moet je bij een bestandsgewijze migratie als eerste naar TypeScript converteren?

Wat je hebt geleerd

Bestandsgewijze migratie: begin met bladmodules, geef ze de naam .ts, herstel of onderdruk fouten, laat het project compileren en houd de voortgang bij. Kleine conversies per PR maken de migratie veilig en goed te beoordelen.

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
101
Lessen
352

Veelgestelde vragen

Is de les “Conversiestrategie per bestand” gratis?

Ja — de volledige tekst van “Conversiestrategie per bestand” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus TypeScript Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus TypeScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Conversiestrategie per bestand”?

Hernoem stapsgewijs .js naar .ts zonder iets te breken. Je oefent met TypeScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met TypeScript Academy te beginnen?

Ervaring vooraf is niet nodig. TypeScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Conversiestrategie per bestand”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over TypeScript Academy?

Ja. Elke les over TypeScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. De migratie starten: allowJs en checkJs
  2. JSDoc-typeannotaties als tussenstap
  3. Conversiestrategie per bestand
  4. Omgaan met third-partybibliotheken zonder typen
← Terug naar TypeScript Academy