Share
La oss starte denne opplæringen med spørsmålet: "Hva er TypeScript?"
TypeScript er et skrevet supersett av JavaScript som kompilerer til vanlig JavaScript. Som en analogi, hvis JavaScript var CSS, ville TypeScript være SCSS.
All gyldig JavaScript-kode du skriver, er også gyldig TypeScript-kode. Men med TypeScript kan du bruke statisk typing og de nyeste funksjonene som blir kompilert til vanlig JavaScript, som støttes av alle nettlesere. TypeScript er rettet mot å løse problemet med å gjøre JavaScript skalerbart, og det gjør en ganske god jobb.
I denne opplæringen begynner du ved å lese om forskjellige funksjoner i TypeScript, og hvorfor lære det er en god ide. Resten av seksjonene i artikkelen vil dekke installasjon og kompilering av TypeScript sammen med noen populære tekstredigerere som gir deg støtte for TypeScript-syntaks og andre viktige funksjoner.
Hvis du aldri har brukt TypeScript før, kan du kanskje lure på hvorfor du bør bry deg om å lære det i det hele tatt når det kompilerer til JavaScript til slutt.
La meg forsikre deg om at du ikke trenger å bruke mye tid på å lære TypeScript. Både TypeScript og JavaScript har veldig lignende syntaks, og du kan bare gi nytt navn til din .js filer til .ts og begynn å skrive TypeScript-kode. Her er noen funksjoner som bør overbevise deg om å begynne å lære TypeScript:
Før du begynner å skrive noen kjempebra TypeScript-kode, må du først installere TypeScript. Dette kan gjøres ved hjelp av npm. Hvis du ikke har installert npm, må du først installere npm før du installerer TypeScript. For å installere TypeScript må du starte terminalen og kjøre følgende kommando:
npm installer -g typescript
Når installasjonen er fullført, kan du sjekke TypeScript-versjonen som ble installert ved å kjøre kommandoen tsc -v i terminalen din. Hvis alt ble riktig installert, vil du se det installerte TypeScript-versjonsnummeret i terminalen.
TypeScript ble opprettet av Microsoft. Så det faktum at Visual Studio var den første IDE for å støtte TypeScript, burde ikke komme som en overraskelse. Når TypeScript begynte å bli populær, ble flere og flere redaktører og IDEer lagt til støtte for dette språket, enten ut av boksen eller gjennom plugins. En annen lettvekts og open source-editor, kalt Visual Studio Code, laget av Microsoft, har innebygd støtte for TypeScript. På samme måte har WebStorm også ut-av-boks-støtte for TypeScript.
Microsoft har også opprettet et gratis Sublime TypeScript-plugin. NetBeans har et TypeScript-plugin som gir mange funksjoner for enkel utvikling. Syntaxutheving er tilgjengelig i Vim og Notepad ++ ved hjelp av typeskript-vim og notepadplus-typeskriptpluggene.
Du kan se en fullstendig liste over alle tekstredigerere og IDEer som støtter TypeScript på GitHub. For eksemplene i denne serien bruker jeg Visual Studio Code til å skrive all koden.
La oss si at du har skrevet noen TypeScript-kode i a .ts fil. Nettlesere vil ikke kunne kjøre denne koden av seg selv. Du må kompilere TypeScript til vanlig JavaScript som kan forstås av nettlesere.
Hvis du bruker en IDE, kan koden kompileres til JavaScript i selve IDE. For eksempel lar Visual Studio deg direkte kompilere TypeScript-koden til JavaScript. Du må opprette en tsconfig.json fil der du spesifiserer alle konfigurasjonsalternativene for å kompilere TypeScript-filen til JavaScript.
Den mest nybegynnerlige tilnærmingen når du ikke jobber med et stort prosjekt, er å bruke terminalen selv. Først må du flytte til plasseringen av TypeScript-filen i terminalen og deretter kjøre følgende kommando.
tsc first.ts
Dette vil opprette en ny fil som heter first.js på samme sted. Husk at hvis du allerede hadde en fil som heter first.js, det ville bli overskrevet.
Hvis du vil kompilere alle filene i gjeldende katalog, kan du gjøre det ved hjelp av jokertegn. Husk at dette ikke fungerer rekursivt.
tsc * .ts
Til slutt kan du bare kompilere noen spesifikke filer ved å eksplisitt gi navnene i en enkelt linje. I slike tilfeller vil JavaScript-filer bli opprettet med tilsvarende filnavn.
tsc first.ts product.ts bot.ts
La oss ta en titt på følgende program, som multipliserer to tall i TypeScript.
Accentsconagua
la a: tall = 12; la b: tall = 17; funksjon showProdukt (første: nummer, andre: nummer): void console.log ("Produktet er:" + første * andre); showProdukt (a, b);TypeScript-koden ovenfor samler til følgende JavaScript-kode når den målrettede versjonen er satt til ES6. Legg merke til hvordan all type informasjon som du oppgav i TypeScript, nå er borte etter samlingen. Koden blir med andre ord kompilert til JavaScript som kan forstås av nettleseren, men du kommer til å gjøre utviklingen i et mye bedre miljø som kan hjelpe deg med å fange opp mange feil.
la a = 12; la b = 17; funksjon showProdukt (første, andre) console.log ("Produktet er:" + første * andre); showProdukt (a, b);I ovennevnte kode har vi angitt typen variabler en og b som tall. Dette betyr at hvis du senere prøver å sette verdien av b til en streng som "eple", vil TypeScript vise deg en feil at "eple" ikke kan overføres til typen Nummer. Koden din vil fortsatt kompilere til JavaScript, men denne feilmeldingen vil gi deg beskjed om at du har gjort en feil og hjelper deg med å unngå et problem under kjøretiden..
Her er et skjermbilde som viser feilmeldingen i Visual Studio Code:
Eksemplet ovenfor viser hvordan TypeScript fortsetter å gi deg hint om mulige feil i koden. Dette var et veldig grunnleggende eksempel, men når du oppretter svært store programmer, vil meldinger som disse gå langt for å hjelpe deg med å skrive robust kode med mindre sjanse for feil.
Denne igangsatte opplæringen i serien var ment å gi deg en veldig kort oversikt over forskjellige TypeScript-funksjoner, og du kan installere språket sammen med noen forslag til IDEer og tekstredigerere som du kan bruke til utvikling. Den neste delen dekket forskjellige måter å kompilere TypeScript-koden til JavaScript, og viste deg hvordan TypeScript kan hjelpe deg med å unngå noen vanlige feil.
Jeg håper du likte denne opplæringen. Hvis du har spørsmål, vennligst gi meg beskjed i kommentarene. Den neste opplæringen i serien vil diskutere ulike variabeltyper som er tilgjengelige i TypeScript.
