Wat is TypeScript en waarom zou ik het gebruiken in plaats van JavaScript?
Kunt u alstublieft beschrijven wat de TypeScript-taal is?
Wat kan het doen dat JavaScript of beschikbare bibliotheken niet kunnen, wat mij reden zou geven het te overwegen?
1630
3
Ik schreef dit antwoord oorspronkelijk toen Typescript nog heet-van-de-persen was. Vijf jaar later is dit een OK overzicht, maar kijk
1000ft view...
[TypeScript][1] is een superset van JavaScript die vooral voorziet in optionele statische typering, klassen en interfaces. Een van de grote voordelen is dat IDE's een rijkere omgeving kunnen bieden voor het opsporen van veel voorkomende fouten *terwijl je de code typt*.Om een idee te krijgen van wat ik bedoel, bekijk Microsoft's inleidende video over de taal.
Voor een groot JavaScript-project kan het gebruik van TypeScript resulteren in robuustere software, die toch kan worden ingezet waar een gewone JavaScript-applicatie zou draaien.
Het is open source, maar je krijgt alleen de slimme Intellisense terwijl je typt als je een ondersteunde IDE gebruikt. Aanvankelijk was dit alleen Microsoft's Visual Studio (ook opgemerkt in blog post van Miguel de Icaza). Tegenwoordig bieden andere IDE's ook ondersteuning voor TypeScript.
Zijn er nog meer van dit soort technologieën?
Er'is [CoffeeScript][5], maar dat dient echt een ander doel. IMHO, CoffeeScript biedt leesbaarheid voor mensen, maar TypeScript biedt ook diepe leesbaarheid voor *tools* door zijn optionele statische typering (zie deze [recente blog post][6] voor een beetje meer kritiek). Er is ook [Dart][7] maar dat is een volwaardige vervanging voor JavaScript (hoewel het [JavaScript-code kan produceren][8])Voorbeeld
Als voorbeeld, hier's wat TypeScript (je kunt hiermee spelen in de TypeScript Playground)
En hier's het JavaScript dat het zou produceren
Merk op hoe het TypeScript het type van lidvariabelen en parameters van klassemethoden definieert. Dit wordt verwijderd bij het vertalen naar JavaScript, maar gebruikt door de IDE en de compiler om fouten op te sporen, zoals het doorgeven van een numeriek type aan de constructor.
Het is ook in staat om types af te leiden die niet expliciet zijn gedeclareerd, bijvoorbeeld, het zou bepalen dat de
greet()
methode een string retourneert.Debuggen van Typescript
Veel browsers en IDE's bieden directe debug ondersteuning via sourcecemaps. Zie deze Stack Overflow-vraag voor meer details: [TypeScript code debuggen met Visual Studio][10]Wil je meer weten?
Ik schreef dit antwoord oorspronkelijk toen Typescript nog in de kinderschoenen stond. Kijk eens naar [Lodewijk's antwoord][11] op deze vraag voor wat meer actuele details.TypeScript's relatie tot JavaScript
TypeScript is een getypte superset van JavaScript die compileert naar gewone
Tijdens de build, 2016 conferentie gaf mede-ontwerper van TypeScript Anders Hejlsberg een gedetailleerde uitleg en demonstratie van deze functie: video (van 44:30 tot 56:30).
Compilatie
Om TypeScript te gebruiken, heb je een buildproces nodig om naar JavaScript-code te compileren. Het compilatieproces duurt meestal maar een paar seconden, afhankelijk van de grootte van uw project. De TypeScript-compiler ondersteunt incrementele compilatie (
--watch
compiler flag), zodat alle volgende wijzigingen sneller kunnen worden gecompileerd. De TypeScript-compiler kan inline source map-informatie in de gegenereerde .js-bestanden of aparte .map-bestanden maken. Bronmapinformatie kan worden gebruikt door debuggingprogramma's zoals de Chrome DevTools en andere IDE's om de regels in het JavaScript te relateren aan de regels die ze in het TypeScript hebben gegenereerd. Dit maakt het mogelijk voor u om breakpoints in te stellen en variabelen te inspecteren tijdens runtime, rechtstreeks op uw TypeScript-code. Source map informatie werkt vrij goed, het was er al lang voor TypeScript, maar het debuggen van TypeScript is over het algemeen niet zo geweldig als wanneer JavaScript direct wordt gebruikt. Neem bijvoorbeeld hetthis
keyword. Door de veranderde semantiek van hetthis
keyword rond closures sinds ES2015, kanthis
eigenlijk bestaan tijdens runtime als een variabele genaamd_this
(zie dit antwoord). Dit kan u verwarren tijdens het debuggen, maar over het algemeen is het geen probleem als u het weet of de JavaScript code inspecteert. Opgemerkt moet worden dat Babel precies hetzelfde soort probleem heeft. Er zijn nog een paar andere trucs die de TypeScript-compiler kan doen, zoals het genereren van onderscheppingscode op basis van decorators, het genereren van code voor het laden van modules voor verschillende modulesystemen en het parseren van JSX. U zult echter waarschijnlijk een ander bouwgereedschap nodig hebben dan de Typescript compiler. Als je bijvoorbeeld je code wilt comprimeren, zul je andere tools aan je bouwproces moeten toevoegen om dat te doen. Er zijn TypeScript compilatie plugins beschikbaar voor Webpack, Gulp, Grunt en zowat elke andere JavaScript build tool die er is. De TypeScript-documentatie heeft een sectie over integreren met build-tools die ze allemaal bespreekt. Er is ook een linter beschikbaar voor het geval je nog meer controle op de bouwtijd wilt. Er zijn ook een groot aantal seed-projecten waarmee je aan de slag kunt met TypeScript in combinatie met een heleboel andere technologieën zoals Angular 2, React, Ember, SystemJS, Webpack, Gulp, enz.interoperabiliteit van JavaScript
Omdat TypeScript zo nauw verwant is aan JavaScript heeft het geweldige interoperabiliteitsmogelijkheden, maar er is wat extra werk nodig om met JavaScript-bibliotheken in TypeScript te werken. TypeScript definities zijn nodig zodat de TypeScript compiler begrijpt dat functie-aanroepen zoals
_.groupBy
ofangular.copy
of$.fadeOut
in feite geen illegale statements zijn. De definities voor deze functies worden in.d.ts
bestanden geplaatst. De eenvoudigste vorm die een definitie kan aannemen is om een identifier toe te staan om op een willekeurige manier gebruikt te worden. Bijvoorbeeld, bij gebruik van Lodash, zal een enkele regel definitie-bestanddeclare var _ : any
je toestaan om elke functie aan te roepen die je wilt op_
, maar dan kun je natuurlijk ook nog fouten maken:_.foobar()
zou een legale TypeScript aanroep zijn, maar is, natuurlijk, een illegale aanroep bij runtime. Als je goede type-ondersteuning en code completering wilt, moet je definitiebestand preciezer zijn (zie lodash definitions voor een voorbeeld). Npm-modules die voorverpakt zijn met hun eigen type-definities worden automatisch begrepen door de TypeScript-compiler (zie documentatie). Voor vrijwel elke andere semi-populaire JavaScript-bibliotheek die geen eigen definities bevat, heeft iemand al type-definities beschikbaar gemaakt via een andere npm-module. Deze modules worden voorafgegaan door "@types/" en komen uit een Github repository genaamd DefinitelyTyped. Er is één nadeel: de typedefinities moeten overeenkomen met de versie van de bibliotheek die u tijdens runtime gebruikt. Als dat niet het geval is, kan TypeScript je verbieden om een functie aan te roepen of een variabele te dereferencen die bestaat, of je toelaten om een functie aan te roepen of een variabele te dereferencen die niet bestaat, gewoon omdat de types niet overeenkomen met de run-time op compile-time. Zorg er dus voor dat je de juiste versie van de type-definities laadt voor de juiste versie van de bibliotheek die je gebruikt. Eerlijk gezegd is dit een beetje lastig en het kan een van de redenen zijn waarom je niet voor TypeScript kiest, maar in plaats daarvan voor iets als Babel dat helemaal geen last heeft van het moeten ophalen van type definities. Aan de andere kant, als je weet wat je doet, kun je gemakkelijk problemen oplossen die veroorzaakt worden door onjuiste of ontbrekende definitiebestanden.Van JavaScript naar TypeScript converteren
Elk
.js
bestand kan worden hernoemd naar een.ts
bestand en door de TypeScript compiler worden gehaald om syntactisch dezelfde JavaScript code als uitvoer te krijgen (als het tenminste syntactisch correct was). Zelfs als de TypeScript compiler compilatiefouten krijgt zal het nog steeds een.js
bestand produceren. Hij kan zelfs.js
bestanden als invoer accepteren met de--allowJs
vlag. Hierdoor kunt u meteen met TypeScript aan de slag. Helaas is de kans groot dat er in het begin compilatiefouten optreden. Je moet wel onthouden dat dit geen show-stopping errors zijn zoals je misschien gewend bent van andere compilers.De compilatiefouten die men in het begin krijgt bij het converteren van een JavaScript-project naar een TypeScript-project zijn onvermijdelijk door de aard van TypeScript's. TypeScript controleert alle code op geldigheid en moet dus op de hoogte zijn van alle functies en variabelen die worden gebruikt. Daarom moeten voor al deze functies en variabelen typedefinities bestaan, anders zullen er zeker compilatiefouten optreden. Zoals vermeld in het hoofdstuk hierboven, zijn er voor vrijwel elk JavaScript framework
.d.ts
bestanden die gemakkelijk verkregen kunnen worden met de installatie van DefinitelyTyped packages. Het kan echter zijn dat u een of andere obscure bibliotheek hebt gebruikt waarvoor geen TypeScript-definities beschikbaar zijn of dat u een aantal JavaScript-primitieven hebt gepolyfilled. In dat geval moet je type-definities voor deze bits leveren om de compilatiefouten te laten verdwijnen. Maak gewoon een.d.ts
bestand en neem het op in de tsconfig.json'sfiles
array, zodat het altijd door de TypeScript compiler in aanmerking wordt genomen. Daarin declareer je de bits die TypeScript niet kent als typeany
. Als je eenmaal alle fouten hebt geëlimineerd kun je geleidelijk typing introduceren in die delen naar gelang je behoeften. Er zal ook wat werk aan de (her)configuratie van je bouwpijplijn nodig zijn om TypeScript in de bouwpijplijn te krijgen. Zoals vermeld in het hoofdstuk over compilatie zijn er veel goede bronnen beschikbaar en ik moedig je aan om op zoek te gaan naar seed-projecten die de combinatie van tools gebruiken waarmee je wilt werken. De grootste hindernis is de leercurve. Ik moedig je aan om eerst met een klein project te spelen. Kijk hoe het werkt, hoe het bouwt, welke bestanden het gebruikt, hoe het geconfigureerd is, hoe het functioneert in je IDE, hoe het gestructureerd is, welke tools het gebruikt, enz. Het omzetten van een grote JavaScript codebase naar TypeScript is te doen als je weet wat je doet. Lees bijvoorbeeld deze blog over het omzetten van 600k regels naar TypeScript in 72 uur). Zorg er alleen wel voor dat je de taal goed beheerst voordat je de sprong waagt.Overname
TypeScript is open-source (Apache 2-licentie, zie GitHub) en wordt gesteund door Microsoft. Anders Hejlsberg, de hoofdarchitect van C# is de speerpunt van het project. Het is een zeer actief project; het TypeScript-team heeft de afgelopen jaren veel nieuwe functies uitgebracht en er staan nog veel geweldige functies op de planning (zie de roadmap). Enkele feiten over adoptie en populariteit:
"TypeScript Fundamentals" -- een Pluralsight video-cursus van Dan Wahlin en John Papa is een zeer goede, momenteel (25 maart 2016) bijgewerkte inleiding tot Typescript (TypeScript 1.8).
Voor mij zijn de echt goede eigenschappen, naast de mooie mogelijkheden voor intellisense, de klassen, interfaces, modules, het gemak van het implementeren van AMD, en de mogelijkheid om de Visual Studio Typescript debugger te gebruiken wanneer deze wordt aangeroepen met IE.
Om samen te vatten: Indien gebruikt zoals bedoeld, kan Typescript JavaScript programmeren betrouwbaarder maken, en eenvoudiger. Het kan de productiviteit van de JavaScript programmeur aanzienlijk verhogen over de volledige SDLC.