Fillimi me Typescript

Fillimi me Typescript

JavaScript është tani një nga gjuhët më të përdorura të programimit sot falë jo vetëm fleksibilitetit të saj, por edhe rezultatit të bumit të internetit.

Ne aksesojmë internetin duke përdorur shfletues uebi dhe JavaScript vjen i paketuar me shfletuesin tuaj të internetit. Në një moment, ju do të ndërveproni me JavaScript ose si përdorues fundor ose si zhvillues, pavarësisht nëse është në smartfonin tuaj, ose televizorin tuaj inteligjent, në thelb, çdo gjë që në një moment do të flasë me internetin.

"PSE" pas shkrimit të shkrimit

Javascript nuk është i përsosur edhe pse, në fakt, mund të jetë mjaft zhgënjyese të punosh me të, veçanërisht në projektet e ndërmarrjeve të mëdha. Javascript është ajo që ne e quajmë gjuhë e shtypur në mënyrë dinamike. Kjo do të thotë se javascript do të përpiqet t'ju ndihmojë edhe kur nuk e keni kërkuar.

Le të shohim një shembull:

let numberOne = 1;
let stringOne = "One"
let sum = numberOne + stringOne;
console.log(sum)
// Output
// 1One

Intuita do t'ju tregojë se ky operacion nuk duhet të jetë i mundur. Si mund të shtojmë një numër në një varg? Por JavaScript do ta shikojë atë dhe do të thotë "Hej njeri, unë mund t'ju ndihmoj me këtë", pastaj vazhdoni të ndryshoni vlerën e numrit tuaj në një varg.

Ndërsa ka disa përfitime nga kjo lloj sjelljeje, ajo më shpesh shkakton më shumë dëm sesa mirë. JavaScript nuk do të ankohet për këtë sjellje derisa të jetë e nevojshme.

Si një zhvillues JavaScript, me siguri e keni hasur më parë këtë sjellje. Për shembull, ne po kalojmë llojin e gabuar të të dhënave si parametër në një funksion.

const squareMe = (number) =>{
  return number * number;
}
// Let's call the function but pass in a string instead of a number
console.log(squareMe("five"))
// Output
// NaN

Llojet më të zakonshme të gabimeve që shkruajnë programuesit janë gabimet e tipit, ku është përdorur lloji i gabuar i vlerës.

A nuk do të ishte mirë nëse do të mund të përcaktonim me saktësi se si do të ekzekutohej kodi ynë pa pasur nevojë të shqetësoheshim se Javascript do të luante gjyqtarin, jurinë dhe ekzekutuesin?

Skript i shkrimit për shpëtim

Deri në këtë pikë, ne kemi shkruar kod dinamik. Kjo quhet shtypje dinamike, ku gjuha mund të vendosë të plotësojë boshllëqet kur duhet.
Typescript na ofron një rrugëdalje. Më tepër një mënyrë për të kufizuar natyrën dinamike të JavaScript duke na lejuar të përdorim shtypje statike në vend të kësaj.

Shtypja statike, me pak fjalë, është e kundërta e shtypjes dinamike. Në vend që të jemi sa më të paqartë kur shkruajmë kodin tonë, ne përpiqemi të jemi sa më të qartë të jetë e mundur. Le të deklarojmë një palë variablash duke përdorur shkrimin e shkrimit.

let numberOne:string = "One";
let numberTwo:number = 2;

Kjo është ajo që na lejon të bëjmë shkrimin e shtypit. Ne po deklarojmë në mënyrë eksplicite llojet e të dhënave që mund të mbajnë variablat tanë. Nëse përpiqemi të ricaktojmë variablat me vlera që nuk përputhen me llojet e të dhënave të specifikuara, përpiluesi i shkrimit të shkrimit do të ankohet.

numberOne = 1; // Error: type "string" is not assignable to number
numberTwo ="2"; // Error: type "number" is not assignable to string

Do të merrni reagime të menjëhershme nga shkrimi i shkrimit direkt në redaktuesin tuaj të kodit. Ky funksion i kontrollit të tipit është ai që ka bërë që shkrimi i shkrimit të jetë një nga gjuhët më të pëlqyera vitet e fundit.

Grafiku më poshtë është Raporti Vjetor i Zhvilluesve të Stack Overflows 2022 për gjuhët më të dashura të programimit.

Pra, Typescript, me pak fjalë, është ende JavaScript, por një JavaScript i shtypur statikisht ose i shtypur fort. Çfarë do të thotë kjo është se kodi juaj JavaScript ende kualifikohet si kod TypeScript.

Tani le të fillojmë të shikojmë disa nga veçoritë që janë të disponueshme për ne kur përdorim shkrimin e shkrimit duke filluar me tsc.

tsc

TSC do të thotë përpilues i shkrimit të shkrimit. Përpiluesi i shkrimit të shkrimit është truri prapa shkrimit të shkrimit. Na jep një bollëk opsionesh për të zgjedhur kur bëhet fjalë për opsionet e konfigurimit.

Megjithatë, përpara se të mund të ndërveprojmë me shkrimin e shkrimit, së pari duhet ta instalojmë atë në makinat tona.

npm i typescript -g

or

yarn add typescript

Konfirmoni që e keni të instaluar duke ekzekutuar 'tsc -v' në terminalin tuaj.

tsc -v 
Version 4.7.4

Për të inicializuar një skedar të konfigurimit të shkrimit të shkrimit, ekzekutoni komandën e mëposhtme në dritaren e terminalit tuaj.

tsc --init

Kjo do të gjenerojë një skedar konfigurimi për ju që përpiluesi i shkrimit të shkrimit do ta përdorë më pas për të ekzekutuar kodin tuaj të shkrimit të shkrimit.

Opsionet e zakonshme të konfigurimit
Ka shumë opsione për të zgjedhur, por ne nuk do të zhytemi në detajet e kuptimit të tyre. Sidoqoftë, ne do të shikojmë opsionet e zakonshme të konfigurimit me të cilat do të ndërveproni më shpesh.

noImplicitAny
Ky opsion konfigurimi siguron që llojet të mos konkludohen. Kjo ka avantazhin e shtuar për të siguruar që ne gjithmonë të kalojmë në llojet e duhura gjatë ekzekutimit të programit tonë. Si parazgjedhje, tsc do të zbulojë llojin çdo për variablat tuaja. Kjo është e njëjta sjellje që ju jep vanilla javascript.
Me opsionin noImplicitAny të aktivizuar, variablat e konkluduar me llojin çdo do të lëshojnë një gabim.

strictNullChecks
Ky opsion na lejon të trajtojmë në mënyrë më elegante operacionet që kthejnë null ose të papërcaktuar. Ne të gjithë në një moment ose në një tjetër kemi harruar se një funksion i veçantë nuk kthen asgjë dhe jemi përpjekur t'i operojmë ato.

objektivi
Ky opsion i referohet versionit që do të emetojë shkrimi i shkrimit pas transpilimit të kodit tuaj në Vanilla JavaScript. Mos harroni se shfletuesi juaj nuk e kupton Typescript dhe kjo është arsyeja pse ne duhet të specifikojmë versionin e synuar të javascript.

modul
Specifikoni sistemin e modulit JS që dëshironi të përdorni. P.sh. CommonJS, AMD, ES2016, EXNext, e kështu me radhë.

strikt
Opsioni i rreptë specifikon se sa i rreptë duhet të jetë tsc kur bëhet fjalë për kontrollin e tipit. Si praktikë e mirë, duhet ta keni gjithmonë të aktivizuar këtë opsion.

Bazat
`tsc` është përgjegjës për kontrollimin e kodit tuaj përpara se të ekzekutohet. Le të shohim një shembull të kodit të vlefshëm JavaScript, që nuk duhet të funksionojë intuitivisht, por funksionon.

function shineMyName(firstName){
   console.log(`This little ${firstName} of mine, I'm gonna let it shine..`)
console.log(shineMyName())
// Output
// This little undefined of mine, I'm gonna let it shine.

Kjo nuk duket e drejtë, apo jo? Ne harruam të kalonim parametrin firstName në funksionin tonë, por ne ishim ende në gjendje të ekzekutonim kodin tonë.

Nëse përpiqeni të ekzekutoni të njëjtin kod në shkrimin e shkrimit, do të merrni reagime të menjëhershme nga tsc duke u ankuar se nuk i keni kaluar të gjithë parametrat.

function shineMyName(firstName){
   console.log(`This little ${firstName} of mine, I'm gonna let it shine..`)
}
console.log(shineMyName())
// Expected 1 argument  but got 0 ts(2554)
// An argument for firstName was not provided

Le të shtojmë më shumë aftësi të kontrollit të tipit duke përcaktuar në mënyrë eksplicite llojet e të dhënave.

function shineMyName(firstName:string){
   console.log(`This little ${firstName} of mine, I'm gonna let it shine..`)
}
console.log(shineMyName("Bob"))

Kjo referohet si *notating tip*. Le të shohim disa shembuj të tjerë të shënimit të tipit.

let lastName: string = "Marley";
let age:number = 45;

Kjo metodë e shënimit quhet *shtypje eksplicite* ku ne përcaktojmë në mënyrë eksplicite llojin e vlerës.

Shkrimi i shkrimit gjithashtu mund të konkludojë llojet. Kjo quhet konkluzion i tipit

let lastName = "Marley"; // string 
let age = 45; // Number

💡Kur nuk shënoni në mënyrë eksplicite llojet, shkrimi i shkrimit do të konstatojë llojet për ju. Kjo quhet shënim i nënkuptuar.

Llojet primitive në Typescript

• String
• numri
• bulian
• nul
• të papërcaktuar
• i pavlefshëm
• kurrë
• ndonjë
• simbol
• i madh

let firstName: string = "Mark";
let age:number = 30;
let isCool:boolean = true;
let bigNum:bigint = 100n;
let weDintKnow:any = "I don't know";
let maybeWeknow:unknown = "I might know";
let notDefined:undefined = undefined;
let nulling:null = null;
let never:never;
let symbol:symbol = Symbol("symbol");
let voided:void = undefined;

Përcaktimi i llojeve në Typescript

Vargjeve

Për të specifikuar një grup në shkrimin e shkrimit, ne përdorim sintaksën `type[]`. Ju filloni duke përcaktuar llojet e të dhënave që do të përfshijë grupi i ndjekur nga një palë kllapa katrore.

let lyrics: string[] = ["Hey", "I", "Just", "Met", "you", "and", "this","is","crazy","but","here's","my","number","so","call","me","maybe"]

Së pari përcaktojmë llojet e vlerave që duhet të ruhen në grupin tonë. Në shembullin tonë, ne mund të kemi vetëm vargje në grupin tonë.

Tuples
Një tuple i ngjan një grupi, por me disa ndryshime:
- Gjatësia e tuples është fikse
- Tupleja mund të ketë një përzierje të llojeve të të dhënave

let rgb:[number,number,string] = [239,120,"200"]

Funksionet
Ju do të dëshironi të kontrolloni llojin e vlerave që kalohen në funksionet tona dhe të përcaktoni llojin e vlerës që funksioni duhet të kthejë.
Ne mund ta bëjmë këtë duke shënuar argumentet tona si dhe duke përcaktuar llojin e vlerës që do të kthehet.

function lyricsMatch(lyrics:string[]):string{
    return lyrics.join(' ');
  }
console.log(lyricsMatch(["Hey", "I", "Just", "Met", "you", "and", "this","is","crazy","but","here's","my","number","so","call","me","maybe"]))
// Hey I just met you, and this is crazy but here's my number, so call me maybe

Ne po i themi në mënyrë eksplicite shkrimit të shtypit, se funksioni ynë do të marrë një argument të vetëm që duhet të jetë një grup vargjesh. Ne po tregojmë gjithashtu se vlera jonë e kthimit do të jetë gjithashtu një varg.

Nëse përpiqemi të kalojmë në një parametër që nuk është një grup vargjesh, përpiluesi i shkrimit të shkrimit do të hedhë një gabim.

lyricsMatch("I'm never gonna dance again")
// Argument of type string is not assignable to string[]

Llojet e bashkimit
Një lloj bashkimi është një kombinim i një ose më shumë llojeve. Le të shohim një shembull.

function returnAge(age:string|number){
  return age;
}
console.log(returnAge(20))
console.log(returnAge("20"))
// The age argument can either be number or string type
// Both calls to `returnAge` will execute successfully.

Diçka që duhet mbajtur parasysh është se kur përdorni unionet, nuk mund të përdorni metoda që janë të disponueshme vetëm për një nga llojet e të dhënave.

Për shembull, ne nuk mund të bëjmë diçka të tillë si age.toUpperCase().
Nëse parametri që kaluam do të ishte një numër, nuk do të funksiononte . Për ta shmangur këtë, ne përdorim ngushtimin.

function returnAge(age:string|number){
  if(typeof age === "string"){
    return age.toUpperCase()
  }
  return age;
}

Ngushtimi thjesht do të thotë se ne përpiqemi të nxjerrim llojin e të dhënave që është transmetuar. Nëse është i tipit string, atëherë ne e dimë se mund të përdorim metodën toUpperCase() në të.

Shkruani pseudonimet

Le të përcaktojmë formën e një objekti

{
  name:string,
  material:string,
  status?:boolean
}

Tani le të supozojmë se duam të vazhdojmë ta ripërdorim këtë formë në të gjithë bazën tonë të kodit. Ne mund ta ruajmë këtë projekt duke përdorur pseudonimet e tipit.

type glassJar = {
  name:string,
  material:string,
  status?:boolean
 }

Tani ne mund ta ripërdorim këtë formë objekti kudo në bazën tonë të kodit pa pasur nevojë të vazhdojmë të rishkruajmë vetë formën.

const jarOne: glassJar = {
  name:"Mikes Jar",
  material:"glass",
}

Ju mund të përdorni pseudonimet e tipit për të përcaktuar çdo lloj strukture të dhënash dhe jo vetëm objekte.

type ID = number | string;
type userIDs = string[] | number[];

Ndërfaqet

Një ndërfaqe është një sintaksë alternative që mund ta përdorim për të krijuar objekte.

interface glassJar:{
  name:string,
  material:string,
  status?:boolean
 }
const jarOne: glassJar = {
  name:"Mikes Jar",
  material:"glass",
}

Llojet e fjalëpërfjalshme

Për të shpjeguar literalet e tipit, duhet të mendojmë për let, var dhe const dhe se si shkrimi i shtypit i interpreton këto vlera.

Ne e dimë se përdorimi i let dhevar na lejon të ndryshojmë vlerat në një kohë të mëvonshme.

let buzz = "Buzz Light Year";
 var woody = "woody";
// How typescript represents this: 
// let woody:string
// let buzz:string`

Ne po i themi kompajlerit se duam që vlerat e paraqitura nga dy variablat të jenë çdo vlerë vargu.

Por çfarë ndodh me deklarimin e llojeve me const? Këto janë vlera që ne nuk planifikojmë t'i ndryshojmë kurrë.

const peterParker = "Spidey";
// How typescript represents this:
// const peterParker:"spidey"

Për shkak se ne mund të përfaqësojmë vetëm një vlerë të vetme të vargut, ndryshores i caktohet lloji "spidey".

Përfundim

Avantazhi më i madh i përdorimit të shkrimit të shkrimit është aftësia për të kapur gabime të lidhura me tipin në kohën e përpilimit. 🔥

Unë e gërvishta sipërfaqen vetëm për sa i përket asaj që mund të bëjë shkrimi i shkrimit, por shpresojmë se ky postim në blog mund t'ju shtyjë ta miratoni nëse nuk e keni bërë tashmë. Është një mjet i shkëlqyeshëm që do të rrisë cilësinë e kodit që shkruani.

Faleminderit për leximin dhe kodimin e lumtur. 👋