Sužinokite „TypeScript“ per 5 minutes - pamoka pradedantiesiems

„TypeScript“ yra tipinis „JavaScript“ rinkinys, kurio tikslas - padaryti kalbą labiau keičiamą ir patikimą.

Tai yra atviro kodo programa, kurią „Microsoft“ prižiūri nuo tada, kai ją sukūrė 2012 m. Tačiau „TypeScript“ pasiekė savo pirmąjį proveržį kaip pagrindinė programavimo kalba „Angular 2“. Nuo tada jis ir toliau auga, taip pat „React“ ir „Vue“ bendruomenėse.

Šioje pamokoje sužinosite „TypeScript“ pagrindus naudodamiesi praktiniais pavyzdžiais.

Taip pat ketiname pradėti nemokamą „Scrimba“ 22 dalių „TypeScript“ kursą. Palikite savo el. Paštą čia, jei norite gauti išankstinę prieigą!

Pradėkime.

Diegiama „TypeScript“

Prieš pradėdami koduoti, turime įdiegti „TypeScript“ į savo kompiuterį. Mes tai naudosime npm, todėl tiesiog atidarykite terminalą ir įveskite šią komandą:

npm install -g typescript 

Kai jis bus įdiegtas, galėsime jį patikrinti vykdydami komandą, tsc -vkurioje bus rodoma įdiegtos „TypeScript“ versija.

Rašyti tam tikrą kodą

Sukurkime savo pirmąjį „TypeScript“ failą ir į jį įrašykime kodą. Atidarykite mėgstamą IDE arba teksto rengyklę ir sukurkite failą, kurio pavadinimas yra first.ts - „TypeScript“ failams naudojame plėtinį.ts

Kol kas mes tiesiog parašysime kelias paprasto seno „JavaScript“ eilutes, nes visas „JavaScript“ kodas taip pat yra galiojantis „TypeScript“ kodas:

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

Kitas žingsnis yra kompiliuoti „TypeScript“ į paprastą „JavaScript“, nes naršyklės nori, kad .jsfailai būtų skaitomi.

„TypeScript“ sudarymas

Norėdami sudaryti, vykdysime komandą tsc filename.ts, sukuriančią „JavaScript“ failą su tuo pačiu pavadinimu, bet kitu plėtiniu ir kurį galiausiai galėsime perduoti savo naršyklėms.

Taigi atidarykite terminalą failo vietoje ir paleiskite šią komandą:

tsc first.ts 

Patarimas : Jei norite surinkti visus „TypeScript“ failus bet kuriame aplanke, naudokite komandą:tsc *.ts

Duomenų tipai

„TypeScript“, kaip rodo jo pavadinimas, yra tipinė „JavaScript“ versija. Tai reiškia, kad deklaravimo metu galime nurodyti skirtingų kintamųjų tipus. Jie visada turės to paties tipo duomenis toje srityje.

Spausdinimas yra labai naudinga funkcija, užtikrinanti patikimumą ir mastelį. Tipo tikrinimas padeda užtikrinti, kad kodas veikia taip, kaip tikėtasi. Be to, tai padeda ieškant klaidų ir klaidų bei tinkamai dokumentuojant mūsų kodą.

Sintaksė, priskiriant tipą bet kuriam kintamajam, yra parašyti kintamojo pavadinimą, po kurio yra :ženklas, o po to tipo pavadinimą, po kurio nurodomas =ženklas ir kintamojo vertė.

„TypeScript“ yra trys skirtingi tipai: anytipas, Built-intipai ir User-definedtipai. Pažvelkime į kiekvieną iš jų.

bet kokio tipo

anyDuomenų tipas yra visų tipų duomenų mašinėle Superset. Bet kurio tipo kintamojo suteikimas anyprilygsta atsisakymui kintamojo tipo tikrinimo.

let myVariable: any = 'This is a string' 

Įmontuoti tipai

Tai tipai, kurie yra sukurti „TypeScript“. Jie apima number, string, boolean, void, nullir undefined.

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

Vartotojo apibrėžti tipai

Į User-definedtipai enum, class, interface, array, ir tuple. Kai kuriuos iš jų aptarsime vėliau šiame straipsnyje.

Objektinis programavimas

„TypeScript“ palaiko visas į objektą orientuoto programavimo funkcijas, tokias kaip klasės ir sąsajos. Ši galimybė yra didžiulis „JavaScript“ postūmis - ji visada kovojo su savo OOP funkcionalumu, ypač todėl, kad kūrėjai pradėjo naudoti ją didelio masto programoms.

Klasė

Objektinio programavimo metu klasė yra objektų šablonas. Klasė apibrėžia, kaip objektas atrodytų pagal to objekto ypatybes ir funkcijas. Klasė taip pat kaupia objekto duomenis.

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

Taigi tikiuosi, kad tai leido greitai pažvelgti į tai, kaip „TypeScript“ gali padaryti jūsų „JavaScript“ stabilesnę ir mažiau linkusią į klaidas.

„TypeScript“ įgyja nemažą pagreitį žiniatinklio kūrimo pasaulyje. Taip pat daugėja „React“ kūrėjų, kurie jį priima. „TypeScript“ tikrai turėtų žinoti bet kuris „front-end“ kūrėjas 2018 m.

Laimingo kodavimo :)

Ačiū, kad skaitėte! Mano vardas Peras Borgenas, esu „Scrimba“ įkūrėjas - lengviausias būdas išmokti koduoti. Jei norite išmokti kurti modernią svetainę profesionaliu lygiu, turėtumėte sužinoti mūsų interaktyvų interneto dizaino „bootcamp“.