كيفية التحقق من الأنواع في JavaScript دون استخدام TypeScript

تعرف على كيفية إضافة أنواع إلى JavaScript دون استخدام TypeScript

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

الآن ، استخدمته في بعض المشاريع التجريبية ولكني أميل إلى تجنب كتابة دروسي التعليمية في TypeScript لأسباب مختلفة.

الأول هو أنني أكتب في الغالب دروسًا للمبتدئين وأن TypeScript ليس عادةً ما يبدأ به الناس.

أيضًا ، أعتقد أنه إذا بدأت في كتابة الأشياء في TypeScript ، فسأحدث الارتباك - ما الذي أتحدث عنه؟

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

لذلك ، ألتزم بأساسيات منصة الويب بدلاً من التقنيات التي تبني عليها.

هكذا قال…

هناك أوقات يمكنني فيها الاستفادة من وجود أنواع في JavaScript. إنها مفيدة.

شكرا لهذا الفيديومن قبل الرائع بول لويس ، وجدت ذلكيمكننا بالفعل الحصول على أنواع في JavaScript، استخدامكود الاستوديو المرئي!

أولاً ، تحتاج إلى تثبيت TypeScript ، إذا لم تكن قد قمت بذلك بالفعل:

npm install -g typescript

ثم تضيف ملفtsconfig.jsonملف إلى جذر مشروعك. بافتراض أن لديك ملفات JavaScript بتنسيقsrcالمجلد ، هذا هو الحد الأدنى لمقدار التكوين الذي تحتاجه في هذا الملف:

{
  "compilerOptions": {
    "outFile": "../../built/local/tsc.js",
    "checkJs": true,
    "allowJs": true
  },
  "include": [
    "src/*"
  ]
}

يمكنك أن تقرر استبعاد المجلدات ، على سبيل المثال من الجيد استبعادهاnode_modules:

{
  "compilerOptions": {
    "outFile": "../../built/local/tsc.js",
    "checkJs": true,
    "allowJs": true
  },
  "include": [
    "src/*"
  ],
  "exclude": [
    "node_modules",
  ]
}

الآن ، يمكن لـ VS Code الإشارة إلى أخطاء الكتابة في كود JavaScript الخاص بنا.

ويمكنه القيام بذلك تلقائيًا ، دون الحاجة إلى القيام بأي شيء.

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

لنفترض أن لدينا هذه الوظيفة ، أينtimesيتم تعيين القيمة الافتراضية لـ 2:

const multiply = (aNumber, times = 2) => {
  return aNumber * times
}

الآن بما أن المعلمة الثانية لها قيمة افتراضية ، يمكننا استدعاء هذه الوظيفة مع

multiply(20)

لضرب 20 في 2 ، أو على هذا النحو لضربها في 10:

multiply(20, 10)

ولكن إذا مررت ، على سبيل المثال ، سلسلة كمعامل ثاني مثلmultiply(20, 'hey')، سيخبرك VS Code الآن بوجود مشكلة:

الوسيطة من النوع "" hey "" غير قابلة للتخصيص إلى معلمة من النوع "number"

رائع!

يمكننا إجراء هذا النوع من التحقق أيضًا من الوسائط التي ليس لها قيمة افتراضية. يمكنك القيام بذلك باستخدامJSDoc، والتي تُستخدم عادةً كمنشئ API ، وإضافة تلميحات الكتابة:

/**
 * @param {number} aNumber
 */
const multiply = (aNumber, times = 2) => {
  return aNumber * times
}

⚠️ لا تنسى المضاعفة**في بداية التعليق ، وإلا فلن تعمل الأمور كما هو متوقع.

الآن إذا حاولت الاتصالmultiply('ho!')ستحصل على خطأ أيضًا:

الوسيطة من النوع "ho!" "غير قابلة للتخصيص لمعلمة من النوع" number "

غير ذلكnumber، يمكنك ضبط الأنواع التالية:

  • null
  • undefined
  • boolean
  • string
  • Array
  • Object

مثال:

/**
 * @param {null} aNull
 * @param {undefined} anUndefined
 * @param {boolean} aBoolean
 * @param {string} aString
 * @param {Array} anArray
 * @param {Object} anObject
 */
const multiply = (aNull, anUndefined, aBoolean, aString, anArray, anObject) => {
  console.log(aNull, anUndefined, aBoolean, aString, anArray, anObject)
}

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


المزيد من دروس js: