React JavaScript vs React TypeScript | React | Tamil | Mr. Tech Code

வணக்கம்!

இந்த பதிவின் மூலமாக, React JavaScript -இற்கும், React TypeScript -இற்கும் இடையிலான வித்தியாசங்களையும், பெரும்பாலான Developer -கள் React TypeScript -ஐ பயன்படுத்த காரணமாக அமையும் காரணிகளையும் பார்க்கலாம்.

React JavaScript

React JavaScript ஆனது React Code ஆனது JavaScript கொண்டு எழுதப்படும். இது Loosly typed language code ஆகும். React JavaScript -இல் உருவாக்கப்படும் Components அனைத்தும் .js அல்லது .jsx என்கின்ற filename extension -இல் அமையும். React JavaScript Component Extension .jsx -இல் அமைவது சிறந்தது.

React JavaScript ஆனது Code -ஐ Run செய்த பின்னர், Browser -இல் தோன்றும் பிழைகளை (Bugs) கொண்டே Code -களில் Validation செய்வார்கள். சில சமயங்களில், ஒரு சில பிழைகளை தவிர்த்து விட்டு Project -ஐ பயன்படுத்த இயலும்.

JavaScript Code ஆனது, பெரும்பாலும் Developer உடைய Knowledge கொண்டே உருவாக்கப்படும். இதனால், அதிகப்படியான நேரமும், Performance Issue -களும் கையாள வேண்டிவரும்.

State with String Value

மேற்கண்ட புகைப்படத்தில், React JavaScript -இல் State உடைய value ஆனது String Data Type -இல் கொடுக்கப்பட்டுள்ளது. இந்த State -இல் Value -ஐ Number ஆகவோ, அல்லது Boolean ஆகவோ, அல்லது வேறு எந்தவொரு DataType -இற்கு மாற்றியமைத்தாலும் பிழையானது தோன்றாது.

ஆனால், title என்பது பொதுவாக String -இல் அமையும் என்பது அனைவரும் அறிந்த ஒன்று. Money சம்பந்தப்பட்ட Value ஆனது Number -இல் வரவேண்டும் என்பது அனைவரும் அறிந்த ஒன்று.

React JavaScript

மேற்கண்ட புகைப்படத்தில், title Value ஆனது, 123 என்கின்ற number ஆக Button -ஐ Click செய்யும் பொழுது மாற்றியமைக்கும் படி எழுதப்பட்டுள்ளது.

React JavaScript Initial Result

மேற்கண்ட புகைப்படமானது, HomeComponent உடைய Initial Result ஆகும். இதில் Change Button -ஐ Click செய்தவுடன், Title ஆனது Number ஆக மாற்றியமைக்கப்பட்டு, திரையில் தோன்றுவதை கீழ்கண்ட புகைப்படத்தில் காணலாம்.

React JS Updated Result

கீழ்கண்ட புகைப்படத்தில், userDetails என்கின்ற State -இல் Name மற்றும் Address Details ஆனது கொடுக்கப்பட்டுள்ளது. அதில் Age என்கின்ற Value ஆனது Button கிளிக் செய்யும் பொழுது சேர்க்கப்படுகின்றது.

React JS Without Error Highlights

இதில் எந்தவொரு பிழையும் ஏற்படுவதில்லை. JavaScript என்பதால், State -இல் எந்தவொரு Value -ஐயும் சேர்க்கவோ அல்லது நீக்கவோ அனுமதிக்கின்றது. இதற்கென்று தனிப்பட்ட Validation எதுவுமில்லை.

Initial Browser Result

Button -ஐ கிளிக் செய்தவுடன், Age Value ஆனது userDetails state -இல் update செய்யப்பட்டு, JSX -இல் திரையில் தோன்றுவதை கீழ்கண்ட புகைப்படத்தில் பார்க்கலாம்.

Browser Updated Result

React TypeScript

React TypeScript ஆனது TypeScript Code கொண்டு எழுத்தப்படும். TypeScript என்பது JavaScript உடைய Super set Code ஆகும். JavaScript Code -இல் Type -களை கொடுத்து, Code ஆனது உருவாக்கப்படுகிறது.

React TypeScript -இல் Code உருவாக்கும் பொழுதே, பெரும்பாலான பிழைகளையும் சரிசெய்யலாம். அதாவது, Code Compile Time -இல் Code -இல் உள்ள பிழைகளை சரி செய்வதால், Run Time -இல் பிழைகளை தவிர்க்க இயலும்.

இதனால், பெரும்பாலான நேரம் மிச்சப்படுவது மற்றுமின்றி, Performance -உம் அதிகரிக்கின்றது.

Property Doesn't Exist Error

மேற்கண்ட புகைப்படத்தில் JavaScript -இல் உருவாக்கப்பட்ட Code ஆனது, தற்பொழுது .tsx என்கின்ற TypeScript Extension -இற்கு மாற்றியமைக்கப்பட்டுள்ளது. அதில் JSX Element -இல் age எனும் இடத்தில Error ஆனது காண்பிக்கப்பட்டுள்ளது.

காரணம், useDetails State -இல் initial Value -இல் age ஆனது கொடுக்கப்படவில்லை. ஆனால், JSX Element -இல் பயன்படுத்தப்பட்டுள்ளது. இவ்வாறு இல்லாத Value ஆனது பயன்படுத்தும் பொழுது JavaScript -இல் அந்த இடமானது வெற்றிடமாக தோன்றும். பிழைகளை தவிர்த்து விடும்.

ஆனால் TypeScript ஆனது, பிழைகளை IDE, Terminal மற்றும் Browser என அனைத்து இடங்களிலும் Highlight செய்து காண்பிக்கும்.

Terminal Error Highlight

Browser Error Highlight

இவ்வாறு காண்பிக்கும் பட்சத்தில், அந்த Value ஆனது State கொடுத்து பிழைகளை தவிர்க்கலாம். இந்த பிழைகள் ஆனது .tsx என்கின்ற extension மூலமாக, Typescript ஆனது Compile செய்து காண்பிக்கும் Error ஆகும்.

React TypeScript with Types

React TypeScript -இல் Variable மற்றும் Data -களை, Initial Valueஅல்லது Type கொடுத்து உருவாக்கப்பட வேண்டும். அவ்வாறு கொடுக்கப்படாத பட்சத்தில், அவற்றை any என்கின்ற Type -இல் TypeScript கருதும்.

Type -ஐ கொடுக்க Interface, Enum மற்றும் Types போன்ற Context -களை கொண்டு கொடுக்கலாம். 

கீழ்க்கண்ட புகைப்படத்தில், userDetails ஆனது, Interface மற்றும் Type Context -இல் எவ்வாறு உருவாக்கப்பட வேண்டும் என்பதை காணலாம். இதில் name, age மற்றும் address உடைய type ஆனது கொடுக்கப்பட்டுள்ளது.

UserDetails Interface Context

UserDetails Type Context

மேற்கண்ட Type அல்லது Interface -ஐ, எவ்வாறு state -இல் கொடுக்கலாம் என்பதை கீழ்கண்ட புகைப்படத்தில் காணலாம். 

State Type Definition

UserDetailsProps ஆனது age என்னும் data -ஐ கொண்டுள்ளது. ஆனால், userDetails state -இல் age ஆனது கொடுக்கப்படவில்லை. எனவே, TypeScript ஆனது, அந்த State -ஐ Highlight செய்து Error -ஐ காண்பிப்பதை கீழ்கண்ட புகைப்படத்தில் காணலாம்.

Value Undefined Error

குறிப்பு: types, interface மற்றும் enum போன்றவற்றை, வேறொரு பதிவின் மூலமாக தெளிவாக தெரிந்துக்கொள்ளலாம்.

மேலும், தற்பொழுது age ஆனது number அல்லாமல் string -இல் value -ஐ சேமிக்க Code ஆனது, கொடுக்கும் பொழுது, அவற்றையும் Error ஆக Highlight செய்வதை கீழ்கண்ட புகைப்படத்தில் காணலாம்.

Types Missmatch Error

இவ்வாறான Error ஆனது Types Missmatch Error என அழைக்கப்படும். TypeScript ஆனது, அதற்கான Data Type -களில் மட்டுமே, தகவல்களை சேமிக்க அனுமதிக்கும். Typescript பற்றி விரிவாக அடுத்தடுத்த பதிவுகளில் பார்க்கலாம்.

Conclusion

இந்த பதிவின் மூலமாக, React JavaScript மற்றும் TypeScript பற்றிய சில அடிப்படையான தகவல்களை தெரிந்துக்கொண்டு இருப்பீர்கள்.