TypeScript

JavaScript me tipe: gabimet i kap editori ndërsa shkruan, jo përdoruesi në shfletues. Gjuha më e përdorur në GitHub sot. · 102 terma

@ts-expect-error & @ts-ignore

Komentet // @ts-ignore dhe // @ts-expect-error e heshtin gabimin e rreshtit tjetër. @ts-expect-error është më i mirë: po u rregullua gabimi më vonë, të paralajmëron që komenti s'duhet më.

@types packages (DefinitelyTyped)

Paketat @types

Për libraritë JavaScript që s'kanë tipe brenda, komuniteti i shkruan në projektin DefinitelyTyped dhe i publikon si paketa @types — p.sh. npm install -D @types/node. Pastaj editori të jep plotësim dhe kontroll edhe për to.

Abstract classes (TypeScript)

Klasat abstrakte në TypeScript

Një klasë abstract në TypeScript s'mund të krijohet direkt — shërben si bazë për klasa të tjera, dhe metodat abstract duhet t'i shkruajnë patjetër fëmijët.

any

any i thotë TypeScript-it „mos e kontrollo këtë“ — çdo gjë lejohet. Është dera e emergjencës kur kalon kod të vjetër JavaScript, por po e përdor kudo, humbet arsyen pse përdor TypeScript.

Array types (T[] & Array<T>)

Tipet e vargjeve

Një varg me numra shkruhet number[] ose Array<number> — të dyja janë e njëjta gjë. TypeScript-i të ndalon të fusësh tekst në një varg numrash.

as const

as const i thotë TypeScript-it ta trajtojë një vlerë si krejtësisht të pandryshueshme dhe me tipet më të ngushta të mundshme: ["sq", "en"] as const bëhet readonly ["sq", "en"], jo string[].

Assertion functions (asserts)

Funksionet pohuese

Një funksion pohues hedh gabim nëse kushti s'plotësohet, dhe pas thirrjes TypeScript-i di që kushti është i vërtetë: function sigurohu(x: unknown): asserts x is string.

Assignability

Përputhshmëria e tipeve

Gabimi më i zakonshëm në TypeScript është „Type X is not assignable to type Y“ — do të thotë që vlera s'i përshtatet vendit ku po e vendos. Lexoje nga fundi: shpesh tregon saktë cila fushë mungon ose është e gabuar.

Awaited<T>

Awaited<T> të jep tipin që merr pasi bën await — e „hap“ Promise-in, edhe nëse janë disa njëri brenda tjetrit.

Branded types

Tipet me markë

Meqë TypeScript-i krahason sipas formës, një IdPerdoruesi dhe një IdPorosie (të dyja string) ngatërrohen lehtë. Një „markë“ e fshehtë i bën të dallueshme, që të mos e japësh njërën në vend të tjetrës.

Classes in TypeScript

Klasat në TypeScript

TypeScript-i u shton klasave të JavaScript-it modifikuesit public, private dhe protected, klasa abstract dhe implements për interfejsa. Me „parameter properties“ e deklaron dhe e cakton një fushë direkt te konstruktori.

Conditional types

Tipet me kusht

Tipet me kusht zgjedhin një tip sipas një kushti, si ternary-ja: T extends string ? "tekst" : "tjetër". Me infer mund të „nxjerrësh“ një pjesë të një tipi — p.sh. çfarë kthen një Promise.

Declaration files (.d.ts)

Skedarët e deklarimeve

Një skedar .d.ts përmban vetëm tipe, pa kod — përshkruan si duket një librari JavaScript, që TypeScript-i ta kontrollojë kur e përdor. Shumë paketa i kanë brenda; për të tjerat ekzistojnë paketat @types.

Declaration merging

Bashkimi i deklarimeve

Po e deklarove të njëjtin interface dy herë, TypeScript-i i bashkon në një. Kështu libraritë mund t'i zgjerojnë tipet e njëra-tjetrës — p.sh. t'i shtojnë një fushë objektit Window.

declare global

Me declare global i shton tipe objekteve globale — p.sh. një fushë që e vendos vetë te window. Pa këtë, TypeScript-i ankohet që window.konfig s'ekziston.

Decorators (TypeScript)

Dekoratorët në TypeScript

Dekoratorët janë funksione me @ që vendosen mbi klasa, metoda ose fusha dhe u shtojnë sjellje — si @Component në Angular ose @Controller në NestJS. Ngjajnë me anotacionet e Java-s.

Discriminated unions

Union-et me etiketë

Një union me etiketë është një union objektesh që kanë të gjithë një fushë të përbashkët (si lloji: "rreth" | "katror"). Po e kontrollove atë fushë, TypeScript-i e di saktë cilat fusha të tjera ekzistojnë.

DOM types (HTMLElement, HTMLInputElement)

Tipet e DOM-it

TypeScript-i ka tipe për çdo element të faqes: HTMLElement, HTMLInputElement, HTMLButtonElement. querySelector("input") e di vetë që kthen HTMLInputElement | null, por me një selektor klase duhet t'ia thuash ti.

Double assertion (as unknown as T)

Pohimi i dyfishtë

Kur TypeScript-i s'të lejon një as sepse tipet s'kanë lidhje fare, disa shkruajnë x as unknown as T. Funksionon, por e fik plotësisht kontrollin — zakonisht është shenjë që diçka në tipe është gabim.

Enums (TypeScript)

enum në TypeScript

enum-et e TypeScript-it japin emra për një listë vlerash: enum Ngjyra { Kuqe, Gjelber }. Shumë ekipe sot preferojnë union-et me literal ("kuqe" | "gjelber") sepse s'shtojnë kod në JavaScript-in final.

esbuild & SWC

esbuild (shkruar në Go) dhe SWC (në Rust) e përkthejnë TypeScript-in në JavaScript dhjetëra herë më shpejt se tsc — por pa kontrolluar tipet. Prandaj Vite i përdor për shpejtësi, dhe tsc mbetet për kontrollin.

Event types (MouseEvent, KeyboardEvent)

Tipet e ngjarjeve

Çdo ngjarje ka tipin e vet: MouseEvent për klikime, KeyboardEvent për tastierën (me e.key), SubmitEvent për formularët. TypeScript-i e di vetë tipin kur përdor addEventListener("click", ...).

Excess property checks

Kontrolli i fushave të tepërta

Kur i jep një objekt të ri direkt një variable me tip, TypeScript-i ankohet nëse ka fusha që tipi s'i njeh — shpesh kjo kap gabime shtypi si „emr“ në vend të „emri“.

Exclude, Extract & NonNullable

Këto tipe ndihmëse punojnë me union-e: Exclude<T, U> heq disa opsione, Extract<T, U> mban vetëm disa, dhe NonNullable<T> heq null dhe undefined.

Exhaustiveness checking

Kontrolli i plotësisë

Me një rast default që pranon vetëm never, TypeScript-i të paralajmëron kur i shton një vlerë të re një union-i dhe harron ta trajtosh në switch.

Express with TypeScript

Express me TypeScript

Me paketën @types/express, Express-i merr tipe: Request dhe Response. Mund t'u japësh tipe edhe parametrave dhe body-t, që editori ta dijë çfarë vjen në kërkesë.

Extending interfaces

Zgjerimi i interfejsave

Një interface mund të zgjerojë një tjetër me extends dhe të shtojë fusha të reja: interface Studenti extends Personi { nrStudenti: number }. Mund të zgjerojë edhe disa njëherësh.

Function overloads (TypeScript)

Mbingarkimi i funksioneve në TypeScript

Me overload-e mund të përshkruash disa mënyra si thirret i njëjti funksion — p.sh. me tekst kthen tekst, me numër kthen numër — dhe TypeScript-i zgjedh tipin e duhur sipas argumentit.

Function types

Tipet e funksioneve

Në TypeScript mund ta përshkruash edhe vetë funksionin si tip: (a: number, b: number) => number. Shumë e dobishme për callback-e — editori e di saktë çfarë merr dhe çfarë kthen funksioni që i jep.

Generated types (OpenAPI, GraphQL)

Tipet e gjeneruara

Në vend që t'i shkruash me dorë tipet e një API-je, mjetet si openapi-typescript ose GraphQL Code Generator i krijojnë automatikisht nga dokumentacioni i API-së. Po ndryshoi serveri, i rigjeneron dhe sheh menjëherë çfarë prishet.

Generic constraints (extends)

Kufizimet e gjenerikëve

Me T extends Diçka e kufizon një gjenerik: „çfarëdo tipi, mjafton të ketë këtë“. P.sh. T extends { length: number } pranon tekste, vargje — çdo gjë me gjatësi.

Generic defaults

Vlerat e paracaktuara të gjenerikëve

Një parametër gjenerik mund të ketë tip të paracaktuar: type Pergjigja<T = unknown>. Po s'e dhe tipin, përdoret ai i paracaktuari.

Generics (TypeScript)

Gjenerikët në TypeScript

Gjenerikët të lejojnë të shkruash një funksion ose tip që punon me çdo tip, pa humbur kontrollin: function iPari<T>(v: T[]): T. Thirr me numra — kthen number; me tekst — kthen string.

import type

import type { Termi } from "./tipet" importon vetëm tipin, jo kod — dhe hiqet plotësisht kur përkthehet në JavaScript. E bën të qartë që po merr vetëm një përshkrim dhe i ndihmon bundler-at.

Index signatures

Nënshkrimet me indeks

Një index signature përshkruan objekte me çelësa që s'i di paraprakisht: { [emri: string]: number } — çdo çelës tekst, çdo vlerë numër. Shpesh Record<string, number> është mënyra më e shkurtër për të njëjtën gjë.

Indexed access types (T["key"])

Qasja me indeks në tipe

Me T["emri"] merr tipin e një fushe të caktuar të një tipi tjetër — si kur lexon një vlerë nga një objekt, por për tipe. Kështu tipet mbeten të sinkronizuara automatikisht.

infer

Brenda një tipi me kusht, infer i thotë TypeScript-it „gjeje vetë këtë pjesë“ — p.sh. çfarë tipi është brenda një Promise ose çfarë kthen një funksion.

Intersection types (A & B)

Tipet intersection

Një intersection type (A & B) i bashkon dy tipe: objekti duhet të ketë të gjitha fushat e të dyve. P.sh. Personi & Studenti ka edhe emrin, edhe numrin e studentit.

JSON.parse returns any

JSON.parse kthen any

JSON.parse() dhe response.json() kthejnë any, prandaj TypeScript-i s'kontrollon asgjë për të dhënat që vijnë nga jashtë. Ruaje rezultatin si unknown dhe kontrolloje — me një type guard ose me Zod.

keyof & typeof (types)

keyof T jep union-in e emrave të fushave të një tipi („emri“ | „mosha“). typeof në pozicion tipi e merr tipin e një variable ekzistuese. Bashkë, të lejojnë të nxjerrësh tipe nga kodi që ke tashmë.

Literal types

Tipet literal

Një tip literal lejon vetëm një vlerë të saktë — p.sh. "sq" ose 404. Bashkë me union, krijon lista të mbyllura vlerash: type Gjuha = "sq" | "en". Shkruan gabim „sk“ dhe editori të ndal.

Mapped types

Tipet e hartuara

Një mapped type krijon një tip të ri duke kaluar nëpër çdo fushë të një tipi tjetër dhe duke e ndryshuar — p.sh. duke i bërë të gjitha readonly ose opsionale. Partial dhe Readonly janë ndërtuar kështu.

Migrating JavaScript to TypeScript

Kalimi nga JavaScript në TypeScript

S'ke pse e rishkruan gjithë projektin njëherësh: me "allowJs" TypeScript-i dhe JavaScript-i jetojnë bashkë. E kthen skedarin nga .js në .ts një nga një, fillimisht pa strict, dhe e shtrëngon gradualisht.

Mixins

Një mixin është funksion që merr një klasë dhe kthen një klasë të re me aftësi shtesë. Kështu „përzien“ sjellje — p.sh. Kërcyes dhe Notues — pa trashëgimi të shumëfishtë.

Module resolution (moduleResolution)

Gjetja e moduleve

moduleResolution i tregon TypeScript-it si t'i gjejë skedarët kur shkruan import. Për projekte me Vite përdoret "bundler", për Node "nodenext". Gabimi „Cannot find module“ shpesh vjen nga ky cilësim.

Monorepo (Turborepo, workspaces)

Një monorepo mban disa projekte të lidhura — aplikacionin web, mobile, backend-in, libraritë e përbashkëta — në një repository të vetëm. Mjete si Turborepo dhe workspaces të pnpm/npm i ndërtojnë dhe testojnë bashkë.

Namespaces (TypeScript)

namespace është mënyra e vjetër e TypeScript-it për të grupuar kodin, para se JavaScript-i të kishte modulet import/export. Sot e takon kryesisht në skedarë .d.ts të vjetër; në kod të ri përdor modulet.

NestJS

NestJS është një framework për backend me TypeScript, i frymëzuar nga Angular dhe Spring: kontrollerë, shërbime dhe dependency injection me dekoratorë. I përshtatshëm për API të mëdha dhe të organizuara mirë.

never

never është tipi i vlerave që s'ndodhin kurrë — p.sh. një funksion që gjithmonë hedh gabim. Përdoret shumë për të kontrolluar që i ke trajtuar të gjitha rastet e një union-i: po harrove një, TypeScript-i ankohet.

Non-null assertion (!)

Pohimi „s'është null“

Pikëçuditja pas një vlere (perdoruesi!.emri) i thotë TypeScript-it „jam i sigurt që s'është null ose undefined“. Është i shpejtë, por po gabove, programi rrëzohet — më mirë kontrolloje me if ose ?.

noUncheckedIndexedAccess

Si parazgjedhje, TypeScript-i mendon që notat[10] është gjithmonë number — edhe nëse vargu ka vetëm 3 elemente. Me noUncheckedIndexedAccess, tipi bëhet number | undefined dhe të detyron ta kontrollosh.

Object types

Tipet e objekteve

Një objekt mund ta përshkruash direkt, pa interface: { emri: string; mosha: number }. Për forma që përdoren në shumë vende, më mirë i jep emër me type ose interface.

Optional properties (?:)

Fushat opsionale

Me pikëpyetje (telefoni?: string) e shënon një fushë ose parametër si opsional — mund të mungojë. TypeScript-i pastaj të detyron të kontrollosh nëse ekziston para se ta përdorësh.

Optional vs undefined

Fushë opsionale apo undefined

emri?: string do të thotë „fusha mund të mungojë fare“, ndërsa emri: string | undefined do të thotë „fusha duhet të jetë aty, edhe nëse vlera është undefined“. Dallimi ka rëndësi te objektet që dërgohen në API.

Path aliases (@/...)

Shkurtesat e rrugëve

Në vend të import { Butoni } from "../../../components/Butoni", me "paths" në tsconfig shkruan import { Butoni } from "@/components/Butoni". Kodi lexohet më mirë dhe s'prishet kur i lëviz skedarët.

pnpm

pnpm është alternativë e npm-it, shumë më e shpejtë dhe që zë më pak vend në disk: secila paketë ruhet një herë në kompjuter dhe ndahet mes projekteve. Shumë e përdorur në monorepo. Yarn është një tjetër alternativë.

Primitive types in TypeScript

Tipet bazë në TypeScript

TypeScript-i ka të njëjtat tipe bazë si JavaScript-i, por i shkruan qartë: string, number (s'ka int dhe float veç), boolean, bigint për numra shumë të mëdhenj, symbol, null dhe undefined.

Prisma

Prisma-ja është një ORM për Node.js dhe TypeScript: e përshkruan databazën në schema.prisma, dhe ajo krijon një klient me tipe të sakta — editori të plotëson emrat e kolonave dhe të paralajmëron për gabime. Drizzle është alternativa më e lehtë.

private vs #private

private dhe #private

TypeScript-i ka dy lloje fushash private: private (kontrollohet vetëm nga TypeScript-i, zhduket në JavaScript) dhe #emri (private e vërtetë e JavaScript-it, që s'mund të lexohet as gjatë ekzekutimit).

Project references

Referencat mes projekteve

Në projekte të mëdha, me „project references“ e ndan kodin në disa pjesë TypeScript (p.sh. shared, frontend, backend) që kontrollohen veç. tsc --build e ndërton vetëm atë që ka ndryshuar — shumë më shpejt.

Promise<T> & async types

Tipet asinkrone

Një funksion async në TypeScript kthen gjithmonë Promise<T>: async function merrTermat(): Promise<Termi[]>. Pas await, TypeScript-i e di që ke një Termi[] të vërtetë, me të gjitha fushat.

React with TypeScript

React me TypeScript

Me TypeScript, props-et e një komponenti React përshkruhen me një tip, dhe editori të paralajmëron kur harron një prop ose i jep vlerë të gabuar. Skedarët me JSX dhe TypeScript mbarojnë me .tsx.

readonly (TypeScript)

readonly e ndalon ndryshimin e një fushe pasi është caktuar, dhe readonly string[] e ndalon shtimin ose heqjen nga një varg. Kontrollohet vetëm nga TypeScript-i, para ekzekutimit.

Recursive types

Tipet rekursive

Një tip mund t'i referohet vetes — kështu përshkruan struktura që s'kanë fund të caktuar, si pemët, menytë me nënmeny ose çdo vlerë JSON.

ReturnType & Parameters

ReturnType<typeof f> të jep tipin që kthen një funksion, dhe Parameters<typeof f> tipet e parametrave të tij. Kështu s'ke pse i rishkruan tipet — i nxjerr nga funksioni ekzistues.

Running TypeScript (tsx, Node, Bun, Deno)

Ekzekutimi i TypeScript-it

Për ta ekzekutuar një skedar .ts direkt, pa e kompajluar veç: npx tsx skedari.ts, ose me Bun dhe Deno që e kuptojnë TypeScript-in vetë. Versionet e reja të Node.js mund t'i heqin tipet dhe ta ekzekutojnë direkt.

satisfies

satisfies kontrollon që një vlerë i përshtatet një tipi, por pa e humbur tipin e saj më të saktë. P.sh. një objekt ngjyrash kontrollohet si Record<string, string>, por TypeScript-i mban mend saktë cilat çelësa ka.

Source maps

Kur kodi kthehet nga TypeScript (ose minifikohet), rreshtat ndryshojnë. Një source map i lidh rreshtat e kodit final me ato të kodit tënd origjinal, që në DevTools dhe në gabime të shohësh skedarin .ts të saktë.

strict mode (TypeScript)

Modaliteti strikt në TypeScript

"strict": true në tsconfig ndez të gjitha kontrollet më të rrepta: s'lejohen any të fshehur (noImplicitAny), null-et kontrollohen (strictNullChecks) e të tjera. Për projekte të reja, ndize gjithmonë.

strictNullChecks

Me strictNullChecks të ndezur, null dhe undefined s'janë më pjesë e çdo tipi. Po mund të mungojë një vlerë (string | undefined), TypeScript-i të detyron ta kontrollosh para se ta përdorësh — dhe zhduken shumë gabime „cannot read properties of undefined“.