Kas ir TypeScript? Sā­kot­nē­jais ceļvedis par Ja­vaScript pa­pla­ši­nā­ju­mu

TypeScript piedāvā vairākas galvenās funkcijas, kas būtiski uzlabo tīmekļa lie­to­jum­prog­ram­mu izstrādi. Šis TypeScript apmācības materiāls sniedz ievadu prog­ram­mē­ša­nas valodā un izskaidro dažas no tās sva­rī­gā­ka­jām funkcijām un lie­to­ju­miem, kā arī tās priekš­ro­cī­bas un trūkumus.

Kas ir TypeScript?

TypeScript ir iz­strā­dā­jis Microsoft, un tas balstās uz prog­ram­mē­ša­nas valodu Ja­vaScript, kas plaši tiek izmantota tīmekļa izstrādē. Viena no TypeScript iz­ci­lā­ka­jām īpašībām ir statiskā ti­pi­zā­ci­ja. Atšķirībā no Ja­vaScript, kam ir dinamiskā ti­pi­zā­ci­ja, TypeScript ļauj deklarēt datu tipus mai­nī­ga­jiem, funkcijām un pa­ra­met­riem. Tas ļauj sav­lai­cī­gi atklāt kodēšanas kļūdas, padarot iespējamu kļūdu iden­ti­fi­cē­ša­nu pat pirms koda izpildes. Statiskā ti­pi­zā­ci­ja ne tikai ie­vē­ro­ja­mi uzlabo koda kvalitāti, bet arī uzlabo koda lasāmību.

TypeScript sintakse ir gandrīz identiska Ja­vaScript sintaksei, kas ie­vē­ro­ja­mi atvieglo tās in­teg­rē­ša­nu esošajos Ja­vaScript projektos. Faktiski TypeScript ir Ja­vaScript pa­pla­ši­nā­jums, kas nozīmē, ka jebkurš pareizs Ja­vaScript kods ir arī derīgs TypeScript kods. Tas ļauj pa­kā­pe­nis­ki pāriet uz TypeScript un izmantot statiskās ti­pi­zā­ci­jas un citu funkciju priekš­ro­cī­bas, ne­iz­mai­not esošo kodu.

Šeit ir vienkāršs Ja­vaScript piemērs:

function greet(name) {
    return "Hello, " + name;
}
console.log(greet(123)); // Output: "Hello, 123"

Ie­priek­šē­jā kodā funkcija greet nav ie­ro­be­žo­ta ar konkrētu datu tipu pa­ra­met­ram name. Tas nozīmē, ka funkcija joprojām darbosies, pat ja kā argumentu nodosim skaitli.

TypeScript valodā kods var iz­ska­tī­ties šādi:

function greet(name: string): string {
    return "Hello, " + name;
}
console.log(greet(123)); // Error in TypeScript

Šeit mēs esam dek­la­rē­ju­ši parametru name kā virkni. Ja mēs mēģināsim izmantot funkciju ar skaitli, TypeScript parādīs kļūdu, jo nodotais datu tips neatbilst sa­gai­dā­ma­jam datu tipam.

Šis piemērs parāda, kā TypeScript palīdz sav­lai­cī­gi atklāt kļūdas, uzlabojot koda kvalitāti, novēršot nepareizu datu tipu iz­man­to­ša­nu. Ir svarīgi atzīmēt, ka TypeScript galu galā tiek kompilēts uz Ja­vaScript, tādējādi to var izpildīt jebkurā Ja­vaScript vidē. Tas nozīmē, ka tipa drošības priekš­ro­cī­bas var izmantot tikai izstrādes fāzē.

Kādam nolūkam tiek izmantots TypeScript?

TypeScript ir būtisks dažādās prog­ram­ma­tū­ras izstrādes jomās, jo īpaši si­tuā­ci­jās, kad tipa drošība un koda kvalitāte ir ļoti svarīga.

TypeScript iz­man­to­ša­na ir īpaši izplatīta tīmekļa izstrādē. Šajā gadījumā TypeScript nodrošina, ka Ja­vaScript kods tiek rakstīts tā, lai tas būtu drošāks un vieglāk uzturams. Tas ir izdevīgi plašos frontend projektos ar sarežģītu kodebāzi. Tomēr TypeScript var tikt īstenots arī servera pusē (backend) Node.js lie­to­jum­prog­ram­mās, lai no­dro­ši­nā­tu papildu drošības slāni. Ser­ver­less ar­hi­tek­tū­rās, piemēram, AWS Lambda un Azure Functions, TypeScript palīdz samazināt kļūdas un nodrošina uzticamu izpildi.

Daudz­plat­for­mu attīstība ir vēl viena joma, kurā TypeScript parāda savas stiprās puses. Tas var ie­vē­ro­ja­mi optimizēt daudz­plat­for­mu lie­to­jum­prog­ram­mu un mobilo lie­to­jum­prog­ram­mu attīstību. Tādi satvari kā Na­ti­veScript un React Native piedāvā atbalstu TypeScript, ja runa ir par mobilo lie­to­jum­prog­ram­mu prog­ram­mē­ša­nu dažādām plat­for­mām. Spēļu attīstībā TypeScript tiek izmantots projektos, kuros tiek izmantots WebGL vai spēļu dzinēji, piemēram, Phaser vai Babylon.js. TypeScript tipa drošība palīdz uzlabot spēļu kvalitāti un uz­tu­ra­mī­bu.

TypeScript tiek izmantots arī datu vi­zua­li­zā­ci­jas un analīzes projektos. Bib­lio­tē­kas, piemēram, D3.js, nodrošina atbalstu TypeScript un ļauj izveidot sa­rež­ģī­tas vadības paneles un vi­zua­li­zā­ci­jas.

Kā instalēt TypeScript

TypeScript in­sta­lē­ša­na ir vienkārša un prasa tikai dažus soļus. Ja jūsu datorā ir Node.js, varat instalēt TypeScript ar npm (Node Package Manager).

1. solis: Le­ju­pie­lā­dē­jiet Node.js

Pār­bau­diet, vai jūsu datorā ir instalēts Node.js. Ja vēl neesat in­sta­lē­jis Node.js, to varat le­ju­pie­lā­dēt un instalēt no oficiālās tīmekļa vietnes.

2. solis: in­sta­lē­jiet TypeScript terminālī

Atveriet komandu uzvedni (piemēram, Command Prompt Windows ope­rē­tājsis­tē­mā vai termināli macOS vai Linux ope­rē­tājsis­tē­mā) un ievadiet šādu komandu, lai instalētu TypeScript globāli:

npm install -g typescript

-g (globālais) karodziņš instalē TypeScript visā sistēmā, lai jūs varētu to izmantot no jebkuras vietas.

3. solis: Pār­bau­diet instalēto versiju

Jūs varat pārbaudīt, vai in­sta­lā­ci­ja ir veiksmīga, izpildot šādu komandu:

tsc -v

Šī komanda parāda, kura TypeScript versija ir instalēta. Ja tiek parādīts versijas numurs, tas nozīmē, ka in­sta­lē­ša­na ir veiksmīgi pabeigta.

Pēc in­sta­lē­ša­nas varat ģenerēt Ja­vaScript failus, iz­vei­do­jot TypeScript failus (ar pa­pla­ši­nā­ju­mu .ts) un kom­pi­lē­jot tos ar TypeScript kom­pi­la­to­ru tsc.

4. solis: Iz­vei­do­jiet TypeScript failu

Iz­vei­do­jiet TypeScript failu, piemēram, app.ts, un ie­vie­to­jiet tajā savu TypeScript kodu.

type Person = { name: string, age: number };
const alice: Person = { name: "Alice", age: 30 };
console.log(`Hello, I am ${alice.name} and I am ${alice.age} years old.`);

5. solis: Kom­pi­lē­jiet failu

Kom­pi­lē­jiet TypeScript failu, ievadot šādu komandu:

tsc app.ts

Tādējādi app.ts tiks kompilēts Ja­vaScript failā ar nosaukumu app.js. Pēc tam varat izpildīt Ja­vaScript failu.

Kādas funkcijas ir TypeScript?

Pēdējos gados tīmekļa izstrāde ir pie­dzī­vo­ju­si ie­vē­ro­ja­mu attīstību, un TypeScript ir kļuvis par ļoti efektīvu al­ter­na­tī­vu Ja­vaScript. Tur­pi­nā­ju­mā esam ap­ko­po­ju­ši šīs valodas sva­rī­gā­kās funkcijas.

Statiskā ti­pi­zā­ci­ja

Statiskā ti­pi­zā­ci­ja ir būtiska TypeScript funkcija, kas ļauj norādīt datu tipus mai­nī­ga­jiem, pa­ra­met­riem, funkcijām un citiem ele­men­tiem kodā. Atšķirībā no di­na­mis­kās ti­pi­zā­ci­jas Ja­vaScript, kur datu tipi tiek noteikti izpildes laikā, TypeScript datu tipi tiek piešķirti izstrādes laikā, pirms kods tiek izpildīts. Šī metode palīdz sav­lai­cī­gi iden­ti­fi­cēt kļūdas un loģiskas problēmas.

function add(a: number, b: number): number {
    return a + b;
}
const result = add(5, 3); // valid
const result = add(5, "3"); // Type Error

Šajā piemērā mēs iz­man­to­jām statisko ti­pi­zā­ci­ju add funkcijai. Abi parametri a un b ir deklarēti kā skaitļi (number), un funkcija atgriež vērtību tipa number. Jebkura mē­ģi­nā­ju­ma izmantot šo funkciju ar citu datu tipu rezultātā TypeScript to iden­ti­fi­cēs kā kļūdu.

Izvēles rak­stī­ša­na

Iz­man­to­jot fa­kul­ta­tī­vo ti­pi­zā­ci­ju, jums ir iespēja noteikt datu tipus kon­krē­tiem mai­nī­ga­jiem un pa­ra­met­riem, bet citiem atstāt ne­no­teik­tu datu tipu.

function sayHello(name: string, age: any): string {
    if (age) {
        return `Hello, ${name}, you are ${age} years old.`;
    } else {
        return `Hello, ${name}.`;
    }
}

sayHello funkcija ir definēta ar pa­ra­met­riem name un age. Ap­zī­mē­jums any norāda, ka age parametrs var būt jebkura datu tipa.

ES6+ funkcijas

TypeScript atbalsta modernās Ja­vaScript funkcijas, tostarp ES6 un jaunākas funkcijas, piemēram, bultu funkcijas un veidņu virknes.

const multiply = (a: number, b: number): number => a * b;
const greeting = (name: string) => `Hello, ${name}!`;

Bultu funkcijas nodrošina īsāku un kon­krē­tā­ku sintaksi.

Koda or­ga­ni­zā­ci­ja

TypeScript nodrošina labāku koda or­ga­ni­zā­ci­ju un garantē, ka kods tiek sadalīts atkārtoti iz­man­to­ja­mās daļās. To nodrošina moduļi un vārdu telpas.

// Math.ts
export function add(a: number, b: number): number {
    return a + b;
}
// Main.ts
import { add } from './Math';
const result = add(5, 3);

Šeit mēs parādām, kā struk­tu­rēt kodu ar moduļiem un izmantot import un export or­ga­ni­zā­ci­jai. Funkcija add ir definēta atsevišķā modulī ar nosaukumu Math.ts, pēc tam importēta un integrēta citā modulī, Main.ts.

Ob­jek­to­rien­tē­tā prog­ram­mē­ša­na (OOP)

TypeScript atvieglo ob­jek­to­rien­tē­tu prog­ram­mē­ša­nu, iz­man­to­jot TypeScript klases, saskarnes un pār­man­to­ša­nu:

class Person {
    constructor(public name: string, public age: number) {}
    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}
const person = new Person("Alice", 30);
person.greet();

Šis piemērs parāda klašu un ob­jek­to­rien­tē­tās prog­ram­mē­ša­nas (OOP) iz­man­to­ša­nu TypeScript. Klasei Person ir īpašības name, age un metode greet, kas tiek izmantota, lai ie­pa­zīs­ti­nā­tu ar personu un sniegtu in­for­mā­ci­ju par to.

Pa­pla­ši­nā­ta tipa sistēma

TypeScript tipu sistēma ir elastīga un plaša. Jūs varat izveidot lietotāja definētus tipus un saskarnes, kā arī pa­pla­ši­nāt esošos tipus.

interface Animal {
    name: string;
}
 
interface Dog extends Animal {
    breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Labrador" };

Saskarnes Animal definē īpašību name, savukārt saskarnes Dog pārmanto no Animal un pievieno papildu īpašību breed. Objektam myDog ir abu saskarņu īpašības.

Saderība ar Ja­vaScript

TypeScript ir saderīgs ar Ja­vaScript, kas ļauj to izmantot jebkurā Ja­vaScript vidē. Šī saderība atvieglo TypeScript pa­kā­pe­nis­ku in­teg­rā­ci­ju esošajos Ja­vaScript projektos.

// JavaScript-Code
function greet(name) {
    return "Hello, " + name;
}
// TypeScript-Code
function greet(name: string): string {
    return "Hello, " + name;
}

Iepriekš minēto Ja­vaScript kodu (bez ti­pi­zā­ci­jas) var bez problēmām izmantot TypeScript kodā (ar ti­pi­zā­ci­ju).

Kādas ir TypeScript priekš­ro­cī­bas un trūkumi?

Lai gan TypeScript piedāvā virkni priekš­ro­cī­bu, tam ir arī daži trūkumi. Šeit ir to pārskats:

Priekš­ro­cī­bas

TypeScript piedāvā plašu tipu de­fi­nī­ci­ju eko­sis­tē­mu daudzām Ja­vaScript bib­lio­tē­kām un ietvariem. Tas padara trešo pušu koda in­teg­rē­ša­nu TypeScript projektos vienkāršu un ne­pār­pro­ta­mu. Tas ir noderīgi mūsdienu tīmekļa lie­to­jum­prog­ram­mās, kas bieži vien balstās uz vairākām bib­lio­tē­kām un ietvariem.

Papildus sta­tis­ka­jai ti­pi­zā­ci­jai TypeScript piedāvā daudz­vei­dī­gas at­tīs­tī­bas funkcijas, tostarp saskarnes, klases, moduļus un atbalstu pa­šrei­zē­jiem ECMAScript stan­dar­tiem. Šīs funkcijas uzlabo koda struk­tu­rē­ša­nu, atvieglo projektu uz­tu­rē­ša­nu un mē­ro­go­ja­mī­bu, kā arī veicina at­tīs­tī­bas pro­duk­ti­vi­tā­ti. Daudzas in­teg­rē­tas at­tīs­tī­bas vides (IDE), piemēram, Visual Studio Code, nodrošina lielisku atbalstu TypeScript.

Trūkumi

TypeScript ir ne­pie­cie­šams laiks, lai pierastu, īpaši at­tīs­tī­tā­jiem, kuri pirms tā iz­man­to­ša­nas ir strā­dā­ju­ši tikai ar Ja­vaScript. TypeScript kods ir jākompilē Ja­vaScript, pirms to var izpildīt pār­lūkprog­ram­mās vai Node.js vidēs. Tas rada papildu soli at­tīs­tī­bas procesā.

Mazākiem pro­jek­tiem TypeScript var šķist pārāk sarežģīts, jo tipa drošības priekš­ro­cī­bas var nebūt tik acīm­re­dza­mas. TypeScript pro­jek­tiem var būt ne­pie­cie­ša­mi lielāki resursi, jo ir ne­pie­cie­ša­ma papildu in­for­mā­ci­ja par tipiem un kom­pi­lā­ci­jas soļi.

Kādas ir TypeScript al­ter­na­tī­vas?

Ir dažādas tīmekļa prog­ram­mē­ša­nas valodas, kas var būt laba al­ter­na­tī­va TypeScript, atkarībā no projekta spe­ci­fis­ka­jām prasībām un iz­strā­dā­tā­ju pre­fe­ren­cēm.

• Flow: Flow ir statiska tipa pār­bau­dī­tājs Ja­vaScript, ko iz­strā­dā­jis Facebook. Tas ļauj pievienot tipus Ja­vaScript kodam, ne­iz­man­to­jot pilnīgu pāreju uz TypeScript. Flow ir laba izvēle, ja vēlaties pa­kā­pe­nis­ki integrēt ti­pi­zā­ci­ju savos Ja­vaScript projektos.
• Dart: tā ir Google iz­strā­dā­ta prog­ram­mē­ša­nas valoda, ko var izmantot, lai izveidotu tīmekļa lie­to­jum­prog­ram­mas un mobilās lie­to­jum­prog­ram­mas. Tā nodrošina tipa drošību un labu veikt­spē­ju. Dart bieži izmanto kopā ar Flutter framework mobilās lie­to­jum­prog­ram­mas izstrādei.
• Pu­reScript: Pu­reScript ir stingri tipizēta fun­kcio­nā­lā prog­ram­mē­ša­nas valoda, kas ietver stingru tipu drošību un tīri fun­kcio­nā­lu prog­ram­mē­ša­nas stilu. Tā ļauj importēt Ja­vaScript bib­lio­tē­kas.
• Elm: Elm ir fun­kcio­nā­la, stingri tipizēta valoda, kas iz­strā­dā­ta tīmekļa lie­to­jum­prog­ram­mu izstrādei. Elm veicina Elm ar­hi­tek­tū­ras principu un nodrošina augstu tipa drošības līmeni.
• ReasonML (BuckleScript): šo valodu iz­strā­dā­ja Facebook, un tā ir balstīta uz OCaml. BuckleScript ir kom­pi­la­tors, kas kompilē ReasonML uz Ja­vaScript. Tas nodrošina arī tipa drošību un ir viegli in­teg­rē­jams ar React frontend izstrādei.