இலக்கிய வகைகள் மற்றும் கூற்றுகள்

டைப்ஸ்கிரிப்ட் மாறிகளின் சாத்தியமான மதிப்புகளைக் குறைக்க மேம்பட்ட கருவிகளை வழங்குகிறது மற்றும் தேவைப்படும்போது மேலும் குறிப்பிட்ட வகைகளை அங்கீகரிக்க கம்பைலரை கட்டாயப்படுத்துகிறது.

இலக்கிய வகைகள்

ஒரு எழுத்து வகை ஒரு துல்லியமான, ஒற்றை மதிப்பைக் குறிக்கிறது (எடுத்துக்காட்டாக, ஒரு குறிப்பிட்ட சரம் அல்லது எண்). அவை பொதுவாக தொழிற்சங்க வகைகளுடன் இணைக்கப்படுகின்றன:

type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;

light = 'red'; // OK
light = 'blue'; // Error: "blue" is not assignable to TrafficLight

வலியுறுத்தல் வகை (as)

சில சமயங்களில் தொகுக்கும் நேரத்தில் TypeScript அறிய முடியாத வகையைப் பற்றிய தகவல் உங்களிடம் இருக்கும். இந்தச் சமயங்களில், as முக்கிய சொல்லைப் பயன்படுத்தி வகை வலியுறுத்தலை பயன்படுத்தலாம்:

const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;

உறுதிப்படுத்தல் தொகுப்பாளரிடம் கூறுகிறது: "என்னை நம்புங்கள், இந்த உறுப்பு ஒரு HTMLCanvasElement என்று எனக்குத் தெரியும்". இது இயக்க நேரத்தில் எந்த காசோலைகளையும் அல்லது வார்ப்புகளையும் செய்யாது; இது வகை சரிபார்ப்பிற்கு மட்டுமே உதவுகிறது.

உறுதிப்பாடுகள் (as const)

const உடன் ஒரு பொருள் அல்லது அணிவரிசையை நாம் அறிவிக்கும் போது, ​​டைப்ஸ்கிரிப்ட் அதன் உள் பண்புகளை மாற்ற அனுமதிக்கிறது. முடிவில் as const ஐச் சேர்ப்பதன் மூலம், முழு அமைப்பும் உறைந்து படிக்க மட்டும் ஆக்கப்பட்டு, அனைத்து பண்புகளையும் அவற்றின் சரியான எழுத்து வகைகளாக மாற்றுகிறது:

const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Error: array is read-only

டெம்ப்ளேட் இலக்கிய வகைகள்

டெம்ப்ளேட் நேரடி வகைகள் ஜாவாஸ்கிரிப்ட் டெம்ப்ளேட் சரங்களின் மேல் கட்டப்பட்டுள்ளன, ஆனால் அவை வகை நிலைகளில் பயன்படுத்தப்படுகின்றன. அவை பல நேரடி வகைகளை ஒன்றாக இணைக்க அனுமதிக்கின்றன:

type Size = 'small' | 'large';
type Color = 'red' | 'blue';

// Creates the union: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;

டெம்ப்ளேட் இலக்கிய வகைகளில் சரம் பயன்பாடுகள்

டைப்ஸ்கிரிப்ட், டெம்ப்ளேட் லிட்டரல் வகைகளுக்குள் எழுத்துகளை கையாள சிறப்பு பயன்பாட்டு வகைகளை வழங்குகிறது:

• Capitalize<StringType>: சரத்தின் முதல் எழுத்தை பெரியதாக்குகிறது.
• Uncapitalize<StringType>: சரத்தின் முதல் எழுத்தை அன் கேப்பிடலைஸ் செய்கிறது.
• Uppercase<StringType>: முழு சரத்தையும் பெரிய எழுத்துக்கு மாற்றுகிறது.
• Lowercase<StringType>: முழு சரத்தையும் சிற்றெழுத்துக்கு மாற்றும்.

type ActionType = 'click' | 'hover';

// Generates: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;

நீங்களே முயற்சி செய்து பாருங்கள்

பயிற்சி 1: திசை இலக்கிய ஒன்றியம்

பயிற்சி 2: JSON.parse மீது வலியுறுத்தல்

பயிற்சி 3: நிகழ்வுகளுக்கான டெம்ப்ளேட் இலக்கியம்

பயிற்சி 4: கேபிட்டலைஸ் கொண்ட டெம்ப்ளேட் லிட்டரல் வகை