ශ්‍රී ලංකාවේ නවතම තාක්ෂණික පුවත් 2026-07-27, Monday
💻 ක්‍රමලේඛනය · 🕒 කියවීමට විනාඩි 2 · 👁 1

TypeScript හි Map ආයාතයේ ගැටලුව නිසා වෙබ් අඩවිය වැරදි පණිවිඩයක් පෙන්වා

TypeScript හි Map ආයාතයේ ගැටලුව නිසා වෙබ් අඩවිය වැරදි පණිවිඩයක් පෙන්වා

React සහ TypeScript භාවිතා කරන සංවර්ධකයන්ට අමුතු අත්දැකීමක් වෙලා. tsc --noEmit නිරවද්‍යව පරීක්ෂා කරලා පසුද, අලුත්ම පිටුවක් සදහා ඉදිරිපත් කළ පසු අහඹු දෝෂයක් පෙනුනේ.

දෝෂය සරලයි: TS2350: Only a void function can be called with the 'new' keyword. එම කියැවීම TypeScript එකේ ඉතා තීව්‍ර වදනක්. මෙහි අර්ථය, ඔබ new යොදා ගන්නා වස්තුව සෑදිය නොහැකි බවයි.

ඇයි මේ වගේ අභ්‍යන්තර ගැටලුව හතර වරක් පරීක්ෂා කළ පසුද පවා නොපෙනුනේ? එහි හේතුව tsconfig.json හි “solution‑style” සැකසුමයි. එම ගොනුවේ files: [] ලෙස සකස් කර ඇති නිසා, npx tsc --noEmit කිසිදු මූලාශ්‍ර ගොනුවක් පරීක්ෂා නොකර, පාලනයක් නැතිව සාර්ථකව අවසන් වේ. ඇත්තටම යථාර්ථය පරීක්ෂා කරන කමන්ඩ් එක npx tsc -p tsconfig.app.json --noEmit ය.

ඉදිරියට යන විට, ගැටලුව lucide-react නමින් අයිකන් පුස්තකාලයකින් Map නමැති කොම්පොනන්ට් එක ආයාත කිරීමෙන් සිදු වුණා. ඒ ආයාතය ගොනුවේ සෑම තැනකම Map ග්ලෝබල් කන්ස්ට්‍රක්ටර්‍ එක (JavaScript හි Map) අඳුරු කර දුන්නේ. එම නිසා new Map(...) ලියන විට, React අයිකන් කොම්පොනන්ට් එකට new යෙදූ බව TypeScript සලකුණු කළා.

මෙම ගැටලුව නිරාකරණය කිරීම ඉතා සරලයි – අදාළ ආයාතය ඉවත් කිරීමෙන් සෑම දෝෂයක්ම නැතිවී ගිය. ඒත් මේ වගේ “unused import” එකක් ගෝලීය නාමයන් සමඟ ගැලපෙනවා නම්, එය අනාගතයේ අලංකාර නොවන බග් එකක් බවට පත්වේ.

ශ්‍රී ලංකාවට ඇති වැදගත්කම

  • සිසුන්ට – TypeScript පරීක්ෂණ ක්‍රමවේදය කෙරෙහි අවධානය යොමු කරමින්, tsconfig සැකසුම වැරදි නම් පරීක්ෂණය වත්මන් වශයෙන් “pass” විය හැකි බව ඉගෙන ගත හැක.
  • සංවර්ධකයන්ට – අයතනික ආයාත (import) ගොනුවල ගෝලීය නාමයන් සමඟ ගැලපීම වැළැක්වීමට lint rule හෝ IDE plugin භාවිතය ප්‍රයෝජනවත් වේ.
  • ව්‍යාපාරිකයන්ට – අනිසි බග් එකක් නිසා වෙබ් අඩවිය අච්චු කරාම, පාරිභෝගික විශ්වාසය හා ආදායම අහිමි වීමේ අවදානම ඉතා වැඩි. නිවැරදි build pipeline එකක් සහ type‑check pipeline එකක් එකට ගැලපීම ආරක්ෂාකාරී ව්‍යාපාරයක් සඳහා අත්‍යවශ්‍යය.

අවසන් වශයෙන්, TypeScript භාවිතා කරන සැම කෙනෙකුම tsc -p tsconfig.app.json වැනි සත්‍ය පරීක්ෂණ කමන්ඩ් එකක් ක්‍රියාත්මක කර, “unused import” හෝ ගෝලීය නාම ගැටලුවක් පරීක්ෂා කිරීම අමතක නොකරන්න.

💡 ඔබේ TypeScript පරීක්ෂණ සැකසුම දැන් පරීක්ෂා කර බලන්න!
මූලාශ්‍රය මෙම ලිපිය AI මගින් රචිත මුල් සාරාංශයකි. සම්පූර්ණ වාර්තාව කියවන්න:
Dev.to ↗
#TypeScript #React #Build #Error #SriLanka