Kaj je TypeScript? Vodnik za začetnike po nadgradnji JavaScript
TypeScript ima številne ključne funkcije, ki bistveno izboljšujejo razvoj spletnih aplikacij. Ta TypeScript tutorial vam ponuja uvod v programski jezik in pojasnjuje nekatere njegove najpomembnejše funkcije in uporabe ter njegove prednosti in slabosti.
Kaj je TypeScript?
TypeScript je razvil Microsoft in temelji na programskem jeziku JavaScript, ki se pogosto uporablja pri razvoju spletnih strani. Ena od značilnosti TypeScript, ki izstopa, je statično tipiziranje. Za razliko od JavaScript, ki ima dinamično tipiziranje, TypeScript omogoča deklaracijo podatkovnih tipov za spremenljivke, funkcije in parametre. To omogoča zgodnje odkrivanje napak v kodi, kar omogoča identifikacijo napak še pred izvedbo kode. Statično tipiziranje ne le znatno izboljša kakovost kode, ampak tudi njeno berljivost.
Sintaksa TypeScript je skoraj identična sintaksi JavaScript, kar olajša njegovo vključevanje v obstoječe projekte JavaScript. TypeScript je dejansko nadgradnja JavaScript, kar pomeni, da je vsak pravilni JavaScript koda tudi veljavna TypeScript koda. To vam omogoča postopno prehod na TypeScript in izkoriščanje prednosti statičnega tipiziranja in drugih funkcij, ne da bi morali popolnoma prepisati obstoječo kodno bazo.
Tukaj je preprost primer JavaScript:
function greet(name) {
return "Hello, " + name;
}
console.log(greet(123)); // Output: "Hello, 123"V zgornjem kodu funkcija greet ni omejena na določen podatkovni tip za parameter name. To pomeni, da bo funkcija delovala tudi, če kot argument prenesemo število.
V TypeScriptu lahko koda izgleda takole:
function greet(name: string): string {
return "Hello, " + name;
}
console.log(greet(123)); // Error in TypeScriptTukaj smo parameter name deklarirali kot niz. Če poskušamo uporabiti funkcijo s številko, bo TypeScript prikazal napako, ker se prenesen tip podatkov ne ujema s pričakovanim tipom podatkov.
Ta primer kaže, kako TypeScript pomaga zgodaj odkriti napake in izboljšati kakovost kode, saj preprečuje napačno uporabo podatkovnih tipov. Pomembno je omeniti, da se TypeScript na koncu prevede v JavaScript, kar omogoča njegovo izvajanje v katerem koli JavaScript okolju. To pa pomeni, da lahko prednosti varnosti tipov izkoristite le v razvojni fazi.
Za kaj se uporablja TypeScript?
TypeScript je nepogrešljiv za različne področja razvoja programske opreme, zlasti v situacijah, kjer sta varnost tipov in kakovost kode ključnega pomena.
Pomemben primer uporabe TypeScript je razvoj spletnih strani. TypeScript zagotavlja, da je koda JavaScript napisana na način, ki jo naredi varnejšo in lažjo za vzdrževanje. To je koristno pri obsežnih frontend projektih s kompleksnimi kodnimi bazami. Vendar pa se TypeScript lahko implementira tudi na strežniški strani (backend) v aplikacijah Node.js, da se zagotovi dodatna raven varnosti. V arhitekturah brez strežnikov, kot sta AWS Lambda in Azure Functions, TypeScript pomaga zmanjšati napake in zagotoviti zanesljivo izvajanje.
Razvoj za več platform je še eno področje, na katerem TypeScript pokaže svoje prednosti. Z njim je mogoče znatno optimizirati razvoj aplikacij za več platform in mobilnih aplikacij. Okviri, kot sta NativeScript in React Native, ponujajo podporo za TypeScript pri programiranju mobilnih aplikacij za različne platforme. Pri razvoju iger se TypeScript uporablja v projektih, ki uporabljajo WebGL ali igralne motorje, kot sta Phaser ali Babylon.js. Varnost tipov TypeScript pomaga izboljšati kakovost in vzdrževanje iger.
TypeScript se uporablja tudi za projekte vizualizacije in analize podatkov. Knjižnice, kot je D3.js, podpirajo TypeScript in omogočajo ustvarjanje sofisticiranih nadzornih plošč in vizualizacij.
Kako namestiti TypeScript
Namestitev TypeScript je preprosta in zahteva le nekaj korakov. Če imate na računalniku Node.js, lahko TypeScript namestite z npm (Node Package Manager).
Korak 1: Prenesite Node.js
Preverite, ali imate na računalniku nameščen Node.js. Če Node.js še niste namestili, ga lahko prenesete in namestite s spletne strani.
Korak 2: Namestite TypeScript v terminalu
Odprite ukazno vrstico (npr. ukazno vrstico v sistemu Windows ali terminal v sistemu macOS ali Linux) in vnesite naslednji ukaz, da namestite TypeScript globalno:
npm install -g typescriptZ zastavico -g (globalno) se TypeScript namesti na celoten sistem, tako da ga lahko uporabljate kjerkoli.
Korak 3: Preverite nameščeno različico
Uspešnost namestitve lahko preverite z izvedbo naslednjega ukaza:
tsc -vTa ukaz prikaže, katera različica TypeScript je nameščena. Če se prikaže številka različice, pomeni, da je namestitev uspela.
Po namestitvi lahko ustvarite datoteke JavaScript tako, da ustvarite datoteke TypeScript (s končnico .ts) in jih kompilirate s kompilatorjem TypeScript tsc.
Korak 4: Ustvarite datoteko TypeScript
Ustvarite datoteko TypeScript, npr. app.ts, in vstavite svoj TypeScript kodo.
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.`);Korak 5: Kompilirajte datoteko
Zapišite datoteko TypeScript tako, da vnesete naslednji ukaz:
tsc app.tsS tem se bo app.ts kompiliral v JavaScript datoteko z imenom app.js. Nato lahko izvedete JavaScript datoteko.
Katere funkcije ima TypeScript?
Razvoj spletnih strani je v zadnjih letih znatno napredoval, TypeScript pa se je uveljavil kot izredno učinkovita alternativa JavaScriptu. V nadaljevanju smo povzeli najpomembnejše značilnosti tega jezika.
Statično tipiziranje
Statično tipiziranje je bistvena značilnost TypeScript, ki omogoča določanje podatkovnih tipov za spremenljivke, parametre, funkcije in druge elemente v kodi. Za razliko od dinamičnega tipiziranja v JavaScript, kjer se podatkovni tipi določijo med izvajanjem, se v TypeScript podatkovni tipi dodelijo med razvojem, še preden se koda izvede. Ta metoda pomaga zgodaj odkriti napake in logične težave.
function add(a: number, b: number): number {
return a + b;
}
const result = add(5, 3); // valid
const result = add(5, "3"); // Type ErrorV tem primeru smo za funkcijo add uporabili statično tipiziranje. Parametra a in b sta deklarirana kot števili (number), funkcija pa vrne vrednost tipa number. Vsak poskus uporabe te funkcije z drugačnim tipom podatkov bo povzročil, da jo bo TypeScript prepoznal kot napako.
Izbirno tipkanje
Z izbirnim tipkanjem lahko določite podatkovne tipe za določene spremenljivke in parametre, druge pa pustite brez določenega podatkovnega tipa.
function sayHello(name: string, age: any): string {
if (age) {
return `Hello, ${name}, you are ${age} years old.`;
} else {
return `Hello, ${name}.`;
}
}Funkcija sayHello je definirana s parametroma name in age. Oznaka any pomeni, da je parameter age lahko kateri koli podatkovni tip.
Funkcije ES6+
TypeScript podpira sodobne funkcije JavaScript, vključno z ES6 in novejšimi funkcijami, kot so puščice funkcije in predloge nizov.
const multiply = (a: number, b: number): number => a * b;
const greeting = (name: string) => `Hello, ${name}!`;Funkcije puščice omogočajo krajšo in bolj jedrnato sintakso.
Organizacija kode
TypeScript omogoča boljšo organizacijo kode in zagotavlja, da je koda razdeljena na ponovno uporabne dele. To je mogoče zaradi modulov in imenskih prostorov.
// Math.ts
export function add(a: number, b: number): number {
return a + b;
}
// Main.ts
import { add } from './Math';
const result = add(5, 3);Tukaj prikazujemo, kako strukturirati kodo z moduli in uporabiti import in export za organizacijo. Funkcija add je definirana znotraj ločenega modula z imenom Math.ts, nato pa uvožena in integrirana v drug modul, Main.ts.
Objektno usmerjeno programiranje (OOP)
TypeScript olajšuje objektno usmerjeno programiranje s pomočjo razredov, vmesnikov in dedovanja TypeScript:
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();Ta primer prikazuje uporabo razredov in objektno usmerjenega programiranja (OOP) v TypeScriptu. Razred Person ima lastnosti name, age in metodo greet, ki se uporablja za predstavitev osebe in zagotavljanje informacij o njej.
Razširjen tip sistem
Tipski sistem TypeScript je prilagodljiv in obsežen. Lahko ustvarite uporabniško definirane tipe in vmesnike ter celo razširite obstoječe tipe.
interface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Labrador" };Vmesnik Animal definira lastnost name, medtem ko vmesnik Dog podeduje lastnost Animal in doda dodatno lastnost breed. Objekt myDog ima značilnosti obeh vmesnikov.
Združljivost z JavaScriptom
TypeScript je združljiv z JavaScriptom, kar omogoča njegovo izvajanje v katerem koli JavaScript okolju. Ta združljivost olajšuje postopno vključevanje TypeScript v obstoječe JavaScript projekte.
// JavaScript-Code
function greet(name) {
return "Hello, " + name;
}
// TypeScript-Code
function greet(name: string): string {
return "Hello, " + name;
}Zgornja JavaScript koda (brez tipizacije) se lahko brez težav uporabi v TypeScript kodi (z tipizacijo).
Kakšne so prednosti in slabosti TypeScript?
Čeprav TypeScript ponuja številne prednosti, ima tudi nekaj slabosti. Tukaj je pregled:
Prednosti
TypeScript ima obsežen ekosistem tipskih definicij za številne JavaScript knjižnice in okvire. To omogoča enostavno in neposredno vključevanje kode tretjih oseb v projekte TypeScript. To je koristno v današnjem svetu spletnih aplikacij, ki pogosto temeljijo na več knjižnicah in okvirih.
Poleg statičnega tipiziranja TypeScript ponuja številne razvojne funkcije, vključno z vmesniki, razredi, moduli in podporo za trenutne standarde ECMAScript. Te funkcije izboljšujejo strukturo kode, olajšujejo vzdrževanje in prilagodljivost projektov ter spodbujajo produktivnost razvoja. Mnoga integrirana razvojna okolja (IDE), kot je Visual Studio Code, zagotavljajo odlično podporo za TypeScript.
Pomanjkljivosti
TypeScript zahteva nekaj časa, da se ga navadiš, še posebej za razvijalce, ki so pred tem delali samo z JavaScriptom. TypeScript kodo je treba najprej prevesti v JavaScript, preden jo je mogoče izvajati v brskalnikih ali okoljih Node.js. To ustvarja dodatni korak v razvojnem procesu.
V manjših projektih se TypeScript lahko zdi preveč zapleten, saj prednosti varnosti tipov morda niso tako očitne. Projekti TypeScript lahko zahtevajo več virov zaradi dodatnih informacij o tipih in korakov kompilacije.
Kakšne so alternative za TypeScript?
Obstajajo različni spletni programski jeziki, ki so lahko dobra alternativa za TypeScript, odvisno od specifičnih zahtev projekta in preferenc razvijalca(-ev).
- Flow: Flow je statični preverjevalnik tipov za JavaScript, ki ga je razvil Facebook. Omogoča dodajanje tipov v JavaScript kodo, ne da bi bilo treba popolnoma preiti na TypeScript. Flow je dobra izbira, če želite postopoma vključiti tipkanje v svoje JavaScript projekte.
- Dart: to je programski jezik, ki ga je razvil Google in se lahko uporablja za ustvarjanje spletnih aplikacij in mobilnih aplikacij. Ponuja varnost tipov in dobro zmogljivost. Dart se pogosto uporablja v kombinaciji z okvirom Flutter za razvoj mobilnih aplikacij.
- PureScript: PureScript je strogo tipiziran funkcionalni programski jezik, ki vključuje močno varnost tipov in čisto funkcionalni programski stil. Omogoča uvoz JavaScriptovih knjižnic.
- Elm: Elm je funkcionalni, strogo tipiziran jezik, zasnovan za razvoj spletnih aplikacij. Elm spodbuja načelo Elm Architecture in ima visoko raven varnosti tipov.
- ReasonML (BuckleScript): ta jezik je razvil Facebook in temelji na OCaml. BuckleScript je prevajalnik, ki prevaja ReasonML v JavaScript. Omogoča tudi varnost tipov in je enostaven za integracijo z React za razvoj frontenda.
V drugih člankih našega digitalnega vodnika se poglobimo v druge teme, kot so funkcije TypeScript in nizi TypeScript.
f9da1c6cf9adef7aa5114f0cfa7742bf
81f291b03b4abca1d322ac1870f1df83