TypeScript શું છે? Non-developers માટે સરળ માર્ગદર્શિકા

TypeScript એટલે types સાથેનું JavaScript. તમે લેબલ ઉમેરો છો કે દરેક value કયા પ્રકારનો ડેટા હોવો જોઈએ — સંખ્યા, લખાણ, ઓર્ડરોની યાદી — અને TypeScript તમારો કોડ ચાલતા પહેલાં મેળ ન ખાતી બાબતો માટે તપાસે છે. TypeScript સાઇટ તેને "types માટેના સિન્ટેક્સ સાથેનું JavaScript" તરીકે વર્ણવે છે; સામાન્ય JavaScript માં ફેરવાય ત્યારે types દૂર કરી દેવાય છે, અને પછી તે જ્યાં પણ JavaScript ચાલે ત્યાં ચાલે છે.

AI સાથે બનાવતી વખતે તે શા માટે મહત્વનું છે

AI મોડેલો ઝડપથી કોડ લખે છે, અને ઝડપી કોડમાં ભૂલો હોય છે: એક ફાઇલમાં customerName અને બીજી ફાઇલમાં customer_name, કિંમત સંખ્યાને બદલે લખાણ તરીકે પાસ થવી, અથવા ફંક્શન ગુમ થયેલી કિંમત સાથે બોલાવવું. સાદા JavaScript માં, ઘણી ભૂલો ત્યારે જ દેખાય છે જ્યારે કોઈ ખોટું બટન દબાવે છે.

TypeScript આમાંની ઘણી ભૂલો લખાતી વખતે, વહેલી પકડે છે:

• AI ને તરત પ્રતિસાદ મળે છે. Type ભૂલો ચોક્કસ ખોટી લાઇન બતાવે છે, જેથી agent તમે જુઓ તે પહેલાં તેને સુધારી શકે.
• ફેરફારો વધુ સુરક્ષિત હોય છે. એક field નું નામ બદલો, અને TypeScript દરેક જગ્યાએ ચિહ્નિત કરે છે જ્યાં જૂનું નામ હજી વપરાય છે.
• કોડ પોતે સમજાવે છે. Types દસ્તાવેજ કરે છે કે ફંક્શન શું અપેક્ષે છે અને શું પાછું આપે છે, જે તમને, AI ને અને પછી કોડ પર કામ કરનાર કોઈ પણ developer ને મદદ કરે છે.
• Editors વધુ સ્માર્ટ બને છે. Autocomplete અને "go to definition" વધુ સારી રીતે કામ કરે છે, કારણ કે editor જાણે છે કે દરેક value શું છે.

આ એક મોટું કારણ છે કે ઘણા AI app builders TypeScript ને ડિફોલ્ટ તરીકે પસંદ કરે છે.

એક રોજિંદો ઉદાહરણ

લેબલવાળા ખાડાઓ ધરાવતા શિપિંગ વેરહાઉસનો વિચાર કરો. દરેક ખાડા પર એક બોર્ડ છે: "ફક્ત પેલેટ", "ઠંડું રાખવાનું", "મહત્તમ 500 કિલો". જ્યારે માલ આવે છે, ત્યારે દરવાજે એક તપાસનાર માલને બોર્ડ સાથે સરખાવે છે. સૂકા-માલના ખાડામાં જવા નીકળેલી સ્થિર માછલી દરવાજા પર જ રોકાય છે, અઠવાડિયા પછી દુર્ગંધ આવે ત્યારે નહીં.

TypeScript એ દરવાજાનો તપાસનાર છે. Types બોર્ડ છે. તપાસ માલ — એટલે કે તમારો કોડ — ઉપયોગમાં લેવાય તે પહેલાં થાય છે. અને એકવાર બધું ગોઠવાઈ જાય, પછી બોર્ડ ઉતારી લેવાય છે: ચાલતા JavaScript માં કોઈ types બાકી રહેતા નથી.

TypeScript કેવી રીતે કામ કરે છે

1. તમે (અથવા AI) .ts અથવા .tsx ફાઇલો લખો છો — TypeScript, type લેબલ્સ સાથે.
2. Type checker કોડ વાંચે છે અને મેળ ન ખાતી બાબતોને editor અથવા build માં ભૂલ તરીકે બતાવે છે.
3. Build step types દૂર કરે છે, અને સાદું JavaScript બનાવે છે.
4. JavaScript ચાલે છે — browser માં અથવા server પર (Node.js, Deno, Bun).

એક મહત્વનું પરિણામ: TypeScript તમે લખેલો કોડ તપાસે છે, પણ app ચાલતી હોય ત્યારે આવતો ડેટા તપાસતું નથી. જો બહારનું API કંઈક અણધારી પાછું મોકલે, તો runtime validation ઉમેરો નહીં ત્યાં સુધી TypeScript તે જોઈ શકતું નથી.

એક કામ કરેલું ઉદાહરણ: booking form

માની લો કે તમે એક હેર સલૂન માટે booking app બનાવી રહ્યા છો. Booking નું વર્ણન કરતો એક type અહીં છે:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // the ? means optional
};

અને ડિપોઝિટની ગણતરી કરતું ફંક્શન:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

હવે જુઓ TypeScript શું પકડે છે.

ખોટું લખાયેલ field.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript જણાવે છે કે prise જાણીતી property નથી અને price ગુમ છે. સાદા JavaScript માં, આ ચુપચાપ NaN (not a number) ડિપોઝિટ ગણી કાઢશે.

ખોટા પ્રકારની value.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript જણાવે છે કે જ્યાં સંખ્યા અપેક્ષિત છે ત્યાં string વાપરી શકાતી નથી. તેના વિના, "40" * 0.2 સંયોગથી કામ કરે છે, પણ "40" + 5 "405" આપે છે — એવી ભૂલ જે ઇનવૉઇસ પર દેખાય.

અસ્તિત્વમાં ન હોય તેવી સેવા.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript જણાવે છે કે "perm" માન્ય સેવાઓમાંની એક નથી. જ્યારે સલૂન પછીથી perms ઉમેરે, ત્યારે તમે તેને type માં ઉમેરો છો, અને TypeScript દરેક જગ્યા બતાવે છે જેને અપડેટ કરવાની જરૂર છે — ભાવ યાદી, ફોર્મ, કૅલેન્ડરના રંગો.

તે શું પકડી શકતું નથી. જો booking form browser થી સર્વર પર price: "40" મોકલે, તો સર્વર પરનું TypeScript runtime પર તે જોતું નથી. તેથી સારી રીતે બનાવેલી apps આવતા ડેટાને પણ validate કરે છે, ઘણી વાર એક validation library વડે જે આકાર તપાસે છે અને તેને યોગ્ય Booking માં ફેરવે છે.

TypeScript vs JavaScript

સામાન્ય શબ્દો સમજાવ્યા

સામાન્ય ભૂલો અને ગેરસમજો

• "TypeScript કોડને bug-free બનાવે છે." તે ડેટાના આકારમાં મેળ ન ખાતી બાબતો પકડે છે, ખોટા logic ને નહીં. 20% ને બદલે 2% નું deposit type-check પાસ કરી જાય છે.
• "Types મને ખરાબ input થી બચાવે છે." Types runtime પર ગાયબ થઈ જાય છે. વપરાશકર્તાઓ, forms અને APIs માંથી આવતા ડેટાને validate કરો.
• બધે any. જ્યારે AI અટકે, ત્યારે તે ભૂલો શાંત કરવા any અથવા // @ts-ignore તરફ વળી શકે છે. તે સમસ્યાને ઠીક કરવાને બદલે છુપાવે છે.
• preview કામ કરે છે એટલે type ભૂલોને અવગણવી. કેટલાંક સાધનો હજી type ભૂલો ધરાવતો કોડ ચલાવે છે. તે ભૂલો હજી પણ ભવિષ્યની bugs છે.
• "TypeScript ધીમું છે." ચાલતા પહેલાં types દૂર થાય છે; જે JavaScript ચાલે છે તે લગભગ એકસરખું છે.
• "તે ફક્ત મોટી ટીમો માટે છે." એકલા builders પણ લાભ લે છે, ખાસ કરીને જ્યારે મોટાભાગના ફેરફારો AI કરતું હોય.

તમારા AI builder ને શું માગવું

• "TypeScript strict mode ચાલુ રાખીને વાપરો."
• "અમારા મુખ્ય રેકોર્ડ્સ માટે વહેંચાયેલા types વ્યાખ્યાયિત કરો — Customer, Booking, Invoice — અને તેમને frontend અને backend બંને પર વાપરો."
• "ભૂલો પાર કરવા any અથવા @ts-ignore ન વાપરો; મૂળ સમસ્યા ઠીક કરો અને કહો કે તે શું હતી."
• "ફક્ત types સાથે નહીં, સર્વર પર બધો આવતો ડેટા validate કરો."
• "Type checker ચલાવો અને તમે કહો કે કામ પૂરું છે તે પહેલાં દરેક ભૂલ ઠીક કરો."
• "જ્યારે તમે field નું નામ બદલો, ત્યારે TypeScript ચિહ્નિત કરે તે દરેક જગ્યા અપડેટ કરો."
• "આ type ભૂલ સાદા અંગ્રેજીમાં સમજાવો."

AI-લખેલો કોડ તપાસવા માટે, AI-લખેલો કોડ કેવી રીતે તપાસવો અને AI-બનાવેલી app ને કેવી રીતે debug કરવી જુઓ.

Mythex માં TypeScript

જ્યારે તમે કંઈ ખાસ માગતા નથી, ત્યારે Mythex નવા પ્રોજેક્ટ્સ Vite + React + TypeScript + Tailwind પર શરૂ કરે છે. Code editor માં language intelligence છે — TypeScript અને JavaScript માટે completions, diagnostics અને go-to-definition, બીજી ભાષાઓ સાથે — જેથી type ભૂલો ફક્ત preview માં નહીં, કોડમાં દેખાય છે. Editor Free પર ફક્ત વાંચી શકાય તેવું છે અને Pro પર સંપૂર્ણ સંપાદનયોગ્ય છે. તમે પહેલા prompt માં અલગ setup પણ માગી શકો છો; ટેક્નોલોજી કેવી રીતે પસંદ થાય છે વાળું docs પેજ સમજાવે છે કે કેવી રીતે, અને code editor docs editor શું બતાવે છે તે આવરી લે છે.

પ્રશ્નો