الواجهات في الكتابة المطبوعة: ما هي وكيفية استخدامها؟

ما هي الكتابة المطبوعة؟

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

واجهات

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

إنشاء واجهة

أثناء إنشاء واجهة جديدة ، فإن ملف الواجهة يجب استخدام الكلمة الأساسية. يجب أن يتبع هذه الكلمة الأساسية اسم الواجهة. يجب أن تحتوي الأقواس المتعرجة على شكل الكائن والخصائص والأنواع. يتم تحديد الخصائص والأنواع على أنها "المفتاح: القيمة"أزواج أثناء إنشاء الواجهة.

يوجد أدناه مثال على واجهات TypeScript البسيطة. 

// Create an empty interface:
interface EmptyObject {}

// Create interface Person:
interface Person {
  name: string;
  age: number;
  hairColor: string;
  weight: number;
  height: number;
}

// Create interface Car:
interface Car {
  model: string;
  manufacturer: string;
  numberOfWheels: number;
  type: string;
}

// Create interface User:
interface User {
  name: string;
  pass: string;
  email: string;
}

أيضا ، اقرأ: أفضل أطر تطوير تطبيقات الويب لعام 2022: احصل على أكبر قدر من قابلية التوسع بتكاليف أقل

خصائص اختيارية في واجهات

• الواجهة المعلنة قد تحتوي أيضًا على خصائص اختيارية. للإعلان عن خاصية اختيارية ، يتم استخدام علامة الاستفهام (؟) في نهاية اسم الخاصية أثناء الإعلان.

على سبيل المثال ، إذا أخذنا واجهة الشخص التي أعلناها أعلاه-

// Create interface Person:
interface Person {
  name: string;
  weight? : number;
  age: number;
  hairColor? : string;
   height: number;
}

في المثال أعلاه ، الواجهة شخص له خاصيتان اختياريتان مع "؟". إنه 'لون الشعر' و  'وزن'بينما الخصائص الثلاث الأخرى هي الخصائص المطلوبة.

شرح الواجهة في المكونات الوظيفية

منذ Person تم تعريف الواجهة ، والآن يمكن استخدامها كنوع ، كما يمكن إضافة تعليق توضيحي على معلمة الوظيفة باسم الواجهة:

دعونا نلقي نظرة مرة أخرى على واجهة الشخص التي أعلناها أعلاه:

interface PersonData {
  name: string;
 weight? : number;
  age: number;
  hairColor? : string; 
  height: number;
}

function getPersonDetail(person: PersonData) {
    return `${person.name} ${person.age} ${person.height}`;
}

let johnDoe = {
    name: 'John Doe',
    age: 25,
    height: 170,
};

console.log(getPersonDetail(johnDoe));

الإخراج:

John Doe 25 170

في المثال أعلاه ، يتحقق مترجم TypeScript من المعلمات أو الخصائص التي يتم تمريرها إلى ملف getPersonDetail() وظيفة.

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

الواجهة كوظائف

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

فمثلا:

interface multiplyFunc {
// Specify only parameters and return type:
    (a: number, b: number, c: number): string;  
}
// Annotate the "multiply" function
// with "MultiplyFunc" interface:
const multiply: multiplyFunc = (a, b, c) => {
  return a * b * c
}

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

interface myFunction {
// Specify only parameters and return type:
    (a: string, b: Boolean, c: number): string;  
}
const myFunc: myFunction = (x, y, z) => {
  return `x is ${x}, y is ${y}, z is ${z}`
}
// TypeScript will correctly infer "a" to be number,
// "b" to be string and "c" to be boolean.

أيضا ، اقرأ: تكلفة تطوير تطبيقات الويب: تفاصيل الأسعار لعام 2021

واجهة كأنواع فئة

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

واجهة مع فئات JavaScript ممكنة أيضًا مع TypeScript. من ناحية أخرى ، يختلف تطبيق الفصول قليلاً. لا تزال الواجهة محددة بعد الاسم ، في هذه الحالة ، اسم الفئة. ومع ذلك ، لا تستخدم علامات النقطتين بين اسم الفئة والواجهة.

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

// Create interface Person:
interface Person {
  // Define some class properties
  // of type string and number:  
  name: string;
  weight? : number; 
  age: number;
  height: number;
  hairColor? : string;
}
  // Define class method that returns a string:
  sayHello: () => string;
}

// Annotate the class "Myself" with the "Person" interface:
class Myself implements Person { 
   name: string;
   weight? : number;
   age: number;
   height: number;
  hairColor? : string;
}

  // Create constructor and assign existing properties:
  constructor(name: string, age: number, weight? : number,  hairColor? : string,    height: number) {
    this.name = name
    this.weight = weight
    this.hairColor = hairColor
    this.age = age
    this.height = height 
  }

  // Define required class method:
  sayHello() {
    return `Hello, my name is ${this.name}.`
  }
}

خصائص القراءة فقط

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

interface CarProperties {
    readonly length: number;
    readonly width: number;
    readonly wheelbase: number;
    readonly seatingCapacity: number;
}

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

أيضا ، اقرأ: أهم أخطاء تطوير تطبيقات الويب التي يجب تجنبها في عام 2022

تمديد الواجهات

يمكن لـ Extending Interfaces توسيع أي واجهة أخرى لاستيراد خصائص تلك الواجهة. هذا يساعد في إنشاء مكونات صغيرة وقابلة لإعادة الاستخدام. أثناء توسيع الواجهات بواجهات متعددة ، يتعين علينا فصلها بفاصلات. نستخدم الكلمات الأساسية الممتدة بين الواجهة الأولى والواجهة الثانية لتوسيع خصائصها.

// Create "Person" interface:
interface Person {
  name: string;
}

// The "Male" interface created extends the "Person" interface:
interface Male extends Person {
  gender: 'Male';
}
// In terms of Interface, this means:
// interface Male {
//   name: string;
//   gender: 'Male';
// }

// Now the "Female" interface is created to extend the "Person" interface:
interface Female extends Person {
  gender: 'Female';
}
// This Interface mean:
// interface Female {
//   name: string;
//   gender: 'Female';
// }

// Now the "Boy" interface is created to extend both “Male” and "Person" interfaces:
interface Boy extends Person, Male {
  age: number;
}
// which usually mean:
// interface Boy {
//   age: number;
//   gender: 'Male';
//   name: string;
// }

// Now the "Girl" interface is created to extend both "Female" and "Person" interfaces:
interface Girl extends Person, Female {
  age: number;
}
// which converts to:
// interface Girl {
//   age: number; 
//   gender: 'Female';
//   name: string;
// }

const akshay: Person = {
  name: 'Akshay'
}

const suraj: Male = {
  name: Suraj,
  gender: 'Male'
}

const sarah: Female = {
  name: 'Sarah',
  gender: 'Female'
}

const ahmad: Boy = {
  name: ‘Ahmad’,
  gender: 'Male',
  age: 26
}

const aayat: Girl = {
  name: 'Aayat',
  gender: 'Female',
  age: 18
}

أنواع قابلة للفهرسة

الكائنات المفهرسة هي الكائنات التي يمكن الوصول إلى خصائصها باستخدام توقيع فهرس مثل obj [`الملكية"]. هذه هي الطريقة القياسية للوصول إلى عناصر المصفوفة ، ولكن يمكنك أيضًا القيام بذلك للكائنات. على سبيل المثال ، يمكننا تحديد النوع حدد سيارة على النحو التالي:

Interface selectCar{
[index: number]: string
}
let cars: selectCar = ['Hatchback', 'Sedan', 'Land Rover', 'Premium']
console.log('Element at position 1', cars[1])       // 'Sedan'

دعونا نلقي نظرة على مثال آخر:

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

// declare indexable interface types
Interface PersonObject {
	[key: string]: any;
}

// declare few objects of type ‘PersonObject’
Let akshay: PersonObject = { name: “Akshay Bisht”, age: 27 };
Let ahmad: PersonObject = { name: “Ahmed”, 1: 26 };

// print values
console.log(‘akshay == > ’, akshay);	
--> akshay = = > { name : ‘Akshay Bisht’, age: 27 }
console.log(‘ahmed == > ’, ahmed);
--> ahmed = = > { name : ‘Ahmed’, 1: 26 }

أيضا ، اقرأ: كيفية استدعاء واجهة برمجة تطبيقات الويب باستخدام خطاف useEffect في React TypeScript؟

واجهات عامة

يتيح لك TypeScript أيضًا إنشاء ما يسمى بـ "واجهات عامة". تسمح لك هذه الواجهات بتحديد نوع الخاصية بناءً على معلمة واحدة أو أكثر تقوم بإتاحتها للواجهة عند استخدامها. يتم استخدام الأنواع العامة من TypeScript عندما تحتاج إلى إنشاء مكونات عامة تعمل مع أنواع بيانات متعددة.

مثلا، لا نريد تقييد دالة لقبول الأرقام فقط كمعلمات إدخال. يجب أن يتم تمديده بناءً على حالات الاستخدام لقبول الأنواع المميزة. يتم تحديد مواصفات الواجهات العامة باستخدام أقواس الزاوية (<>) كما هو موضح في المثال الموضح أدناه.

let cars: CarSpecification<CarModels> = Stack
let carModels = [
    {
        company: 'Tata',
        modelid: 1,
        length: 112,
    },
]
let newCar = new cars(carModels)
console.log(newCar)        --- >   // prints the value of `carModels`

Using Generics in Asynchronous tasks: 
// Create interface for PersonObject:
interface PersonObject {
  name: string;
  email: string;
}

// Create a generic interface:
interface ApiData<T> {
  payload: T[];
  code: number;	
  date: Date;
}

// Create function to fetch API
async function fetchAPI() {
  // Use ApiData "interface" and pass the "UserData" interface as argument (for T argument):
  const data: ApiData<UserData> = await fetch('/URL_endpoints')

  // The "ApiData<UserData>" converts to:
  // interface ApiDatae<T> {
  //   code: number;
  //   date: Date;
  //   payload: UserData[];
  //  }
}

لماذا نستخدم الواجهات؟

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

لنفترض أننا نكتب نوعًا من كود المكتبة ، مما يعني أنه يتعين علينا كتابة هذا الرمز لأنه صالح أيضًا للكائنات ، الكائنات التي لها مجموعة معينة من الخصائص. الطريقة الأكثر فعالية هي تحديد تلك الخصائص في واجهة (بدون تنفيذ ، مجرد وصف) واستخدام المراجع إلى الكائنات لتنفيذ الواجهة في كود مكتبتنا.

ما يفعله هو السماح لأي شخص عشوائي بإنشاء فئة تنفذ تلك الواجهة ، ولاستخدام كائن من الفصل الذي تم إنشاؤه وتنفيذه ، يحتاج الكود الخاص بنا إلى العمل معه.

وفي الختام

تعد الواجهات الطريقة الأكثر فعالية لتعريف الأنواع في TypeScript. دعونا نلقي نظرة على ملخص صغير لما تعلمناه في هذا البرنامج التعليمي:

• تحدد الواجهات مواصفات الكيانات وأنواع الكائنات والتنفيذ باستخدام الوظائف أو الفئات. يمكننا تحديد خصائص اختيارية على واجهة باستخدام "؟" واستخدم الكلمة الأساسية "للقراءة فقط" للخصائص التي لا يمكن تغييرها (خصائص للقراءة فقط) في اسم الخاصية.

• يقوم برنامج التحويل البرمجي TypeScript أيضًا بالتحقق من خصائص الوفرة في المقالة ويعطي خطأً بافتراض أن العنصر يحتوي على خاصية تم تحديدها بالفعل في الواجهة.

• تعلمنا كيفية تحديد الخصائص القابلة للفهرسة والمعلمات الاختيارية وتوسيع الواجهات باستخدام الواجهات.

• يمكن أيضًا تنفيذ الفئات والوظائف بواجهة. تحتوي الواجهة على تعريف لمتغيرات مثيل للفئة فقط.

• يمكن أيضًا استخدام الواجهات لاستيراد خصائص واجهات أخرى ، ونقوم بذلك باستخدام الكلمة الأساسية الممتدة.

• يمكننا أيضًا بناء المكونات القابلة لإعادة الاستخدام والتي يمكننا استخدامها بشكل متكرر في مكتبة الشفرات الخاصة بنا باستخدام الأدوية الجنسية مع الواجهات.

خدمات تطوير الويب

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

احصل على استشارة

هل تبحث عن المزيد من المحتوى الرائع؟ اشترك في صحيفتنا الإخبارية

شكرا لك على الاشتراك.

  يرجى تصحيح الحقل (الحقول) المحددة أدناه.

1 ، خطأ ، 1 ، اسم العائلة ، 2

1 ، صحيح ، 6 ، بريد إلكتروني للاتصال ، 2

1 ، خطأ ، 1 ، الاسم الأول ، 2

المدونات ذات الصلة

المدونة

فهم البنية الموجهة نحو الخدمة: المبادئ والمكونات الرئيسية

المدونة

21 أفضل ممارسات التجارة الإلكترونية الأساسية لتحقيق أقصى قدر من التحويلات

المدونة

المخاطر الخفية لاستضافة Laravel على الاستضافة المشتركة

عرض المزيد