முக்கிய உள்ளடக்கத்திற்குச் செல்லவும்
தொகுதி 2 · பாடம் 1 இன் 2பாடத்திட்டத்தில் 3/14~12 min
தொகுதி பாடங்கள் (1/2)

மாற்றுப்பெயர்கள் vs இடைமுகங்களைத் தட்டச்சு செய்க

டைப்ஸ்கிரிப்டில், சிக்கலான பொருள்களின் கட்டமைப்பை இரண்டு முதன்மை வழிகளில் வரையறுக்கலாம்: இடைமுகங்கள் (interface) அல்லது வகை மாற்றுப்பெயர்கள் (type). இரண்டும் ஒரு பொருள் அல்லது தரவு கட்டமைப்பின் "வடிவத்தை" விவரிக்க உதவுகின்றன, ஆனால் அவை சில அடிப்படை வேறுபாடுகளைக் கொண்டுள்ளன.


இடைமுகங்கள் (interface)

ஒரு பொருளின் கட்டமைப்பிற்கான ஒப்பந்தத்தை இடைமுகம் வரையறுக்கிறது. பொருள் வடிவங்கள் மற்றும் பொது API களை விரிவாக்கக்கூடிய வகையில் விவரிக்க இது நிலையான கருவியாகும்.

TS
interface Book {
  title: string;
  pages: number;
  author?: string; // Optional property (can be omitted)
}

const myBook: Book = {
  title: 'The Lord of the Rings',
  pages: 1200,
};

கேள்விக்குறி (?) ஒரு சொத்தை விரும்பினால் எனக் குறிக்கிறது. myBook பொருள் author பண்புகளைத் தவிர்த்துவிட்டாலும் செல்லுபடியாகும்.


வகை மாற்றுப்பெயர்கள் (type)

ஒரு வகை மாற்றுப்பெயர், பழமையான வகைகள், தொழிற்சங்கங்கள், டூப்பிள்கள் அல்லது முழுப் பொருள் கட்டமைப்புகள் உட்பட, ஏற்கனவே உள்ள எந்த வகையுடனும் புதிய பெயரை இணைக்க அனுமதிக்கிறது.

TS
type Point = {
  x: number;
  y: number;
};

const coordinates: Point = { x: 10, y: 20 };

முக்கிய வேறுபாடுகள்: நீட்டிப்பு மற்றும் அறிவிப்பு இணைத்தல்

interface மற்றும் type ஆகியவை சாதாரண பயன்பாட்டு நிகழ்வுகளுக்கு ஒன்றுக்கொன்று மாறக்கூடியவை என்றாலும், அவை இரண்டு முக்கியமான வேறுபாடுகளை வெளிப்படுத்துகின்றன:

1. விரிவாக்கம் (பரம்பரை)

extends முக்கிய சொல்லைப் பயன்படுத்தி இடைமுகங்கள் நீட்டிக்கப்பட்டுள்ளன:

TS
interface User {
  username: string;
}

interface Admin extends User {
  privileges: string[];
}

extends ஐப் பயன்படுத்தி வகை மாற்றுப்பெயர்களை நீட்டிக்க முடியாது, ஆனால் அவை ** வெட்டும்** ஆபரேட்டரைப் பயன்படுத்தி இணைக்கப்படலாம் (&):

TS
type User = {
  username: string;
};

type Admin = User & {
  privileges: string[];
};

2. பிரகடனம் ஒன்றிணைத்தல்

ஒரே நோக்கத்தில் ஒரே பெயரில் உள்ள பல இடைமுகங்கள் கம்பைலரால் தானாகவே இணைக்கப்படும்:

TS
interface User {
  name: string;
}
interface User {
  email: string;
}
// Now User has both 'name' and 'email'!

இந்த நடத்தை ஆதரவு இல்லை வகை மாற்றுப்பெயர்கள்: ஒரே type இருமுறை அறிவிப்பது தொகுக்கும் நேரப் பிழையைத் தூண்டும்.


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

பயிற்சி 1: பயனர் இடைமுகம்

உடற்பயிற்சி#ts.m2.l1.e1
முயற்சிகள்: 0ஏற்றுகிறது…

ஒரு பயனர் பொருளை விவரிக்கும் பயனர் என்ற இடைமுகத்தை வரையறுக்கவும். இடைமுகத்தில் இருக்க வேண்டும்: ஐடி ஒரு எண்ணாகவும், பயனர்பெயர் ஒரு சரமாகவும் மற்றும் மின்னஞ்சல் ஒரு விருப்ப சரமாக.

எடிட்டரை ஏற்றுகிறது…
குறிப்பைக் காட்டு

தொடரியல் மின்னஞ்சலைப் பயன்படுத்தவா?: அதை விருப்பமாகக் குறிக்க சரம்.

3 முயற்சிகளுக்குப் பிறகு தீர்வு கிடைக்கும்

பயிற்சி 2: Point2D வகை மாற்றுப்பெயர்

உடற்பயிற்சி#ts.m2.l1.e2
முயற்சிகள்: 0ஏற்றுகிறது…

x மற்றும் y (இரண்டு எண்களும்) ஆயத்தொலைவுகளுடன் இரு பரிமாண புள்ளியைக் குறிக்கும் Point2D என்ற மாற்றுப் பெயரை உருவாக்கவும்.

எடிட்டரை ஏற்றுகிறது…
குறிப்பைக் காட்டு

தொடரியல் வகையைப் பயன்படுத்தவும் Point2D = { x: number; y: எண்; };

3 முயற்சிகளுக்குப் பிறகு தீர்வு கிடைக்கும்

பயிற்சி 3: இடைமுகங்களை நீட்டித்தல்

உடற்பயிற்சி#ts.m2.l1.e3
முயற்சிகள்: 0ஏற்றுகிறது…

ஐடி (எண்) மற்றும் விலை (எண்) கொண்ட தயாரிப்பு என்ற இடைமுகத்தை வரையறுக்கவும். அடுத்து, DiscountedProduct என்ற இடைமுகத்தை வரையறுக்கவும், இது தயாரிப்பை விரிவுபடுத்துகிறது மற்றும் discountCode (ஸ்ட்ரிங்) என்ற விருப்பமான சொத்தை சேர்க்கிறது.

எடிட்டரை ஏற்றுகிறது…
குறிப்பைக் காட்டு

புலங்களைப் பெறுவதற்கு நீட்டிக்கப்பட்ட தயாரிப்பைப் பயன்படுத்தவும் மற்றும் தள்ளுபடி குறியீட்டைச் சேர்க்கவும்?: சரம்.

3 முயற்சிகளுக்குப் பிறகு தீர்வு கிடைக்கும்

பயிற்சி 4: சேவையக கட்டமைப்பு

உடற்பயிற்சி#ts.m2.l1.e4
முயற்சிகள்: 0ஏற்றுகிறது…

சேவையகத்திற்கான உள்ளமைவு பொருளைக் குறிக்கும் ServerConfig என்ற வகை மாற்றுப்பெயரை வரையறுக்கவும். இதில் இருக்க வேண்டும்: ஹோஸ்ட் (சரம்), போர்ட் (எண்), மற்றும் யூஸ்ஹெச்டிபிஎஸ்ஐ விருப்ப பூலியன் புலமாக.

எடிட்டரை ஏற்றுகிறது…
குறிப்பைக் காட்டு

தொடரியல் வகையைப் பயன்படுத்தவும் ServerConfig = {புரவலன்: சரம்; துறைமுகம்: எண்; useHttps?: பூலியன்; }.

3 முயற்சிகளுக்குப் பிறகு தீர்வு கிடைக்கும்