☀️ 🖕🏼 ➰ استخدام TypeScript في JavaScript دون كتابة TypeScript ✋🏾 🌺 🍥

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

صحيح ، لا تتضمن جميع المشاريع الأمامية TypeScript. ماذا لو كان بإمكانك استخدام إمكانيات TypeScript ، ولكنك لا تترجم المشروع بأكمله (والفريق بأكمله) إليه وإضافة أداة جديدة إلى خط تجميع المشروع؟ هذا ممكن بفضل VS Code و JSDoc.

تهيئة بيئة العمل

▍ الخيار رقم 1. إعدادات كود VS (التحقق العام)

الطريقة الأولى لاستخدام TypeScript (TS) في المشاريع المكتوبة بلغة JavaScript (JS) هي استخدام TS للتحقق من صحة جميع ملفات JS. يتم ذلك عن طريق تضمين معلمة عالمية واحدة VS Code. يمكن تمكين هذه المعلمة في إعدادات المستخدم أو مساحة العمل:

"javascript.implicitProjectConfig.checkJs": true

إذا كنت أحد أولئك الذين يفضلون استخدام الواجهة الرسومية ، فيمكنك تمكينها كما هو موضح أدناه.

تمكين التحقق من TypeScript JS

ption الخيار رقم 2. استخدام ملف jsconfig.json (التحقق العام)

هناك خيار آخر لتمكين التحقق من صحة رمز JS العالمي باستخدام TS وهو استخدام ملف jsconfig.json. في حالة وجود مثل هذا الملف ، فإن الإعدادات المحددة فيه ستلغي الإعدادات المحددة في كود VS.

{
  "compilerOptions": {
    "checkJs": true
  }
}

▍ الخيار رقم 3. تمكين التحقق من صحة الملفات الفردية

الطريقة الثالثة لاستخدام TypeScript للتحكم في كود JS هي تمكين التحقق على مستوى الملف الفردي. وهو يتألف من إضافة التعليق المطابق إلى بداية الملف:

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

باستخدام نفس الفكرة ، يمكنك إيقاف فحص TS لملف JS واحد. يتم ذلك إذا تم تمكين التحقق TS عالميًا باستخدام الطرق الموضحة أعلاه. يتم استخدام تعليق خاص هنا أيضًا:

// @ts-nocheck
let easy = 'abc';
easy = 123; //

وإذا كنت تريد أن يتجاهل TypeScript جزءًا فقط من الملف ، فيمكنك القيام بذلك:

let easy = 'abc';
// @ts-ignore
easy = 123; //

كتابة كود باستخدام JSDoc

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

ypTypization من الوظائف

يمكنك البدء في كتابة التعليمات البرمجية باستخدام JSDoc مع وصف لما تقبله الوظائف كإدخال:

/**
 * @param {number} shippingVal
 */
updateShipping(shippingVal) {
    ...
}

بعد ذلك ، سيتمكن المحرر من إعطاء تلميحات حسب النوع.

تلميح عن نوع القيمة المقبولة بواسطة الوظيفة

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

/**
* @typedef {Object} CreditNoteTaxResponseViewModel
* @property {number} feeAmount
* @property {number} inclGst
* @property {number} subTotal
* @property {number} total
*
* @typedef {Object} ApiResponse
* @property {string} status
* @property {string} message
* @property {CreditNoteTaxResponseViewModel} response
*/

يمكن استخدام هذه الأوصاف عند الضرورة:

/**
                * @param {CreditNoteTaxRequestViewModel} req
                * @returns {Promise<ApiResponse>}
                */
                createCreditNoteTaxApiCall(req) {
        ...
                }

حالة استخدام أخرى لهذه التقنية هي نقل تعريفات النوع إلى ملفات خاصة. دعنا نقول يمكن استدعاء مثل هذا الملف main.d.ts.

export interface ICreditNoteTaxRequestViewModel{
    orderID: number;
    shippingCredit: number;
    lines: IICreditNoteTaxLineViewModel[]
}

export interface ICreditNoteTaxLineViewModel{
    originalOrderLineID:number;
    creditQuantity: number;
}

export interface ICreditNoteTaxResponseViewModel{
    feeAmount: number;
    inclGst: number;
    subTotal: number;
    total: number;
}

export interface IApiResponse{
    status: string;
    status: message;
    response: ICreditNoteTaxResponseViewModel;
}

يمكن استخدام هذه الأنواع في JavaScript:

/**
   * @param {import("./main").ICreditNoteTaxRequestViewModel} req
   * @returns {Promise<import("./main").IApiResponse>}
   */
  function createCreditNoteTaxApiCall(req) {
    ///  
    return;
  }

ypTypification من التعليمات البرمجية العادية

تحل الأمثلة أعلاه مشكلة كتابة قيم المدخلات والمخرجات للوظائف. يمكن القيام بشيء مماثل باستخدام تعليقات JSDoc المدمجة.

كتابة متغير عادي

yp تنميط المكتبات

يحتوي VS Code على نظام للحصول تلقائيًا على أنواع مكتبات الجهات الخارجية. ينطبق الإجراء المقابل على جميع الحزم الموضحة في الملف package.json. ولكن ، إذا فضل شخص ما تعيين هذا بشكل صريح ، فيمكنه ضبط الإعدادات المناسبة في jsconfig.json:

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

بعد أن يعالج النوع الذي يحصل على النظام المكتبة ، يمكن استخدام الأنواع في JSDoc:

/**
 * @param {JQuery<HTMLElement>} $itemRow
 */
initRow($itemRow) {
    ...
}

التبديل إلى TypeScript

إذا قررت تحويله إلى مشروع نسخة مطبوعة على الآلة الكاتبة وجافا سكريبت، في بعض أجزاء من الذي يستخدم نسخة مطبوعة على الآلة الكاتبة، يمكنك ببساطة تسميته jsconfig.jsonإلى tsconfig.jsonوتشمل المعلمة في ذلك allowJs:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}

بعد ذلك ، يمكنك البدء في إعادة تسمية *.jsالملفات إلى *.tsالملفات وكتابة كود هذه الملفات. يمكن أن تحدث عملية ترجمة المشروع إلى TypeScript بشكل تدريجي.

ملخص

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

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

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

القراء الأعزاء! ما رأيك بفكرة التحقق من النوع في كود JS باستخدام ميزات TypeScript؟

استخدام TypeScript في JavaScript دون كتابة TypeScript