TypeScript för nybörjare, Del 1 Komma igång

Låt oss starta den här handledningen med frågan: "Vad är TypeScript?" 

TypeScript är en typad superset av JavaScript som kompilerar till vanlig JavaScript. Som en analogi, om JavaScript var CSS, skulle TypeScript vara SCSS. 

All giltig JavaScript-kod som du skriver är också giltig TypeScript-kod. Men med TypeScript får du använda statisk typing och de senaste funktionerna som kompileras till vanlig JavaScript, vilket stöds av alla webbläsare. TypeScript syftar till att lösa problemet med att göra JavaScript skalbar, och det gör ett ganska bra jobb. 

I denna handledning börjar du med att läsa om olika funktioner i TypeScript och varför det är en bra idé att lära sig. Resten av avsnitten i artikeln kommer att omfatta installation och sammanställning av TypeScript tillsammans med några populära textredigerare som erbjuder dig stöd för typScript-syntaxen och andra viktiga funktioner.

Varför Lär dig TypeScript?

Om du aldrig har använt TypeScript tidigare kanske du undrar varför du borde störa om att lära dig alls när den kompilerar till JavaScript i slutändan. 

Låt mig försäkra dig om att du inte kommer att behöva ägna mycket tid på att lära sig TypeScript. Både TypeScript och JavaScript har mycket liknande syntax, och du kan bara byta namn på din .js filer till .ts och börja skriva TypeScript-kod. Här är några funktioner som bör övertyga dig om att börja lära sig TypScript:

1. Till skillnad från JavaScript, som är typiskt skrivet, kan du använda typskriftsskrivning med TypeScript. Denna funktion gör koden mer underhållbar och minskar risken för fel som kan ha orsakats på grund av felaktiga antaganden om typen av vissa variabler. Som en extra bonus kan TypeScript bestämma typen av en variabel baserat på användningen utan att du explicit anger en typ. Du bör dock alltid ange varianterna för en variabel för tydlighet.
2. För att vara ärlig, var JavaScript inte utformat för att fungera som ett omfattande utvecklingsspråk. TypeScript lägger till alla dessa saknade funktioner i JavaScript som gör den verkligen skalbar. Med statisk typing kommer den IDE du använder nu att kunna förstå den kod som du skriver på ett bättre sätt. Detta ger IDE förmågan att tillhandahålla funktioner som kodkomplettering och säker refaktoring. Allt detta resulterar i en bättre utvecklingsupplevelse.
3. Med TypeScript kan du även använda alla senaste JavaScript-funktionerna i din kod utan att behöva oroa dig för webbläsarstöd. När du har skrivit koden kan du kompilera den till vanlig gammal JavaScript som stöds av alla webbläsare med lätthet.
4. Många populära ramar som Angular and Ionic använder nu TypeScript. Det betyder att om du någonsin bestämmer dig för att använda någon av ramarna i framtiden är inlärning TypeScript nu en bra idé.

Installation

Innan du börjar skriva en underbar typsnittskod måste du först installera TypeScript. Detta kan göras med hjälp av npm. Om du inte har installerat npm måste du installera npm först innan du installerar TypeScript. För att installera TypeScript måste du starta terminalen och köra följande kommando:

npm installera -g typescript

När installationen är klar kan du kontrollera TypeScript-versionen som installerades genom att köra kommandot tsc -v i din terminal. Om allt var korrekt installerat ser du det installerade typskriptversionsnumret i terminalen.

IDEs och Textredigerare med TypeScript Support

TypeScript skapades av Microsoft. Så det faktum att Visual Studio var den första IDE som stödjer TypeScript borde inte komma som en överraskning. När TypeScript började bli populär, lade allt fler redaktörer och IDEs till stöd för detta språk, antingen ut ur rutan eller genom plugins. En annan lätt och öppen käll editor som heter Visual Studio Code, skapad av Microsoft, har inbyggt stöd för TypeScript. På samma sätt har WebStorm också stöd för TypeScript utan stöd.

Microsoft har också skapat ett gratis Sublime TypeScript-plugin. NetBeans har ett TypeScript-plugin som ger olika funktioner för att underlätta utveckling. Syntaxmarkering är tillgänglig i Vim och Notepad ++ med hjälp av typen typescript-vim och notepadplus-typcript plugins. 

Du kan se en fullständig lista över alla textredigerare och IDE som stödjer TypeScript på GitHub. För exemplen i denna serie använder jag Visual Studio Code för att skriva hela koden.

Kompilerar TypeScript till JavaScript

Låt oss säga att du har skrivit en typScript-kod i en .ts fil. Webbläsare kan inte själva köra den här koden. Du måste kompilera TypeScript till vanlig JavaScript som kan tolkas av webbläsare. 

Om du använder en IDE kan koden sammanställas till JavaScript i IDE själv. Till exempel kan Visual Studio du direkt kompilera TypeScript-koden till JavaScript. Du måste skapa en tsconfig.json fil där du anger alla konfigurationsalternativ för att kompilera din TypeScript-fil till JavaScript. 

Det nybörjarevänliga tillvägagångssättet när du inte arbetar med ett stort projekt är att använda terminalen själv. Först måste du flytta till platsen för TypeScript-filen i terminalen och sedan köra följande kommando.

tsc first.ts

Detta skapar en ny fil med namnet first.js på samma plats. Tänk på att om du redan hade en fil med namnet first.js, det skulle skrivas över.

Om du vill sammanställa alla filer i den nuvarande katalogen kan du göra det med hjälp av jokertecken. Kom ihåg att detta inte fungerar rekursivt.

tsc * .ts 

Slutligen kan du bara sammanställa vissa specifika filer genom att uttryckligen ange namn på en enda rad. I sådana fall kommer JavaScript-filer att skapas med motsvarande filnamn.

tsc first.ts product.ts bot.ts

Låt oss ta en titt på följande program, vilket multiplicerar två siffror i TypeScript.

låt a: antal = 12; låt b: nummer = 17; funktion showProdukt (första: nummer, andra: nummer): void console.log ("Produkten är:" + första * andra);  showProdukt (a, b);

TypScript-koden ovan kompilerar till följande JavaScript-kod när den riktade versionen är inställd på ES6. Observera hur all typinformation som du angav i TypeScript nu är borta efter sammanställningen. Med andra ord kodas kompileras till JavaScript som kan förstås av webbläsaren, men du får göra utvecklingen i en mycket bättre miljö som kan hjälpa dig att fånga många buggar.

låt a = 12; låt b = 17; funktion showProdukt (första, andra) console.log ("Produkten är:" + första * andra);  showProdukt (a, b);

I ovanstående kod har vi angivit typen av variabler en och b som siffror. Detta innebär att om du försöker att ange värdet av b till en sträng som "äpple", kommer TypeScript att visa ett fel som "apple" inte kan överföras till typen siffra. Din kod kommer fortfarande att kompilera till JavaScript, men det här felmeddelandet meddelar dig att du har gjort ett misstag och hjälper dig att undvika ett problem under körtiden.. 

Här är en skärmdump som visar felmeddelandet i Visual Studio Code:

Ovanstående exempel visar hur TypeScript fortsätter att ge dig tips om möjliga fel i kod. Det här var ett mycket grundläggande exempel, men när du skapar mycket stora program, går meddelanden som dessa långt för att hjälpa dig skriva robust kod med mindre chans att få fel.

Slutgiltiga tankar

Den här startade handledningen i serien var avsedd att ge dig en mycket kort översikt över olika TypeScript-funktioner och hjälper dig att installera språket tillsammans med några förslag till IDEs och textredigerare som du kan använda för utveckling. Nästa avsnitt täckte olika sätt att sammanställa din TypeScript-kod till JavaScript och visade dig hur TypeScript kan hjälpa dig att undvika några vanliga fel.

Jag hoppas att du gillade den här handledningen. Om du har några frågor, vänligen meddela mig det i kommentarerna. Nästa handledning i serien kommer att diskutera olika variabla typer som finns tillgängliga i TypeScript.