تايب سكريبت و tsconfig.json

توضح هذه المقالة تايب سكريبت و tsconfig.json۔

بدءاً من الدور الأساسي لـ تايب سكريبت، سنشرح بأمثلة محددة كيف يعمل tsconfig.json داخل المشروع۔

YouTube Video

تايب سكريبت و tsconfig.json

تايب سكريبت هو 'جافاسكريبت مع الأنواع.'۔ ومع ذلك، لاستخدام تايب سكريبت بشكل فعال في المشاريع العملية، من الضروري فهم tsconfig.json بشكل صحيح وتهيئته بشكل مقصود۔

لماذا نحتاج إلى تايب سكريبت؟

أولاً، السبب الرئيسي لاستخدام تايب سكريبت هو 'القدرة على اكتشاف الأخطاء قبل التنفيذ.'۔

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

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

هذا 'الاكتشاف المبكر' يحسن بشكل كبير من كفاءة وجودة التطوير۔

كيف يتم تنفيذ تايب سكريبت؟

من حيث المبدأ، لا يمكن تنفيذ تايب سكريبت كما هو۔ يجب عليك تحويله إلى جافاسكريبت باستخدام tsc (مترجم تايب سكريبت).۔

1npm install -D typescript
2npx tsc --init

• عند تنفيذ هذه العملية، يتم إنشاء tsconfig.json، والذي يُعد الملف المركزي الذي يحدد سلوك مشروع تايب سكريبت۔

ما هو دور tsconfig.json؟

tsconfig.json هو ملف إعدادات يحدد 'أي ملفات'، 'بأي قواعد' و'كيفية تحويلها.'۔ على الرغم من أنه قد يبدو معقداً في البداية، إلا أن هناك بعض الإعدادات فقط التي تُعد مهمة حقاً۔

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• مع هذه الإعدادات فقط، يصبح تطوير تايب سكريبت حديث وآمن ممكناً۔

target: إصدار جافاسكريبت للإخراج

target يحدد مستوى مواصفات جافاسكريبت الناتج۔

1"target": "ES2020"

مع هذا، سيُخرج تايب سكريبت كود جافاسكريبت يعادل ES2020۔ للبيئات الأقدم، اختر ES5؛ ولأحدث البيئات فقط، اختر ES2022، إلخ۔

عند تحديد ESNext

1"target": "ESNext"

• ESNext يحدد إخراج أحدث صياغة جافاسكريبت متاحة كما هي۔ تايب سكريبت لا يقوم بتحويل الصياغة، بل يترك الأمر لبيئة التنفيذ مثل Node.js أو المتصفحات لمعالجتها۔

• لذلك، يعد ESNext مناسباً عند استهداف أحدث إصدارات Node.js فقط، أو عند استخدام Babel أو أداة تجميع لتحويل الكود بشكل منفصل۔ ومن ناحية أخرى، إذا لم تدعم بيئة التنفيذ أحدث الصيغ، فقد يؤدي ذلك إلى أخطاء وقت التشغيل، لذا يلزم الحذر۔

module: تحديد صيغة الوحدة (الموديول)

module يحدد صيغة الوحدة۔

1"module": "ESNext"

• ESNext هو المعيار في الواجهات الأمامية وبيئات Node.js الحديثة۔
• اختر "CommonJS" فقط إذا كنت بحاجة إلى CommonJS۔

strict: تعظيم أمان الأنواع

strict هو مفتاح لتعظيم أمان تايب سكريبت۔

1"strict": true

• تمكين هذا الخيار سيكشف بشكل كامل الأنواع الغامضة والأخطاء المحتملة۔

وضع strict وany الضمني

عند تفعيل strict، يعامل تايب سكريبت المتغيرات التي لا يمكن استنتاج نوعها كخطأ۔

1function printValue(value) {
2	console.log(value);
3}

• هذا المتغير value لا يحتوي على معلومات النوع عند الإعلان عنه، لذا لا يستطيع تايب سكريبت تحديد نوعه۔ وبالتالي، يتم استخدام النوع any بشكل ضمني، مما سيؤدي إلى تحذير (خطأ) في وضع strict۔

1function printValue(value: number) {
2	console.log(value);
3}

• من خلال تحديد النوع بشكل صريح هكذا، يستطيع تايب سكريبت فهم أن 'هذا المتغير يتعامل فقط مع الأرقام.'۔ في تايب سكريبت، من المهم أكثر أن يتم تحديد النوع بشكل فريد من إمكانية تجاهل تحديد النوع۔

include/exclude: التحكم في الملفات التي سيتم ترجمتها

في tsconfig.json، يمكنك تحديد الملفات التي سيتم تضمينها و الملفات التي سيتم استبعادها من الترجمة۔

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• باستخدام هذا، سيتم إدارة الملفات داخل src فقط من قبل تايب سكريبت۔
• سيتم استبعاد node_modules المحددة في exclude من الترجمة حتى لو كانت ضمن المسارات المحددة في include۔

outDir: تحديد مجلد الإخراج

حدد outDir لإدارة مكان إخراج الملفات المترجمة۔

1"outDir": "dist"

• مع هذا، سيتم إخراج جميع النتائج المترجمة إلى مجلد dist۔ عملياً، فصل كود المصدر عن نواتج البناء هو المعيار۔

rootDir: تحديد مجلد المصدر

rootDir يحدد المجلد الذي يعامله تايب سكريبت كمصدر رئيسي للكود۔

1"rootDir": "src"

• هذا الإعداد يسمح لـ تايب سكريبت بالحفاظ على هيكلية المجلدات بناءً على src عند إخراج الملفات۔ على سبيل المثال، سيتم إخراج src/index.ts كـ dist/index.js۔

• سيتم تكرار هيكلية المجلد المحددة في rootDir في outDir۔

esModuleInterop: الربط بين CommonJS وES Modules

بعد ذلك، دعونا نستعرض esModuleInterop۔

1"esModuleInterop": true

• عند تفعيل هذا الخيار، يمكنك استخدام وحدات CommonJS بأمان مع بنية import۔

1import fs from "fs";

• هذا الإعداد أساسي تقريباً عند استخدام Node.js۔

noImplicitAny: منع استخدام النوع 'any' الضمني

من المهم أيضاً تعزيز تدقيق الأنواع في tsconfig.json۔

1"noImplicitAny": true

• باستخدام هذا، يمكنك منع استخدام الأنواع الضمنية any۔ يتيح لك هذا اكتشاف الأماكن التي نسيت فيها تحديد النوع بشكل موثوق۔

إعدادات لاكتشاف الكود غير المستخدم

تعد الإعدادات التي تكتشف الكود غير المستخدم مفيدة أيضاً لتحسين قابلية الصيانة۔

1"noUnusedLocals": true,
2"noUnusedParameters": true

• مع هذا، سيتم وضع تحذيرات فوراً للمتغيرات والمعاملات غير الضرورية۔

lib: تحديد واجهات برمجة التطبيقات المدمجة المتاحة للاستخدام

lib هو إعداد يحدد واجهات برمجة التطبيقات القياسية التي يفترض تايب سكريبت وجودها۔

1"lib": ["ES2020", "DOM"]

• مع هذا الإعداد، تصبح الأنواع التالية متاحة:۔ مع ES2020، تصبح الميزات الحديثة مثل Promise وMap وSet متاحة۔ مع DOM، تصبح واجهات برمجة التطبيقات الخاصة بالمتصفح مثل document وwindow وHTMLElement متاحة۔

في الواجهة الأمامية، قم بتضمين DOM؛ وللمشاريع التي تعمل على Node.js فقط، احذف DOM لتجنب تضمين الأنواع العامة غير الضرورية۔

moduleResolution: قواعد البحث عن الوحدات

moduleResolution يحدد كيفية حل الوحدات المذكورة في أوامر import۔

1"moduleResolution": "Node"

الخياران الرئيسيان هما كما يلي:۔

• إذا قمت بتحديد Node، يتم استخدام قواعد حل وحدات Node.js۔
• Classic هو الطريقة القديمة والخاصة بـ تايب سكريبت، لكنه نادراً ما يستخدم اليوم۔

في البيئات التي تستخدم Node.js أو أداة تجميع، من الآمن تحديد Node بشكل صريح۔

ملف tsconfig.json بسيط وجاهز للإنتاج

استنادًا إلى ما ناقشناه حتى الآن، ملف tsconfig.json بسيط وجاهز للإنتاج سيبدو هكذا:۔

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

يوفر هذا التكوين أساساً آمناً لكل من مشاريع الواجهة الأمامية وNode.js۔

الملخص: tsconfig.json هو 'كتاب القواعد'

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

• مستوى أمان الأنواع۔
• اتفاقيات التكويد لفريقك۔
• منع الأخطاء المستقبلية۔

من خلال فهم tsconfig.json، ستتمكن من ليس فقط كتابة تايب سكريبت، بل أيضاً تصميم مشاريعك لاستخدام تايب سكريبت بشكل آمن۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video