مقدمة
ربما سبق لك العمل مع TypeScript عند استخدام مشروع تمهيدي أو أداة مثل Angular CLI. في هذا البرنامج التعليمي، ستتعلم كيفية إعداد مشروع TypeScript دون الحاجة إلى أداة تمهيدية. ستتعلم أيضًا كيفية عمل التجميع في TypeScript وكيفية استخدام أداة Linter في مشروع TypeScript الخاص بك.
المتطلبات الأساسية
- تم تثبيت أحدث إصدار من Node على جهازك.
- التعرف على
npm
الخطوة 1 - بدء مشروع TypeScript
لبدء مشروع TypeScript الخاص بك، تحتاج إلى إنشاء دليل لمشروعك:
mkdir typescript-project
انتقل الآن إلى دليل المشروع الخاص بك:
cd typescript-projectيمكنك تثبيت TypeScript عن طريق إعداد دليل المشروع الخاص بك:
npm i typescript --save-devمن المهم أن يكون العلم --حفظ-التطوير أضف TypeScript لأنه يخزّن TypeScript كاعتمادية تطوير. هذا يعني أن TypeScript ضروري لتطوير مشروعك.
بعد تثبيت TypeScript، يمكنك تهيئة مشروع TypeScript الخاص بك باستخدام الأمر التالي:
npx tsc --initnpm كما أن لديها أداة تسمى ن بي اكس الذي ينفذ الحزم القابلة للتنفيذ. ن بي اكس إنه يسمح لنا بتشغيل الحزم دون الحاجة إلى تثبيت عالمي.
طلب تي اس سي يُستخدم هنا لأنه المُجمِّع المُضمَّن في TypeScript. عند كتابة الكود في TypeScript، يتم تنفيذه تي اس سي يقوم بتحويل أو تجميع الكود الخاص بك إلى JavaScript.
استخدام العلم --init في الأمر أعلاه، يتم تهيئة مشروعك بإنشاء ملف tsconfig.json في دليل مشروع TypeScript. يتيح لك هذا الملف إجراء المزيد من التهيئة ومعرفة كيفية تفاعل TypeScript مع المُجمِّع. تي اس سي تخصيص. يمكنك إزالة وإضافة وتعديل التكوينات في هذا الملف لتلبية احتياجاتك على النحو الأمثل.
tsconfig.json افتحه في محرر النصوص الخاص بك للعثور على التكوين الافتراضي:
nano tsconfig.jsonسيكون هناك العديد من الخيارات، وسيتم شرح معظمها أدناه:
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Projects */
// "incremental": true, /* Enable incremental compilation */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
. . .
}
}يمكنك تخصيص إعدادات TypeScript عبر ملف tsconfig.json. على سبيل المثال، يمكنك إلغاء تعليق مدخل outDir وتعيينه إلى "./build"، مما سيضع جميع ملفات TypeScript المُجمّعة في هذا المجلد.
عن طريق تثبيت TypeScript وتثبيت الملف tsconfig.jsonالآن يمكنك الانتقال إلى برمجة تطبيق TypeScript وتجميعه.
الخطوة 2 - تجميع مشروع TypeScript
الآن يمكنك البدء في برمجة مشروع TypeScript الخاص بك. أنشئ ملفًا جديدًا باسم index.ts افتحه في محرر النصوص لديك. ألصق كود TypeScript التالي فيه index.ts يكتب:
const world = 'world';
export function hello(who: string = world): string {
return `Hello ${who}! `;
}مع وجود هذا الكود الخاص بـ TypeScript، مشروعك جاهز للتجميع. شغّل الأمر tsc من دليل مشروعك:
npx tscستلاحظ أن ملف JavaScript المجمّع index.js وملف sourcemap index.js.map تمت إضافتهما إلى مجلد البناء، إذا قمت بتحديده في ملف tsconfig.js.
index.js افتحه وسوف ترى كود JavaScript المترجم التالي:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const world = 'world';
function hello(who = world) {
return `Hello ${who}! `;
}
exports.hello = hello;قد يكون تشغيل مُجمِّع TypeScript في كل مرة تُجري فيها تغييرًا أمرًا مُملًا. لحل هذه المشكلة، يمكنك وضع المُجمِّع في وضع المراقبة، والذي سيُعيد تجميع الكود في كل مرة يُجرى فيها تغيير.
يمكنك تمكين وضع الساعة باستخدام الأمر التالي:
npx tsc -wلقد تعلمتَ كيفية عمل مُجمِّع TypeScript، ويمكنك الآن تجميع ملفات TypeScript بنجاح. يمكنك الارتقاء بمشاريع TypeScript الخاصة بك إلى مستوى أعلى من خلال إضافة مُحسِّن نصوص (linter) إلى سير عملك.
الخطوة 3 - استخدم Google TypeScript Style لملء وتصحيح الكود الخاص بك
يساعدك استخدام مُراجع النص (linter) في كتابة الشيفرة البرمجية على اكتشاف التناقضات وأخطاء بناء الجملة والسهو في الشيفرة البرمجية بسرعة. بالإضافة إلى ذلك، لا يساعدك دليل الأسلوب على ضمان جودة صياغة الشيفرة وتناسقها فحسب، بل يتيح لك أيضًا استخدام أدوات إضافية لتعزيز هذا الأسلوب. ومن الأدوات الشائعة في هذا المجال أداة eslint، التي تعمل بكفاءة مع العديد من بيئات التطوير المتكاملة (IDEs) لتسهيل عملية التطوير.
بمجرد تشغيل مشروعك، يمكنك استخدام أدوات أخرى في بيئة TypeScript لمساعدتك على تجنب إعداد ملف tsconfig.json يدويًا. تُعد أداة Google TypeScript Style إحدى هذه الأدوات. تُعرف أيضًا باسم GTS، وهي دليل أنماط، وورقة أنماط مضمنة، ومصحح أكواد تلقائي، كل ذلك في أداة واحدة. يساعدك استخدام GTS على تشغيل مشروع TypeScript جديد بسرعة، وتجنب القلق بشأن التفاصيل التنظيمية الصغيرة، والتركيز على تصميم مشروعك. كما توفر GTS إعدادات افتراضية، ما يعني أنك لن تحتاج إلى تخصيص العديد من الإعدادات.
ابدأ بتثبيت GTS:
npm i gts --save-devمن هنا، قم بتهيئة GTS باستخدام الأمر التالي:
npx gts initسيُنشئ الأمر أعلاه كل ما تحتاجه لبدء استخدام TypeScript، بما في ذلك ملف tsconfig.json وإعدادات التدقيق. سيتم أيضًا إنشاء ملف package.json إذا لم يكن لديك واحد بالفعل.
يؤدي تشغيل npx gts init أيضًا إلى إضافة نصوص برمجية مفيدة من npm إلى ملف package.json. على سبيل المثال، يمكنك الآن تشغيل npm run compile لتجميع مشروع TypeScript. للتحقق من أخطاء Curtain، يمكنك الآن تشغيل npm run check.
تم الآن تثبيت GTS ودمجه بشكل صحيح في مشروع TypeScript الخاص بك. سيسمح لك استخدام GTS في المشاريع المستقبلية بإعداد مشاريع TypeScript جديدة بسرعة مع الإعدادات اللازمة.
بما أن GTS يُقدّم نهجًا قائمًا على الآراء دون الحاجة إلى تهيئة، فإنه يستخدم قواعده الخاصة. تتبع هذه القواعد أفضل الممارسات، ولكن إذا كنت بحاجة إلى تغيير القواعد بأي شكل من الأشكال، يمكنك القيام بذلك عن طريق توسيع قواعد eslint الافتراضية. للقيام بذلك، أنشئ ملفًا في دليل مشروعك باسم .eslintrc لتوسيع قواعد النمط:
---
extends:
- './node_modules/gts'يتيح لك هذا إضافة أو تعديل قواعد الأسلوب التي يوفرها GTS.
نتيجة
في هذا البرنامج التعليمي، بدأتَ مشروع TypeScript بإعدادات مخصصة. كما دمجتَ نمط Google TypeScript في مشروع TypeScript الخاص بك. يساعدك استخدام GTS على بدء مشروع TypeScript جديد بسرعة. مع GTS، لن تحتاج إلى إعداد الإعدادات يدويًا أو دمج مُحلل لغوي (linter) في سير عملك.
