👪 👔 💲 ميزات TypeScript جديدة لتحسين الاستخدام 🚣🏿 👆🏿 🥑

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

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

ستناقش المادة ، التي ننشر ترجمتها اليوم ، بعض الميزات الجديدة المثيرة للاهتمام لـ TypeScript. للحصول على قائمة كاملة بابتكارات TypeScript ، ألق نظرة هنا .

الأشياء والمصفوفات الثابتة

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

تحسين سهولة الاستخدام باستخدام معلمات للقراءة فقط

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

function foo(s: ReadonlyArray<string>) { /* ... */ }
 
function foo(s: readonly string[]) { /* ... */ }

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

تحسين قابلية استخدام المتغيرات غير القابلة للتغيير باستخدام بنية البناء

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

باستخدام ReadonlyوReadonlyArrayيمكنك أن تخبر TypeScript أن النظام يجب أن يتعامل مع الكيانات كما لو كانت ثابتة بالفعل. هذا يعني أنه في كل مرة تتم فيها محاولة في الكود لتغيير مثل هذا الكيان ، سيتم إصدار رسالة خطأ.

interface Person { 
  name: string; 
}
 
const person = { 
  name: 'Will' 
} as Readonly<Person>;
person.name = 'Diana'; // !

في TypeScript 3.4 ، من بين الابتكارات الأخرى ، ظهر مفهوم التأكيد الثابت (بيان ثابت) ، الذي ينص على استخدام البناء as const. هذه طريقة مبسطة للإعلان عن الثوابت التي تحتوي على أشياء ومصفوفات غير قابلة للتغيير. يتم إنشاء مثل هذه الإعلانات بإضافة as constثابت إلى نهاية الإعلان. هذه الطريقة لها ميزة إضافية ، وهي أنه عند استخدامها ، لا تحتاج إلى تحديد النوع في البيان بشكل صريح as const.

const person = { 
        name: 'Will' 
} as const;
 
person.name = 'Diana'; // !
 
//      as const
const array = [1, 2, 3] as const; 
array.push(4); // !

نوع مساعد حذف

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

النوع المساعد Partialبوضع علامة على جميع خصائص الكائن على أنها اختيارية. قبل إصدار TypeScript 3.5 ، كما اتضح ، كنت أستخدم باستمرار آلية واحدة مثيرة للاهتمام في مشاريعي. هذا هو نفس استخدام النوع المساعد يسمح الآن بتحقيقه Omit. هذا النوع ، كما يوحي اسمه ، يسمح لك باستبعاد شيء من الأنواع الأخرى. Omitيقبل نوع المفاتيح ومزيجها ، ثم يعيد نوعًا جديدًا يتم استبعاد الخصائص التي وصفتها المفاتيح. لقد ولت الأيام عندما اضطررت لاستخدام Pickذلك Excludeلتنفيذ مستقلة عن وظائفOmit.

//     TypeScript 3.5
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
interface A { 
    propA?: string; 
    propB?: string; 
    propC?: string; 
}
 
type B = Omit<A, 'propA' | 'propC'>; 
const b: B = { propA: 'hi' }; // ;

ميزات JavaScript الجديدة المدعومة بواسطة TypeScript

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

تتم إضافة دعم ميزات JavaScript الجديدة بانتظام إلى برنامج التحويل البرمجي TypeScript. عادة ، يمكن تحويل الشفرة التي تنفذ هذه الميزات إلى رمز JavaScript متوافق مع جميع المتصفحات التي تدعم هدف بناء المشروع المحدد في tsconfig.json.

▍ تحقق من عدم وجود أي تعريف أو غير محدد

مطورو جافا سكريبت على دراية بمفهوم الحقيقة والزيف. عند التحقق من الحقيقة يمكن تحديد 6 قيم ، وهي دائما خاطئة: 0، null، undefined، «»، NaN، وبالطبع false. في أغلب الأحيان ، يحتاج المطور إلى معرفة ما إذا كانت القيمة صحيحة أم خاطئة ، ولكن في بعض الحالات تحتاج فقط إلى معرفة ما إذا كانت القيمة التي يتم التحقيق فيها هي قيمة حقيقية nullأو undefined. على سبيل المثال ، في حالة الضرورة للتمييز بين الكود 0و undefined:

//  ||     ,  index  0
const getValueOrOne = (x?: number) => index || 1; 
getValueOrOne(0); // 1 <--

سيعمل هذا الرمز عن طريق تعيين xالقيمة المكتوبة عليه index، في جميع الحالات باستثناء تلك التي تكون فيها القيمة indexمتساوية 0. لكي يعمل هذا الرمز بشكل صحيح في أي موقف ، يجب إعادة كتابته باستخدام مخطط اختبار أكثر تعقيدًا لمعرفة النوع الحقيقي للقيمة.

//   ,    
const getValueOrOne = (x?: number) => index !== null && index !== undefined ? : 1; 
getValueOrOne(0); // 0

يعمل الرمز الآن ، ولكنه يتطلب استخدام عمليات تحقق أكثر تعقيدًا. يقوم عامل التشغيل الجديد للتحقق من القيمة nullو undefined(يبدو مثل علامتي استفهام - ??) بتبسيط عمليات التحقق هذه من خلال إرجاع القيمة الموجودة في الجزء الأيسر ، إذا كانت لا تساوي nullو undefined. خلاف ذلك ، فإنه يعيد ما هو على الجانب الأيمن.

// !
const getValueOrOne = (x?: number) => index ?? 1; 
getValueOrOne(0); // 0
getValueOrOne(2); // 2
getValueOrOne(); // 1

sequ تسلسل اختياري

ميزة أخرى جديدة لجافا سكريبت متاحة في TypeScript 3.7 هي عامل التشغيل لتنظيم التسلسلات الاختيارية ( ?.). التقيت لأول مرة مثل هذا العامل في لغة البرمجة Groovy. منذ ذلك الحين ، أردت أن تظهر في جافا سكريبت أيضًا. يتيح لك هذا العامل تنظيم الوصول إلى الخصائص المضمنة للكائنات دون الحاجة إلى التحقق المستمر من وجودها. إذا واجه هذا المُعامِل قيمة عند الوصول إلى خاصية ، undefinedفسوف يُرجع هذه القيمة ببساطة دون حدوث خطأ TypeError.

//    
const value = foo && foo.bar && foo.bar.baz;
 
//    
const value = foo?.bar?.baz;

مشغل تسلسل اختياري جنبا إلى جنب مع المشغل للتحقق من القيم nullو undefinedيعطي المطور حتى أكثر الاحتمالات، مما يسمح، على سبيل المثال، إلى الكتابة إلى متغير إما قيمة بعض الممتلكات المتداخلة للكائن، أو حالة عدم وجود مثل هذه الممتلكات، وبعض القيمة القياسية. إليك ما يبدو عليه:

const value = foo?.bar?.baz ?? 'default value';

class حقول الصف الخاصة

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

لا يتم التصريح عن الحقول الخاصة في JavaScript باستخدام مُعدِّل الوصول private. بدلاً من ذلك ، يتم الإعلان عنهم بوضع رمز في بداية أسمائهم #.

class Fan { 
    #on = false; 
    private name = 'fan';
 
    turnOn() { 
        this.#on = true; 
    }
   isTurnedOn() { 
        return this.#on; 
    }
}
 
const fan = new Fan(); 
fan.isTurnedOn(); // false  
fan.turnOn(); 
fan.isTurnedOn(); // true
 
fan.on; //  
fan.#on; // 
fan.name; //   ,    JS

جافا سكريبت تدعم الآن الحقول الخاصة ، اقتراح الطرق الخاصة في المرحلة الثالثة من الموافقة. في الوقت الحالي ، لا يمكن استخدام المعدِّل privateوالحرف #في اسم الحقل معًا. يمكن أن يكون كلا النهجين مفيدًا أثناء التطوير ، وأيهما يختار يعتمد على المبرمج. إليك ملف بودكاست يناقش بناء الجملة الجديدة للإعلان عن الحقول الخاصة.

▍ استخدام الكلمة الرئيسية المنتظرة في أعلى مستوى من التعليمات البرمجية

تعمل آليات البرمجة غير المتزامنة على توسيع قدرات JavaScript و TypeScript بشكل كبير. في البداية ظهرت وعود في هذا المجال ، ثم - تصميم async/awaitيسمح لك بكتابة كود غير متزامن أنظف.

إحدى الحالات التي يتم فيها استخدام الوعود ، وليس ، async/awaitهي استدعاء أسلوب غير متزامن خارج الوظيفة غير المتزامنة. على سبيل المثال ، في المستوى العلوي من الوحدة النمطية أو رمز التطبيق. كحل بديل في هذه الحالة ، يمكنك اقتراح إنشاء تعبير دالة غير متزامن يسمى على الفور (IIFE ، التعبير عن وظيفة تم استدعاؤها فورًا) وتنفيذ تعليمات برمجية غير متزامنة داخل مثل هذا التعبير.

(async () => { 
    const response = await fetch('https://api.github.com/users/sitepen'); 
    const data = await response.json(); 
    console.log(`Check out the blog at ${data.blog}`); 
})();

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

const response = await fetch('https://api.github.com/users/sitepen'); 
const data = await response.json();
 
export default { ...data };

بيئة تجربة TypeScript محسنة

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

ملخص

إن TypeScript هي أداة تساعدك على كتابة كود JavaScript أفضل وأكثر تعبيراً. تُسهل أدوات مساعد TypeScript حل المهام المعقدة ، مثل إعادة هيكلة وإعادة تسمية الكيانات ، التي تكون أكثر تعقيدًا في JavaScript العادي. يقدم TypeScript باستمرار آليات جديدة ، مثل Omitو as const. في اللغة ، يمكن للمرء أن يلاحظ تحسنًا مستمرًا في دعم الأنواع المعقدة. تطبق TypeScript بسرعة أحدث ميزات JavaScript. هذا هو السبب في أن الكثير من الناس يختارون TypeScript ، معتبرين أنها أداة ولغة ونظام بيئي.

القراء الأعزاء! ما هي ميزات TypeScript الجديدة التي تجدها أكثر إثارة للاهتمام؟

ميزات TypeScript جديدة لتحسين الاستخدام