TypeScript vs JavaScript: wat verandert er, wat tsc uitvoert | We.Inc
Zie TypeScript naast het JavaScript waarnaar het compileert, ontdek wat de type checker vangt, waarom types bij runtime verdwijnen en wanneer gewoon JavaScript volstaat.
TypeScript is JavaScript plus een typesysteem. U schrijft gewoon JavaScript met optionele type-annotaties, en de compiler tsc controleert die en haalt ze daarna weg om gewoon JavaScript te maken. Browsers en Node draaien die output, dus types bestaan nooit bij runtime. De winst is dat u fouten al tijdens het bewerken vangt, niet snellere code.
Naast elkaar
Vraag
JavaScript
TypeScript
Draait direct in de browser?
Ja
Nee, eerst gecompileerd of gestript naar JavaScript
Wanneer worden typefouten gevonden?
Als de code draait
Tijdens het bewerken en bij de controle door tsc
Bestandsextensies
.js, .mjs, .jsx
.ts, .tsx (.d.ts voor declaraties)
Types bij runtime
Alleen waarden
Geen, annotaties worden gewist
Build-stap nodig?
Optioneel
Ja voor de controle; een stripper of bundler om het te draaien
Is geldig JavaScript geldige invoer?
Ja
Ja, al kan de checker fouten melden
Kies hieronder een voorbeeld om een TypeScript-bestand te zien naast het JavaScript dat tsc ervoor schreef. Meestal is de output uw code zonder de annotaties. Een paar features, zoals enums, genereren echte code, en dat verschil telt bij de keuze van uw tools.
Kies een voorbeeld: gewone annotaties, een interface, een enum, een const enum of een typefout.
Lees de TypeScript-bron links en het uitgevoerde JavaScript rechts.
Bekijk de notitie onder elk paar om te zien wat de compiler controleerde en wat in de output overbleef.
Kopieer een van beide kanten om het in uw eigen project te proberen.
Voeg vanaf de eerste dag een tsconfig.json toe met strict op true. Als u het later in een grote codebase aanzet, krijgt u in één keer honderden fouten.
Hernoem bij een migratie één .js-bestand tegelijk naar .ts. Met allowJs kunnen beide soorten bestanden in hetzelfde project bestaan terwijl u overstapt.
Onthoud dat JSON van een server ongetypeerd is tot u het controleert. Een type-annotatie op opgehaalde data is een belofte aan de compiler, geen controle bij runtime.
Gebruik een snelle stripper (Vite, esbuild of type stripping in Node) om code te draaien, en houd tsc --noEmit als aparte controle in uw editor en CI.
Veelgestelde vragen
Is TypeScript een andere taal dan JavaScript?
Het is een superset. Elk TypeScript-programma wordt JavaScript, en TypeScript voegt syntax toe om de vorm van waarden te beschrijven. Leer eerst JavaScript; de types liggen erbovenop in plaats van het te vervangen.
Maakt TypeScript mijn site sneller?
Nee. Annotaties worden verwijderd voordat de code draait, dus de browser voert hetzelfde JavaScript uit dat u met de hand zou hebben geschreven. De voordelen zijn minder bugs die gebruikers bereiken en veiliger refactoren.
Weigert tsc te bouwen als er een typefout is?
Niet standaard. tsc meldt de fout en schrijft het .js-bestand toch, wat een geleidelijke migratie mogelijk maakt. Stel noEmitOnError in als u wilt dat een mislukte controle de output blokkeert.
Kan Node .ts-bestanden draaien zonder build-stap?
Recente Node-versies strippen wisbare typesyntax en draaien het bestand, met type stripping standaard aan sinds v23.6.0 en v22.18.0. Node doet geen typecontrole, en syntax die gegenereerde code nodig heeft, zoals enums, wordt geweigerd.
Wanneer is gewoon JavaScript de betere keuze?
Kleine scripts, snelle prototypes en pagina's met een paar regels interactiviteit verdienen de setup zelden terug. Zodra een project meerdere bestanden heeft, meerdere mensen of data die tussen modules wordt doorgegeven, begint de checker echt tijd te besparen.
Wat tsc echt doet
De compiler heeft twee taken die mensen vaak door elkaar halen. Eerst controleert hij types: hij leest elk bestand, bepaalt het type van elke waarde en meldt alles wat niet klopt. Daarna voert hij uit: hij schrijft JavaScript zonder de typesyntax en herschrijft, als u dat vraagt, nieuwere syntax voor oudere targets.
Moderne toolchains splitsen die taken meestal. Een bundler zoals Vite haalt de types snel weg zonder iets te controleren, en tsc --noEmit draait de volledige controle apart in uw editor of CI. Draait u alleen de bundler, dan kunnen typefouten in productie belanden.
Types worden gewist, valideer dus echte data
Omdat annotaties verdwijnen, kan TypeScript niet voorkomen dat een server een string stuurt waar u een number declareerde. const user: User = await res.json() schrijven zegt de checker alleen dat hij u moet vertrouwen.
Controleer aan de randen van uw programma, zoals formulierinvoer, fetch-responses en local storage, de waarde bij runtime met een kleine guard-functie of een schemalibrary, en laat de checker die garantie naar binnen doorgeven.
Features die niet alleen worden gewist
Enums, namespaces met code, parameter properties en import =-aliassen produceren allemaal eigen JavaScript. TypeScript 5.8 voegde de optie erasableSyntaxOnly toe, die hiervoor een fout meldt, zodat een bestand werkt met type strippers die alleen annotaties verwijderen.
Wilt u .ts-bestanden direct in Node of via een andere stripper draaien, kies dan liever unions van string literals en as const-objecten dan enums. De enumgids op deze site toont beide naast elkaar.
TypeScript toevoegen aan een JavaScript-project
Installeren en een tsconfig maken
Installeert de compiler lokaal, schrijft een start-tsconfig.json en draait een controle zonder bestanden te schrijven.
Met allowJs kunnen oude .js-bestanden tijdens een migratie naast nieuwe .ts-bestanden staan; noEmit laat de output over aan uw bundler.
Data controleren die de compiler niet kan zien
Een runtime-guard die het type vernauwt
De functie controleert de waarde echt, en het returntype vertelt de compiler wat bewezen is.
Annotaties
De parameter- en returntypes worden gecontroleerd en daarna verwijderd. De body blijft onaangeroerd.
Interface
Een interface levert helemaal geen output op. Hij bestaat alleen voor de checker.
Enum
Een gewone enum wordt een echt object met een omgekeerde mapping, dus dit is gegenereerde code, geen gewiste syntax.
const enum
tsc zet de leden van een const enum inline als getallen en laat een commentaar met de oorspronkelijke naam staan.
Typefout
tsc meldt: Argument of type 'string' is not assignable to parameter of type 'number'. Het bestand wordt toch geschreven, tenzij noEmitOnError is ingesteld.