يحتوي TypeScript 4.0 أخيرًا على ما كنت أنتظره

في 6 أغسطس من هذا العام ، أعلنت شركة Microsoft عن الإصدار المرشح لإصدار TypeScript 4.0. هناك دعم لـ Labeled Tuple Elements . وهذا بالضبط ما كنت أنتظره في TypeScript.





في الجزء العلوي الوسائط التي تم تعيين تسميات ذات معنى. فيما يلي حجج بأسماء غير مجدية ،



لماذا كنت أنتظر هذا؟ سأشرح هذا باستخدام مثال تطوير وظيفة.



واجهة معممة تدعم التعامل المرن بين الوسائط



هذا مثال مبسط. يعتمد على استخدام الواجهة IQuery. تهدف الواجهة إلى وصف خصائص الوظائف التي تؤدي طلبات الحصول على شيء ما. دائمًا ما يُرجع الوعد ويقبل عامًا يصف ما يعود به الوعد ( TReturn). هذه الواجهة مرنة جدًا ، يمكنك استخدامها عند إنشاء وظائف لا تأخذ أي وسيطات ، أو تأخذ عددًا غير معروف من الوسائط ( UParams extends any[] = []).



interface IQuery<TReturn, UParams extends any[] = []> {
  (...args: UParams): Promise<TReturn>
}


الوظيفة قيد الاختبار: findSongAlbum ()



باستخدام هذه الواجهة ، سنكتب وظيفة تبحث عن ألبومات الموسيقى حسب عنوان الأغنية ( title) والفنان ( artist). تقوم بإرجاع وعد يقوم بإرجاع كائن واحد من النوع Album:



type Album = {
  title: string
}


بدون TypeScript ، سيبدو رمز هذه الوظيفة كما يلي:



const findSongAlbum = (title, artist) => {
  //   ...
  
  const albumName = '1989';
  return Promise.resolve({
     title: albumName
  });
}


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



const findSongAlbum: IQuery<Album> = (title, artist) => {
  //   ...
  
  const albumName = '1989';
  return Promise.resolve({
     title: albumName 
  });
}


رمز مكتوب قبل TypeScript 4.0



عند تطوير وظيفتنا ، نحتاج أيضًا إلى إعلان المعلمات وبيان أنواعها. في هذه الحالة ، titleو artistهي سلاسل. دعنا نعلن عن نوع جديد ، ونمرره Paramsكالنوع الثاني لـ IQuery.



في المثال الذي تمت كتابته بدون استخدام الميزات الجديدة لـ TypeScript 4.0 ، Paramsسيتم تمثيله بقائمة من الأنواع. يحدد كل عنصر في هذه القائمة نوع الوسيطة. يتم ذلك بنفس الترتيب الذي تظهر به الوسيطات عند إعلان الوظيفة. هذا مثال على استخدام tuple .



type Params: [string, string]
const findSongAlbum: IQuery<Album, Params> = (title, artist) => {
  //   ...
  
  const albumName = '1989';
  return Promise.resolve({
     title: albumName
  });
}


من خلال تحليل النوع Params، يمكنك معرفة أن العنصر الأول الخاص به string، يعين النوع إلى stringالوسيطة الأولى ، أي - title. الحجة الثانية ، والتي تبدو أيضًا string، بطبيعة الحال ، تتبع نفس خط التفكير ، وتخصص نوعًا إلى stringالوسيطة الثانية - artist. سيؤدي هذا إلى جعل نوع قائمة الوسائط آمنًا.



دعنا نحاول العمل بهذه الوظيفة.





تعرض التلميحات الخاصة بـ findSongAlbum () تسميات وسيطات لا معنى لها



. لسوء الحظ ، لا يمنحنا هذا الأسلوب لاستخدام tuples أسماء وسيطات تعليمات برمجية (تسميات) مفيدة وموثوقة عند العمل مع دالة. بدلاً من ذلك ، يُقال لنا أن الحجج الخاصة بالوظيفة هيargs_0: string, args_1: string... من هذا المنشور ، يمكنني فقط معرفة ، على سبيل المثال ، أن الوسيطة الأولى يجب أن تكون من النوع string. arg_0لا تخبرني التسمية أن المعلمة الأولى للوظيفة يجب أن تكون اسم titleالمقطوعة الموسيقية التي أبحث عنها.



التعليمات البرمجية التي تعزز ميزات TypeScript 4.0



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



الآن Paramsسيتم تزويد كل عنصر من هذا النوع بتسمية سيتم عرضها في IDE عند استخدام الوظيفة findSongAlbum:



type Params: [title: string, artist: string]
const findSongAlbum: IQuery<Album, Params> = (title, artist) => {
  //   ...
  
  const albumName = '1989';
  return Promise.resolve({
     title: albumName
  });
}


وإليكم كيف يبدو العمل مع هذه الوظيفة.





تعرض تلميحات findSongAlbum () تسميات الوسيطات لمساعدتنا على فهم معنى هذه الحجج ، وهو أمر مفيد للغاية.كما



ترون الآن ، بدلاً من تلميح العرض ، arg_0: stringحصلنا على تلميح title: string. هذا يعني أننا نعرف الآن ليس فقط أن الوظيفة تحتاج إلى تمرير سلسلة نصية ، ولكن أيضًا ما يجب أن تحتويه هذه السلسلة بالضبط.



ما الذي تفتقده بشكل خاص في TypeScript؟






All Articles