اكتب مقابل الواجهة في TypeScript

يعد النوع مقابل الواجهة أحد أكثر الأشياء المربكة والمثيرة للاهتمام في TypeScript. سنحاول توضيح هذا الالتباس.

يتم إنشاء TypeScript أعلى JavaScript ، والذي يضيف أنواعًا ثابتة . وجود أنواع هو أمر رائع للمطورين. ستكون أنواع الكتابة صعبة ، لكنك لن تندم على ذلك على المدى الطويل.

يحتوي TypeScript على جميع الأنواع الأساسية مثل الأرقام والسلسلة والمنطقية وما إلى ذلك. بالإضافة إلى النوع الأساسي ، يتيح لنا TypeScript إنشاء أنواع مخصصة وتحديد كيفية ظهور الكائن بمساعدة Type Aliases and Interfaces ، على التوالى.

نوع الاسم المستعار ليس سوى نوع. إنشاء نوع باسم مخصص (اسم مستعار) يجعله اسم مستعار من النوع ، وليس أكثر من ذلك.

لنلقِ نظرة على البنية الأساسية للواجهات والأسماء المستعارة للنوع .

النحو الأساسي

واجهات

سيتم الإعلان عن interface بالكلمة الأساسية للواجهة. تحقق من بناء جملة الواجهات أدناه.

 interface InterfaceName { keyName: typeOfKey ... }

ألق نظرة على المثال النموذجي أدناه.

 interface Site { name: string; url: string; pagesCount: number; } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

اكتب الأسماء المستعارة

سيتم الإعلان عن الأسماء المستعارة باستخدام type الكلمة الأساسية. تحقق من بناء جملة الأسماء المستعارة أدناه.

 type TypeName = { keyName: typeOfKey; ... }

ألق نظرة على المثال النموذجي أدناه.

 type Site = { name: string; url: string; pagesCount: number } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

لقد أنشأنا نوعًا Site باستخدام الواجهة واكتب الاسم المستعار . كلاهما صالح ويمكن استخدامه لأنواع الكائنات المذكورة في الأمثلة. يختلف بناء الجملة فقط في المثال أعلاه ، وهو أمر واضح.

دعنا نواصل استكشاف الاختلافات بينهما للعثور على المزيد من الأشياء.

مجموعات

المجموعة في TypeScript هي مصفوفة طول محددة مسبقًا مكتوبة. يحدد أنواع كل فهرس.

يمكننا التصريح عن مجموعات باستخدام الأسماء المستعارة للنوع. لكن لا يمكننا فعل ذلك باستخدام الواجهات. دعونا نرى كيفية القيام بذلك باستخدام الأسماء المستعارة.

 type Site = [string, string, number] const geekflare: Site = ['Geekflare', 'https://geekflare.com/', 25]

في المثال أعلاه ، حددنا نوع كل عنصر فهرس للمصفوفة. إذا قدمنا ​​نوعًا آخر في المصفوفة ، فسيرمي TypeScript خطأً.

لا يمكننا أن نفعل ذلك مع الواجهات؟

لا يمكننا فعل ذلك تمامًا كما نفعل مع الأسماء المستعارة. تستخدم الواجهات لأنواع الكائنات. لذلك ، نحتاج إلى وجود المجموعة داخل الكائن لاستخدامها في الواجهات. دعونا نرى مثالا.

 interface Site { details: [string, string]; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

إذا رأيت الرمز ، فلدينا مجموعة تسمى تفاصيل داخل الواجهة. لذلك ، يمكننا استخدام المجموعات داخل الواجهات.

وبالمثل ، يمكننا استخدام الأسماء المستعارة للأنواع الفردية مثل السلسلة ، والرقم ، والمنطقي ، وما إلى ذلك. نظرًا لاستخدام الواجهة لأنواع الكائنات ، يمكننا استخدامها للأنواع الفردية مثل الأسماء المستعارة للنوع.

شيء آخر مثير للاهتمام هو أنه يمكننا استخدام النوع المستعار من نوع tuple في الواجهات . تحقق من المثال أدناه.

 type Details = [string, string] interface Site { details: Details; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

دعنا ننتقل إلى الشيء التالي.

إعلان دمج - واجهات

دمج الإعلان هو استخدام TypeScript لدمج أنواع الواجهات التي تحمل الاسم نفسه. دعنا نرى المثال للحصول على مزيد من الوضوح حوله.

 interface Site { name: string; } interface Site { url: string; } interface Site { pagesCount: number; } const geekflare: Site = { name: 'Geeflare', url: 'https://geekflare.com/', pagesCount: 25, }

إذا رأيت الرمز أعلاه ، فقد أعلنا عن الواجهة بنفس الاسم 3 مرات. سيقوم برنامج التحويل البرمجي TypeScript بتجميع كل هذه النماذج الثلاثة في نوع كائن واحد يتضمن جميع الأنواع من الواجهات التي لها نفس الاسم.

يمكنك تأكيد دمج الإعلان عن طريق إزالة مفتاح واحد من كائن geekflare . إذا قمت بإزالة أحد المفاتيح من geekflare ، فسترى خطأ.

لا يمكننا فعل الشيء نفسه مع الأسماء المستعارة. معظم الناس لا يستخدمون هذه الميزة. بشكل عام ، وجود واجهات متعددة بنفس الاسم أمر محير.

اكتب مراوح الاسم المستعار ، لا تقلق بشأن ميزة الواجهات هذه.

يمتد

لنفترض أنك قد أعلنت عن نوع. الآن ، تريد التصريح عن نوع آخر مع أنواع النوع السابق. في هذه الحالة ، يمكننا تمديد النوع السابق. يمكننا القيام بذلك باستخدام كل من الواجهات والأسماء المستعارة .

دعونا نراهم على حد سواء.

واجهات

توجد كلمة أساسية تسمى extends لحالة الاستخدام هذه في TypeScript. سنستخدمه لتوسيع الواجهات. دعنا نتحقق من المثال.

 interface Site { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

لقد أنشأنا واجهة Geekflare من خلال توسيع واجهة Site . ستكون جميع أنواع Site موجودة في Geeflare Interface جنبًا إلى جنب مع الأنواع الخاصة بها. يمكنك إزالة مفتاح name من متغير geekflare لتأكيده.

يمكننا تمديد واجهات متعددة على النحو التالي.

 interface FirstHalf { name: string; } interface SecondHalf { age: number } interface Person extends FirstHalf, SecondHalf { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

حاول التوسع بأكثر من واجهتين من أجل المتعة. يمكننا أيضًا توسيع الأسماء المستعارة باستخدام الواجهة.

 type Site = { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

لقد قمنا بتوسيع نوع واحد فقط في المثال أعلاه. يمكنك تمديد ما تريد ، على غرار المثال السابق لتوسيع واجهات متعددة.

دعونا نرى كيفية القيام بذلك باستخدام الأسماء المستعارة.

اكتب الأسماء المستعارة

يمكننا تمديد الأسماء المستعارة للنوع باستخدام نوع التقاطع في TypeScript. دعونا نرى مثالا.

 type Site = { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

لقد قمنا بتوسيع نوع Site باستخدام founder نوع Geekflare باستخدام التقاطع (&) . يمكنك اختباره عن طريق إزالة أحد المفاتيح من متغير geekflare ، والذي سيؤدي إلى حدوث خطأ.

على غرار الواجهات ، يمكننا توسيع أنواع متعددة على النحو التالي.

 type FirstHalf = { name: string; } type SecondHalf = { age: number } type Person = FirstHalf & SecondHalf & { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

يمكننا أيضًا توسيع الواجهات بأسماء مستعارة من النوع مثل الواجهات التي تمد الأسماء المستعارة للنوع. تحقق من المثال أدناه.

 interface Site { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

حاول توسيع مجموعة الأسماء المستعارة والواجهات.

تنفيذ

هذا ليس فرقًا بين الواجهات والأسماء المستعارة. مجرد سمة من سمات class يجب معرفتها.

يمكن للفئة تنفيذ كل من الواجهة واكتب الاسم المستعار بنفس الطريقة. دعونا نرى الأمثلة لكليهما.

واجهات

 interface Site { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

اكتب الأسماء المستعارة

 type Site = { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

ملاحظة: شيء واحد يجب تذكره هو أنه لا يمكننا تنفيذ أنواع الاتحاد (|) أو التقاطع (&) مع الفئات.

الكلمات الأخيرة

كما ترى في المقالات ، يمكننا فعل كل شيء باستخدام كل من الأسماء المستعارة والواجهات. لذلك ، لا يمكننا أن نقول بدقة أن أحدهما أفضل من الآخر. في النهاية ، اختيار واحد منهم هو اختيار شخصي. سوف تطور أسلوبك في استخدامها في النهاية.

بعد ذلك ، يمكنك التحقق من Typescript مقابل Javascript.

ترميز سعيد