Lær TypeScript på 5 minutter - En tutorial til begyndere

TypeScript er et skrevet supersæt af JavaScript, der har til formål at gøre sproget mere skalerbart og pålideligt.

Det er open source og er blevet vedligeholdt af Microsoft, siden de oprettede det i 2012. TypeScript fik imidlertid sit første gennembrud som kerneprogrammeringssproget i Angular 2. Det har været ved med at vokse lige siden, også i React og Vue-samfundene.

I denne vejledning lærer du det grundlæggende i TypeScript ved hjælp af praktiske eksempler.

Vi er også ved at lancere et gratis 22-delt TypeScript-kursus på Scrimba. Efterlad din e-mail her, hvis du vil have tidlig adgang!

Lad os komme igang.

Installation af TypeScript

Før vi begynder at kode, skal vi installere TypeScript på vores computer. Vi bruger npmtil dette, så bare åbn terminalen og skriv følgende kommando:

npm install -g typescript 

Når det er installeret, kan vi kontrollere det ved at køre kommandoen, tsc -vder viser versionen af ​​TypeScript installeret.

Skriv noget kode

Lad os oprette vores første TypeScript-fil og skrive noget kode inde i den. Åbn din foretrukne IDE eller Teksteditor, og opret en fil med navnet på first.ts - For TypeScript-filer bruger vi udvidelsen.ts

For nu skal vi bare skrive et par linjer almindelig JavaScript, da al JavaScript-kode også er gyldig TypeScript-kode:

let a = 5; let b = 5; let c = a + b; console.log(c); 

Det næste trin er at kompilere vores TypeScript til almindelig JavaScript, da browsere vil have .jsfiler til at læse.

Kompilering af TypeScript

For at kompilere kører vi kommandoen tsc filename.ts, som opretter en JavaScript-fil med det samme filnavn, men en anden udvidelse, og som vi til sidst kan videregive til vores browsere.

Så åbn terminalen på filens placering, og kør følgende kommando:

tsc first.ts 

Tip : Hvis du vil kompilere alle TypeScript-filer i en hvilken som helst mappe, skal du bruge kommandoen:tsc *.ts

Datatyper

TypeScript - som navnet antyder - er den indtastede version af JavaScript. Dette betyder, at vi kan specificere typer til forskellige variabler på erklæringstidspunktet. De har altid den samme type data i det omfang.

At skrive er en meget nyttig funktion for at sikre pålidelighed og skalerbarhed. Typekontrol hjælper med at sikre, at vores kode fungerer som forventet. Det hjælper også med at jage bugs og fejl og korrekt dokumentere vores kode.

Syntaksen for at tildele en type til en hvilken som helst variabel er at skrive navnet på variablen efterfulgt af et :tegn og derefter navnet på typen efterfulgt af et =tegn og værdien på variablen.

Der er tre forskellige typer i TypeScript: anytypen, Built-intyperne og User-definedtyperne. Lad os se på hver af dem.

enhver type

Den anydatatype er overordnet alle de datatyper på skrivemaskine. At give enhver variabel af typen anysvarer til at fravælge typekontrol af en variabel.

let myVariable: any = 'This is a string' 

Indbyggede typer

Dette er de typer, der er bygget i TypeScript. De omfatter number, string, boolean, void, nullog undefined.

let num: number = 5; let name: string = 'Alex'; let isPresent: boolean = true; 

Brugerdefinerede typer

De User-definedtyper omfatter enum, class, interface, array, og tuple. Vi vil diskutere nogle af disse senere i denne artikel.

Objektorienteret programmering

TypeScript understøtter alle funktionerne i objektorienteret programmering, såsom klasser og grænseflader. Denne mulighed er et kæmpe løft for JavaScript - det har altid kæmpet med sin OOP-funktionalitet, især siden udviklere begyndte at bruge det til applikationer i stor skala.

Klasse

I objektorienteret programmering er en klasse skabelonen til objekter. En klasse definerer, hvordan et objekt vil se ud med hensyn til objektets funktioner og funktionaliteter. En klasse indkapsler også data til objektet.

TypeScript has built-in support for classes, which were unsupported by ES5 and earlier versions. This means we can use the class keyword to easily declare one.

class Car { // fields model: String; doors: Number; isElectric: Boolean; constructor(model: String, doors: Number, isElectric: Boolean) { this.model = model; this.doors = doors; this.isElectric = isElectric; } displayMake(): void { console.log(`This car is ${this.model}`); } } 

In the above example, we have declared a Car class, along with some of its properties, which we’re initializing in the constructor. We also have a method which would display some message using its property.

Let’s see how we can create a new instance of this class:

const Prius = new Car('Prius', 4, true); Prius.displayMake(); // This car is Prius 

To create an object of a class, we use the keyword of new and call the constructor of the class and pass it the properties. Now this object Prius has its own properties of model, doors, and isElectric. The object also can call the method of displayMake, which would have access to the properties of Prius.

Interface

The concept of interfaces is another powerful feature of TypeScript, which allows you to define the structure of variables. An interface is like a syntactical contract to which an object should conform.

Interfaces are best described through an actual example. So, suppose we have an object of Car:

const Car = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } 

If we look at the object above and try to extract its signature, it would be:

{ model: String, make: String, display(): void } 

If we want to reuse this signature, we can declare it in the form of an interface. To create an interface, we use the keyword interface.

interface ICar { model: String, make: String, display(): void } const Car: ICar = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } 

Here, we’ve declared an interface called ICar , and created an object Car. Car is now binding to the ICar interface, ensuring that the Car object defines all the properties which are in the interface.

Conclusion

Så jeg håber, at dette gav dig et hurtigt indblik i, hvordan TypeScript kan gøre din JavaScript mere stabil og mindre tilbøjelig til fejl.

TypeScript vinder meget fart i verdenen af ​​webudvikling. Der er også et stigende antal React-udviklere, der vedtager det. TypeScript er bestemt noget enhver front-end-udvikler i 2018 bør være opmærksom på.

Glad kodning :)

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.