عرض مصدر TypeScript/module resolution

<noinclude>{{DISPLAYTITLE:تقرير الوحدات في TypeScript}}</noinclude>

قراءة هذه الصفحة تتطلّب فهمًا عامًّا للوحدات. انظر [[TypeScript/modules|توثيق الوحدات]] للاستزادة.

تقريرُ (أو حلُّ) الوحداتِ (Module resolution)، هي العمليّة التي يعتمد عليها المترجم (compiler) لاكتشاف ما يُشير إليه استيرادٌ (import) معيّن. لنفترض مثلًا أنّ لدينا جملة استيرادٍ كما يلي: ‎<code>import { a } from "moduleA"‎</code>‎؛ للتحقّق من أيّ اعتمادٍ على المتغيّر ‎<code>a</code>‎، فإنّ المترجم بحاجةٍ إلى فهم ما يُمثّله المتغيّر بالضبط، وسيتطلّب ذلك التحقق من تعريفه في الوحدة ‎<code>moduleA</code>‎.

سيسأل المُترجم كبدايةٍ عن شكل الوحدة ‎<code>moduleA</code>‎، وقد تكون الوحدة مُعرّفةً داخل أحد ملفّات ‎<code>.ts</code>‎ أو ‎<code>.tsx</code>‎ أو في ملفّ ‎<code>.d.ts</code>‎ من الملفّات التي تعتمد عليها الشيفرة التي تكتبها.

أولًا، سيُحاول المترجم العثور على ملفّ يُمثّل الوحدة المُستَورَدَة. وللقيام بذلك يتّبع المترجم أحدَ استراتيجيّتَيْن: Classic أو Node. تُخبِر هاتان الاستراتيجيّتان المترجمَ عن المكان الذي يجب بدء البحث عن الوحدة ‎<code>moduleA</code>‎ منه.

إذا لم ينجح هذا وإذا كان اسم الوحدة غير نسبيّ (non-relative) (وفي حالة ‎<code>"moduleA"</code>‎ فالاسم غير نسبيّ)، بعدها سيحاول المترجم العثور عن تصريح وحدة محيطة (ambient module declaration). سنُغطّي  الاستيرادات غير النسبية تاليًّا.

وإن لم يستطع المترجم تقرير الوحدة (أي العثور على ملفّ يُمثّلها)، فسيُسجَّل خطأ، في هذه الحالة سيكون نصّ الخطأ شبيها بالنّص ‎<code>error TS2307: Cannot find module 'moduleA'</code>‎.

==استيرادات الوحدات النسبيّة (Relative) وغير النسبية (Non-relative)==
تُقرَّر استيرادات الوحدات بطريقة مختلفة حسب ما إذا كانت الإحالة (reference) نسبيّةً أو غير نسبيّة.

الاستيرادُ النسبيّ هو كلّ ما يبدأ بالمقطع ‎<code>/</code>‎، أو ‎<code>./‎</code>‎، أو ‎<code>../‎</code>‎. وهذه بعض الأمثلة على ذلك:

* ‎<code>import Entry from "./components/Entry"‎;‎</code>‎
* ‎<code>‎import { DefaultHeaders } from "../constants/http"‎;‎</code>‎
* ‎<code>‎import "/mod";‎</code>‎

وأيّ استيرادٍ آخر سيُعدّ غير نسبيّ. وهذه بعض الأمثلة على الاستيرادات غير النسبيّة:
* ‎<code>import * as $ from "jquery";‎</code>‎
* ‎<code>‎import { Component } from "@angular/core"‎;‎</code>‎

تُقرَّر الاستيرادات النسبيّة نسبةً إلى الملفّ المستورِد ولا يُمكن عندئذٍ التقريرُ إلى تصريح وحدة محيطة. يجب عليك استخدام الاستيرادات النسبيّة لاستيراد وحداتك الخاصّة التي تُدرِك يقينًا أنّ مكانها النسبيّ لن يتغيّر أثناء التنفيذ (runtime).

يُمكن تقرير الاستيرادات غير النسبيّة نسبةً إلى قيمة ‎<code>baseUrl</code>‎، أو عن طريق تخطيط المسار (path mapping)، واللذان سيُشرَحان أدناه. يُمكن كذلك أن تُقرَّر إلى تصريحات وحدات محيطة. استخدم المسارات غير النسبيّة عند استيراد أي من الاعتماديات الخارجيّة (كالمكتبات والوحدات التي تُثبّت خارجيًّا).

==استراتيجيتا تقرير الوحدات==
هناك استراتيجيتان ممكنتان لتقرير الوحدات: Node و Classic. يُمكنك استخدام الخيار ‎<code>--moduleResolution</code>‎ لتحديد استراتيجيّة تقرير الوحدات. إذا لم تُحدَّد الاستراتيجيّة فالاستراتيجيّة الافتراضيّة هي Classic لأنظمة تحميل الوحدات ‎<code>--module AMD | System | ES2015</code>‎ وتُستَخدَم استراتيجيّة Node في غير ذلك من حالات.

=== استراتيجيّة Classic===
كانت استراتيجيّةُ Classic استراتيجيّةَ التقرير الافتراضيّة في TypeScript. أمّا الآن فهذه الاستراتيجيّة موجودة بشكل رئيسيّ لتوفير التوافقيّة العكسيّة (backward compatibility).

ستُقرَّر الاستيرادات النسبيّة نسبةً للملفّ المستورِد. لذا فالاستيرادُ ‎<code>import { b } from "./moduleB"‎</code>‎ في الملفّ المصدريّ ‎<code>/root/src/folder/A.ts‎</code>‎ سيُنتِج عمليّات البحث التاليّة:

# ‎<code>/root/src/folder/moduleB.ts</code>‎
# ‎<code>/root/src/folder/moduleB.d.ts</code>‎

أمّا بالنّسبة لاستيرادات الوحدات غير النّسبيّة، فسيمُرّ المترجم إلى أعلى شجرة المجلّدات (directory tree) بدايةً من المجلّد الذي يحتوي على الملفّ المُستورِد، في مُحاولةٍ لإيجاد ملفّ تعريفٍ متوافِق.

على سبيل المثال:

لنفترض أنّنا في ملفّ مصدريّ ‎<code>/root/src/folder/A.ts</code>‎، ونستورِد من الوحدة ‎<code>moduleB</code>‎ بشكلٍ غير نسبيّ بالجملة ‎<code>import { b } from "moduleB"</code>‎ مثلًا. هذا الاستيراد سيُؤدي إلى محاولة البحث عن ‎الوحدة ‎<code>"moduleB"</code>‎ في المواقع التّاليّة:

# ‎<code>/root/src/folder/moduleB.ts</code>‎
# ‎<code>/root/src/folder/moduleB.d.ts</code>‎
# ‎<code>/root/src/moduleB.ts</code>‎
# ‎<code>/root/src/moduleB.d.ts</code>‎
# ‎<code>/root/moduleB.ts</code>‎
# ‎<code>/root/moduleB.d.ts</code>‎
# ‎<code>/moduleB.ts</code>‎
# ‎<code>/moduleB.d.ts</code>‎

=== استراتيجيّة Node===
تسعى استراتيجيّة التقرير Node لمحاكاة آليّة تقرير الوحدات أثناء التنفيذ في Node.js. يُمكنك الاطلاع على كامل خوارزمية التقرير في Node.js في [[Node.js/modules|توثيق وحدات Node.js]].

====كيفية تقرير الوحدات في Node.js====
قبل فهم الخطوات التي سيتبعها مترجم TypeScript، من المهمّ أولًا إلقاء نظرة على وحدات Node.js. تتمّ الاستيرادات في Node.js عادةً عبر استدعاء دالّةٍ تُسمّى ‎<code>require</code>‎. يختلف السلوك الذي تسلكه منصّة Node.js حسب ما إذا أُعطِيَت الدالةُ ‎<code>require</code>‎ مسارًا نسبيًّا أو مسارًا غير نسبيّ.

المسارات النسبيّة واضحة. على سبيل المثال، لنفترض أنّ ملفًّا موجودًا في المسار ‎<code>/root/src/moduleA.js</code>‎ يحتوي على جملة الاستيراد ‎<code>var x = require("./moduleB");</code>‎. سوف تُقرّر منصّة Node.js هذا الاستيراد باتباع الخطوات التاليّة:

# البحث عن ملفٍّ اسمُه ‎<code>/root/src/moduleB.js</code>‎ والاعتماد عليه إن وُجِد.
# اطلب من المجلّد ‎<code>/root/src/moduleB</code>‎ ما إذا كان يحتوي على ملفّ اسمه ‎<code>package.json</code>‎ يُحدِّد وحدة رئيسيّة في الخاصيّة ‎<code>‎"main"‎</code>‎ داخلَه. في مثالنا هذا، إذا وجدت Node.js ملفًّا اسمه ‎<code>/root/src/moduleB/package.json</code>‎ يحتوي على ‎<code>‎{ "main": "lib/mainModule.js" }‎</code>‎، فحينئذٍ سيُحال تقرير الوحدة إلى الملفّ ‎<code>/root/src/moduleB/lib/mainModule.js‎</code>‎.
# اطلب من المجلّد ‎<code>/root/src/moduleB</code>‎ ما إذا كان يحتوي على ملفّ اسمه ‎<code>index.js</code>‎. يُعدّ هذا الملفّ الوحدة الرئيسية ("main") لهذا المجلّد ضمنيًّا (implicitly).

يُمكنك معرفة المزيد عن هذا في توثيق Node.js، انظر [[Node.js/modules#.D9.88.D8.AD.D8.AF.D8.A7.D8.AA .D8.A7.D9.84.D9.85.D9.84.D9.81.D8.A7.D8.AA|قسم وحدات الملفّات]] و<nowiki/>[[Node.js/modules#.D8.A7.D9.84.D9.85.D8.AC.D9.84.D8.AF.D8.A7.D8.AA .D9.83.D9.88.D8.AD.D8.AF.D8.A7.D8.AA|قسم المجلدات كوحدات]].

لكن تقرير اسم وحدةٍ غير نسبيّ يُحدَّد بشكل مختلف. ستبحث Node عن وحداتك في مجلّداتٍ خاصّةٍ تُسمّى ‎<code>node_modules</code>‎. مجلّدُ ‎<code>node_modules</code>‎ مجلّدٌ يُمكن له أن يكون على نفس مستوى الملفّ الحاليّ أو أعلى من ذلك على سلسلة المجلّدات (أي المجلّد الأب للمجلّد الذي يحتوي على الملفّ الحالي أو مجلّده الأب إلخ...). ستمرّ Node على سلسلة المجلّدات باحثةً في كلّ مجلّد مُسمّى بالاسم ‎<code>node_modules</code>‎ حتى تجد الوحدةَ المرادُ تحميلُها.

لنستأنف المثال أعلاه، لنفترض أنّ الملفّ ‎<code>/root/src/moduleA.js</code>‎ يعتمد على مسار غير نسبيّ عوض ما سبق، وكان الاستيراد فيه على الشّكل ‎<code>var x = require("moduleB");‎</code>‎. ستُحاول Node هنا تقرير الوحدة ‎<code>moduleB</code>‎ في كلّ مسار من المسارات التاليّة حتى ينجح أحدها:

# ‎<code>/root/src/node_modules/moduleB.js</code>‎
# ‎<code>/root/src/node_modules/moduleB/package.json</code>‎ (إذا حدّد الملفُّ خاصيّةَ ‎<code>‎"main"‎</code>‎)
# ‎<code>/root/src/node_modules/moduleB/index.js</code>‎

ثمّ نقفز للأعلى في شجرة المجلّدات:

# ‎<code>/root/node_modules/moduleB.js</code>‎
# ‎<code>/root/node_modules/moduleB/package.json</code>‎ (إذا حدّد الملفُّ خاصيّةَ ‎<code>‎"main"‎</code>‎)
# ‎<code>/root/node_modules/moduleB/index.js</code>‎

نقفز مجدّدًا للأعلى في شجرة المجلّدات:

# ‎<code>/node_modules/moduleB.js</code>‎
# ‎<code>/node_modules/moduleB/package.json</code>‎
# ‎<code>/node_modules/moduleB/index.js</code>‎

يُمكنك معرفة المزيد حول هذه العمليّة في توثيق Node.js، انظر [[Node.js/modules#.D8.A7.D9.84.D8.AA.D8.AD.D9.85.D9.8A.D9.84 .D9.85.D9.86 .D9.85.D8.AC.D9.84.D8.AF.D8.A7.D8.AA node modules|قسم تحميل الوحدات من مجلّدات ‎<code>node_modules</code>‎]].

====كيفية تقرير الوحدات في TypeScript====
تُحاكي TypeScript استراتيجيّة التقرير أثناء التنفيذ (run-time resolution strategy) في Node.js للعثور على ملفّات التعريفات (definition files) للوحدات أثناء الترجمة. وللقيام بالأمر فإنّ TypeScript تُراكِبُ امتدادات ملفّات TypeScript المصدريّة (كلّ من ‎<code>.ts</code>‎ و‎<code>.tsx</code>‎ و‎<code>.d.ts</code>‎) على منطِق التقرير في Node. ستعتمد TypeScript كذلك على حقلٍ في ملفّ ‎<code>package.json</code>‎ يُسمّى ‎<code>"types"</code>‎ لمحاكاة الغرض من ‎<code>"main"</code>‎، أي أنّ المترجم سيستخدم الحقل للعثور على ملفّ التعريف الرئيسيّ.

على سبيل المثال، سينتجُ الاستيراد ‎<code>import { b } from "./moduleB"</code>‎ في الملفّ ‎<code>/root/src/moduleA.ts </code>‎ التحقّق من وجود الوحدة ‎<code>"./moduleB"‎</code>‎ في الأماكن التاليّة:

# ‎<code>/root/src/moduleB.ts</code>‎
# ‎<code>/root/src/moduleB.tsx</code>‎
# ‎<code>/root/src/moduleB.d.ts</code>‎
# ‎<code>/root/src/moduleB/package.json</code>‎ (إذا حدّد الملفُّ حقلَ ‎<code>"types"‎</code>‎)
# ‎<code>/root/src/moduleB/index.ts</code>‎
# ‎<code>/root/src/moduleB/index.tsx</code>‎
# ‎<code>/root/src/moduleB/index.d.ts</code>‎

تذكّر أن منصّة Node.js تبحث عن ملفّ اسمُه ‎<code>moduleB.js</code>‎، ثمّ ملفّ ‎<code>package.json</code>‎ يُمكن تطبيقه للبحث، ثمّ البحث عن ملفٍّ يُسمّى ‎<code>index.js</code>‎.

وبالمِثل فإنّ الاستيرادات غير النسبيّة تتّبع منطق تقرير Node.js، بالبحث أولًا عن ملفّ ثمّ عن مجلّد يُمكن البحث فيه. لذا فالاستيرادُ ‎<code>import { b } from "moduleB"‎</code>‎ في الملفّ المصدريّ ‎<code>/root/src/moduleA.ts‎</code>‎ سيُنتِج عمليّات البحث التاليّة:

# ‎<code>/root/src/node_modules/moduleB.ts</code>‎
# ‎<code>/root/src/node_modules/moduleB.tsx</code>‎
# ‎<code>/root/src/node_modules/moduleB.d.ts</code>‎
# ‎<code>/root/src/node_modules/moduleB/package.json</code>‎ (إذا حدّد الملفُّ حقلَ ‎<code>"types"‎</code>‎)
# ‎<code>/root/src/node_modules/moduleB/index.ts</code>‎
# ‎<code>/root/src/node_modules/moduleB/index.tsx</code>‎
# ‎<code>/root/src/node_modules/moduleB/index.d.ts</code>‎

ثمّ نقفز للأعلى في شجرة المجلّدات:
# ‎<code>/root/node_modules/moduleB.ts</code>‎
# ‎<code>/root/node_modules/moduleB.tsx</code>‎
# ‎<code>/root/node_modules/moduleB.d.ts</code>‎
# ‎<code>/root/node_modules/moduleB/package.json</code>‎ (إذا حدّد الملفُّ حقلَ ‎<code>"types"‎</code>‎)
# ‎<code>/root/node_modules/moduleB/index.ts</code>‎
# ‎<code>/root/node_modules/moduleB/index.tsx</code>‎
# ‎<code>/root/node_modules/moduleB/index.d.ts</code>‎

نقفز مجدّدًا للأعلى في شجرة المجلّدات:

# ‎<code>/node_modules/moduleB.ts</code>‎
# ‎<code>/node_modules/moduleB.tsx</code>‎
# ‎<code>/node_modules/moduleB.d.ts</code>‎
# ‎<code>/node_modules/moduleB/package.json</code>‎ (إذا حدّد الملفُّ حقلَ ‎<code>"types"‎</code>‎)
# ‎<code>/node_modules/moduleB/index.ts</code>‎
# ‎<code>/node_modules/moduleB/index.tsx</code>‎
# ‎<code>/node_modules/moduleB/index.d.ts</code>‎

باستثناء امتدادات الملفّات المُضافة، فهذه الخطوات هي نفسها ما كانت منصّة Node.js تقوم به.

===خيارات (flags) إضافيّة لتقرير الوحدات===
لا يوافِق أحيانا تخطيطُ مشروعٍ مصدريٍّ التخطيط الذي يُنتَج بعد التّرجمة. عادةً ما يُنتَج المُخرج النهائيّ بعد عدّة خطوات بناء (build steps). يشمل هذا ترجمة ملفّات ‎<code>.ts</code>‎ إلى ملفّات ‎<code>.js</code>‎، ونسخ الاعتماديّات من أماكن مصادر (source locations) مختلفة إلى مكان مُخرَج (output location) واحد. والنتيجة النهائيّة هي أنّ الوحدات أثناء التنفيذ قد تختلف أسماؤها عن أسماء الملفّات المصدريّة التي تحتوي على تعريفاتها. أو قد لا تُوافِق مسارات الوحدات في المُخرَج مسارات الملفّات المصدريّة ذات العلاقة أثناء الترجمة.

يمتلك مترجم TypeScript خياراتٍ (أو راياتٍ [flags]) لإعلام المترجم عن التحوّلات التي يُتوقَّع لها أن تحدث للمصادر لتوليد المُخرَج النّهائيّ.

من الجدير بالذّكر أنّ المترجم لن يُؤدّيَ أيًّا من هذه التحوّلات؛ بل يستخدم فقط هذه المعلومات لإرشاد عمليّة تقرير استيرادِ الوحدة إلى ملفِّ تعريفها.

==== عنوان URL الأساس (Base URL)====

استخدام عنوان URL أساس ‎<code>baseUrl</code>‎ شائعٌ في التطبيقات التي تعتمد على محمّلات الوحدات AMD التي تُنشَر (deployed) فيها الوحدات إلى مجلّد واحد أثناء التّنفيذ. يُمكن لمصادر هذه الوحدات أن تكون في مجلّدات مختلفة، لكن سكربت بناء (build script) سيجمعها جميعًا في مكان واحد.

يُعلِمُ تحديد عنوان ‎<code>baseUrl</code>‎ المترجِمَ بالأماكن التي ستوجد فيها الوحدات. تعدّ جميع استيرادات الوحدات غير النسبيّة متعلّقة بالعنوان ‎<code>baseUrl</code>‎.

تُحدَّد قيمة ‎<code>baseUrl</code>‎ على أنّها إمّا:

* قيمةُ معامل ‎<code>baseUrl</code>‎ في سطر الأوامر (إذا كان المسار المعطى نسبيًّا، فستُحسَب القيمة حسب المجلّد الحاليّ)
* قيمةُ الخاصيّة ‎<code>baseUrl</code>‎ في الملفّ ‎<code>tsconfig.json</code>‎ (إذا كان المسار المعطى نسبيًّا، فستُحسَب القيمة حسب  مكان الملفّ <code>tsconfig.json</code>)

لاحظ أنّ تحديد عنوان ‎<code>baseUrl</code>‎ لا يُؤثِّر على الاستيرادات النسبيّة للوحدات، إذ تُقرَّر دائمًا نسبةً للملفّ الذي يستورِدها.

يُمكنك معرفة المزيد حول <code>baseUrl</code> على توثيق [http://requirejs.org/docs/api.html#config-baseUrl RequireJS] وتوثيق [https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#baseurl SystemJS].

====تخطيط المسار (Path mapping)====
أحيانًا لا تكون الوحدات موجودة مباشرة في عنوان ‎<code>baseUrl</code>‎. على سبيل المثال، يُمكن لاستيراد الوحدة ‎<code>"jquery"</code>‎ أن يُترجَم أثناء التنفيذ إلى ‎<code>"node_modules/jquery/dist/jquery.slim.min.js"</code>‎. تستخدم محملات الوحدات إعداد تخطيط لتخطيط أسماء الوحدات وربطها بالملفات أثناء التنفيذ، انظر [http://requirejs.org/docs/api.html#config-paths توثيق RequireJs] و[https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#paths توثيق SystemJS].

يدعم مترجم TypeScript التصريح عن هذه التخطيطات باستخدام الخاصيّة ‎<code>"paths"</code>‎ في ملفّات ‎<code>tsconfig.json</code>‎. إليك مثالًا لكيفيّة تحديد خاصيّة ‎<code>"paths"</code>‎ لمكتبة ‎<code>jquery</code>‎:
<syntaxhighlight lang="typescript">
{
  "compilerOptions": {
    "baseUrl": ".", // من الواجب تحديد العنوان الأساس إذا حُدِّدت الخاصيّة
    "paths": {
      // هذا التخطيط نسبيّ نسبةً إلى قيمة عنوان
      // "baseUrl"
      "jquery": ["node_modules/jquery/dist/jquery"]
    }
  }
}
</syntaxhighlight>
لاحظ أنّه من الواجب تحديد العنوان الأساس ‎<code>"baseUrl"</code>‎  إذا حُدِّدت الخاصيّة ‎<code>"paths"</code>‎. لاحظ كذلك أنّ مسارات <code>"paths"</code> تقرَّرُ نسبةً إلى عنوان <code>"paths"</code>. عند ضبط قيمةِ ‎<code>"baseUrl"</code>‎ لتكون قيمةً مغايرةً للقيمة ‎<code>"."‎</code>‎ (أي المجلّد الذي يحتوي على الملفّ ‎<code>tsconfig.json</code>‎)، فمن الواجب تغيير التخطيطات  إلى ما يُلائم. لنقل مثلًا أنّك ضبطتَ العنوان إلى ‎<code>"baseUrl": "./src"‎</code>‎ في المثال أعلاه، هذا يعني أنّ ‎<code>jquery</code>‎ ستُخطَّط لترتبط بالمسار ‎<code>"../node_modules/jquery/dist/jquery"</code>‎.

يسمح استخدام ‎<code>"paths"</code>‎ كذلك بكتابة تخطيطات أدقّ، ما يشمل عدّة أماكن للرجوع إليها في حالة لم يوجد الملفّ المطلوب. لنقل مثلًا أنّ لدينا هيكل مشروعٍ توجد فيه بعض الوحدات في مكان واحد، وبقية الوحدات موجودة في مكان آخر. ستجمعها عمليّة بناء كلّها في مكان واحد. قد يبدو تصميم ملفّات المشروع كما يلي:
<syntaxhighlight lang="typescript">
projectRoot
├── folder1
│   ├── file1.ts (imports 'folder1/file2' and 'folder2/file3')
│   └── file2.ts
├── generated
│   ├── folder1
│   └── folder2
│       └── file3.ts
└── tsconfig.json
</syntaxhighlight>
ملفّ ‎<code>tsconfig.json</code>‎ المتعلّق بالمشروع سيبدو كما يلي:
<syntaxhighlight lang="typescript">
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "*",
        "generated/*"
      ]
    }
  }
}
</syntaxhighlight>
يُخبِر هذا المترجمَ أن يبحث عن أي وحدةٍ تُوافق النمط ‎<code>‎"*"‎</code>‎ (والذي يعني كافّة القيم) في مكانين اثنين:

# <code>‎"*"‎</code>: الذي يُشير إلى نفس الاسم دون تغيير، لذا اِرْبِط ‎<code><moduleName></code>‎ مع ‎<code><baseUrl>/<moduleName></code>‎.
# ‎<code>‎"generated/*"‎</code>‎: الذي يُشير إلى اسم الوحدة مع سابقة (prefix) ذات الاسم ‎<code>generated</code>‎ في بداية الاسم، لذا اربط ‎<code><moduleName>‎</code>‎ مع ‎<code>‎<baseUrl>/generated/<moduleName>‎</code>‎.

باتباع هذا المنطق، سيُحاول المترجم تقرير الاستيرادين كما يلي:

استيراد ‎<code>folder1/file2</code>‎:

# يُوافَق النمط ‎<code>*</code>‎ وسيُلتَقط كامل اسم الوحدة.
# جرّب أوّل إبدال في القائمة: أبدِل ‎<code>*</code>‎ بالاسم ‎<code>folder1/file2</code>‎.
# نتيجة الإبدال اسمٌ غير نسبيّ، أضف إليها عنوان ‎<code>baseUrl</code>‎، النتيجة: ‎<code>projectRoot/folder1/file2.ts</code>‎
# الملفّ موجود. انتهى.

استيراد ‎<code>folder2/file3</code>‎:

# يُوافَق النمط ‎<code>*</code>‎ وسيُلتَقط كامل اسم الوحدة.
# جرّب أوّل إبدال في القائمة: أبدِل ‎<code>*</code>‎ بالاسم ‎<code>folder2/file3</code>‎.
# نتيجة الإبدال اسمٌ غير نسبيّ، أضف إليها عنوان ‎<code>baseUrl</code>‎، النتيجة: ‎<code>projectRoot/folder2/file3.ts</code>‎.
# الملفّ غير موجود. انتقل إلى الإبدال الثّاني.
# الإبدال الثاني، أضف إليها السابقة ‎<code>generated/*‎</code>‎، النتيجة: ‎<code>generated/folder2/file3</code>‎
# نتيجة الإبدال اسمٌ غير نسبيّ، أضف إليها عنوان ‎<code>baseUrl</code>‎، النتيجة: ‎<code>projectRoot/generated/folder2/file3.ts</code>‎.
# الملفّ موجود. انتهى.

===المجلّدات الوهميّة (Virtual Directories) باستخدام ‎<code>rootDirs</code>‎===
تُجمَع أحيانًا مصادر المشروع من عدّة مجلّداتٍ أثناء التنفيذ لتجتمع جميعًا لتوليد مجلّد مُخرج (output directory) واحد. يُمكن تخيّل هذه الآليّة على أنّ مجموعة من المجلّدات المصدريّة تجتمع لإنشاء مجلّد وهميّ.

يُمكنك باستخدام ‎<code>rootDirs</code>‎ إخبارُ المترجم عن الجذور (roots) التي تُشكّل هذا المجلّد الوهمي؛ وبالتالي سيتمكّن المترجم من تقرير استيرادات الوحدات النسبيّة داخل هذه المجلدات الوهمية وكأنّها مجتمعة جميعًا في مجلّد واحد فقط.

لنأخذ على سبيل المثال بنية المشروع التالي:
<syntaxhighlight lang="typescript">
 src
 └── views
     └── view1.ts (يستورد './template1')
     └── view2.ts

 generated
 └── templates
         └── views
             └── template1.ts (يستورد './view2')
</syntaxhighlight>
تحتوي الملفات الموجودة في المجلّد ‎<code>src/views</code>‎ على شيفرة مستخدمٍ لبعض متحكمات واجهة المستخدم (UI controls). الملفّات الموجودة داخل المجلّد ‎<code>generated/templates</code>‎ تحتوي على شيفرة ربط قوالب واجهة المستخدم (UI template binding code) تُولَّد تلقائيًّا من طرف مولِّد قوالب (template generator) كجزء من عمليّة البناء. ستَنسخ عمليّة البناء الملفّات الموجودة في ‎<code>/src/views</code>‎ وتلك الموجودة في ‎<code>/generated/templates/views</code>‎ إلى نفس المجلَّد في المخرَج. ويُمكن أثناء التنفيذ أن يتوقّع عرضٌ (view) أن يكون قالبُه (template) بجانبه في نفس المجلّد، لذا فيجب استيراده باستخدام اسم نسبيّ مثل ‎<code>"./template"‎</code>‎.

استخدم خاصيّة ‎<code>"rootDirs"‎</code>‎ لتحديد هذه العلاقة للمترجم. تُحدِّد الخاصيّة ‎<code>"rootDirs"‎</code>‎ قائمة مجلدات جذور (roots) من المتوقَّع أن تُدمَج محتوياتها أثناء التنفيذ. لذا فباتّباع المثال أعلاه، يجب على الملفّ ‎<code>tsconfig.json</code>‎ أن يبدو كما يلي:
<syntaxhighlight lang="typescript">
{
  "compilerOptions": {
    "rootDirs": [
      "src/views",
      "generated/templates/views"
    ]
  }
}
</syntaxhighlight>
في كلّ مرّة يجد فيها المترجم استيراد وحدة نسبيّ في أحد المجلّدات الفرعيّة (subfolder) الموجودة داخل ‎<code>rootDirs</code>‎، فسيُحاول البحث عن هذا الاستيراد داخل كل مسار من المسارات الموجودة في ‎<code>rootDirs</code>‎.

مرونة ‎<code>rootDirs</code>‎ غير محدودة في تحديد قائمة مجلّداتٍ مصدريّةٍ دُمِجَت منطقيًّا فقط. يُمكن للمصفوفة المعطاة أن تحتوي على أي عدد من المجلّدات المخصّصة لأغراض معيّنة، أو أسماء مجلّداتٍ اعتباطية، بغض النظر عمّا إذا كانت هذه المجلّدات موجودة أو لا. يسمح هذا للمترجم بالتقاط ميّزات تجميع دقيقة وميّزات وقت تنفيذٍ معقّدة، مثل التضمين الشرطي (conditional inclusion) وإضافات المحمّلات الخاصّة بالمشروع (project specific loader plugins) بشكل يضمن أمان الأنواع (type safe).

لنفترض مثلًا أنّنا نُحاول تَدْوِيلَ (internationalization) مشروع معيّن ليدعم عدّة لغات، ستكون لدينا أداة بناء تُجمّع حزمات (bundles) خاصّة بكلّ محليّة (locale) عبر تحريف رمز مسار خاصّ، لنقل أنّنا سنستخدم الرّمز الخاصّ ‎<code>#{locale}‎</code>‎، كجزءٍ من مسار الوحدة النسبيّ مثل ‎<code>‎./#{locale}/messages‎</code>‎. في هذا المشروع الذي افترضناه ستقوم الأداة بإحصاء المحليّات المدعومة، وذلك بتخطيط المسار المجرَّد إلى ‎<code>./zh/messages‎</code>‎، و‎<code>./de/messages‎</code>‎، وما شابه ذلك لبقيّة المحليّات المدعومة.

لنقل أنّ كلّ وحدة من هذه الوحدات تُصدّر مصفوفة سلاسل نصيّة. على سبيل المثال قد يحتوي الملفّ ‎<code>./zh/messages</code>‎ على:

<syntaxhighlight lang="typescript">
export default [
    "您好吗",
    "很高兴认识你"
];
</syntaxhighlight>
يُمكننا باستخدام ‎<code>rootDirs</code>‎ إخبار المترجم عن هذا التخطيط، ما سيسمح بتقرير مسار ‎<code>./#{locale}/messages</code>‎ بأمان حتى ولو لم يكن المجلّد موجودًا (ولن يكون موجودًا أبدًا لأنّه لا يُمثّل مجلدا معيّنا بل رمزًا للمجلّدات فقط). على سبيل المثال، يُمكن استخدام ملفّ ‎<code>tsconfig.json</code>‎ كالتالي:
<syntaxhighlight lang="typescript">
{
  "compilerOptions": {
    "rootDirs": [
      "src/zh",
      "src/de",
      "src/#{locale}"
    ]
  }
}
</syntaxhighlight>
سيُقرِّر المترجم الآن الاستيراد ‎<code>import messages from './#{locale}/messages'‎</code>‎ ليكون ‎<code>import messages from './zh/messages'</code>‎ للأسباب التطويريّة، وبهذا سيكون التطوير قابلًا لدعم العديد من اللغات دون التضحية بدعم وقت التصميم (design time support).

===تتبّع عمليّة تقرير الوحدات===
يُمكن للمترجم كما ذكرنا سابقًا زيارة الملفات خارج المجلّد الحاليّ عند تقرير وحدة ما. قد يكون هذا صعبًا عند محاولة إيجاد سبب عدم تقرير وحدة معيّنة، أو لماذا تُقرَّر إلى التعريف الخطأ. يوفّر تفعيل تتبّع تقرير المترجم للوحدات باستخدام الخيار ‎<code>--traceResolution</code>‎ معلومات حول ما حدث أثناء عمليّة تقرير الوحدة.

لنقل أنّ لدينا تطبيقًا يستخدم الوحدة ‎<code>typescript</code>‎. ويحتوي الملفّ ‎<code>app.ts</code>‎ على الاستيراد ‎<code>import * as ts from "typescript"</code>‎:
<syntaxhighlight lang="typescript">
│   tsconfig.json
├───node_modules
│   └───typescript
│       └───lib
│               typescript.d.ts
└───src
        app.ts
</syntaxhighlight>
تشغيل المترجم بالخيار ‎<code>--traceResolution</code>‎:
<syntaxhighlight lang="typescript">
tsc --traceResolution
</syntaxhighlight>
النتيجة المُخرجَة ستكون كما يلي:
<syntaxhighlight lang="typescript">
======== Resolving module 'typescript' from 'src/app.ts'. ========
Module resolution kind is not specified, using 'NodeJs'.
Loading module 'typescript' from 'node_modules' folder.
File 'src/node_modules/typescript.ts' does not exist.
File 'src/node_modules/typescript.tsx' does not exist.
File 'src/node_modules/typescript.d.ts' does not exist.
File 'src/node_modules/typescript/package.json' does not exist.
File 'node_modules/typescript.ts' does not exist.
File 'node_modules/typescript.tsx' does not exist.
File 'node_modules/typescript.d.ts' does not exist.
Found 'package.json' at 'node_modules/typescript/package.json'.
'package.json' has 'types' field './lib/typescript.d.ts' that references 'node_modules/typescript/lib/typescript.d.ts'.
File 'node_modules/typescript/lib/typescript.d.ts' exist - use it as a module resolution result.
======== Module name 'typescript' was successfully resolved to 'node_modules/typescript/lib/typescript.d.ts'. ========
</syntaxhighlight>
# يحاول المترجم أولًا تقرير الوحدة ‎<code>'typescript'</code>‎ التي استورِدَت في الملفّ ‎<code>'src/app.ts'</code>‎.
# استراتيجيّة التقرير غير محدّدة، سيستعمل المترجم الخيار ‎<code>'NodeJs'</code>‎.
# تحميل الوحدة ‎<code>'typescript'</code>‎ من مجلّد ‎<code>'node_modules'</code>‎.
# الملفّ ‎<code>'src/node_modules/typescript.ts'</code>‎ غير موجود.
# الملفّ ‎<code>'src/node_modules/typescript.tsx'</code>‎ غير موجود.
# الملفّ ‎<code>'src/node_modules/typescript.d.ts'</code>‎ غير موجود.
# الملفّ ‎<code>'src/node_modules/typescript/package.json'</code>‎ غير موجود.
# الملفّ ‎<code>'node_modules/typescript.ts'</code>‎ غير موجود.
# الملفّ ‎<code>'node_modules/typescript.tsx'</code>‎ غير موجود.
# الملفّ ‎<code>'node_modules/typescript.d.ts'</code>‎ غير موجود.
# وُجِد الملفّ ‎<code>'package.json'</code>‎ في ‎<code>'node_modules/typescript/package.json'</code>‎.
# يمتلك الملفّ ‎<code>'package.json'</code>‎ الخاصيّة ‎<code>'types'</code>‎ قيمتها ‎<code>'./lib/typescript.d.ts'</code>‎ تُشير إلى الملفّ ‎<code>'node_modules/typescript/lib/typescript.d.ts'</code>‎.
# الملفّ ‎<code>'node_modules/typescript/lib/typescript.d.ts'</code>‎ موجود، استعمله كنتيجة عمليّة تقرير الوحدة.
# قُرِّرَت الوحدة ‎<code>'typescript'</code>‎ بنجاح إلى الملفّ ‎<code>'node_modules/typescript/lib/typescript.d.ts'</code>‎.

====المعلومات المهمة====

- اسم ومكان الاستيراد: تقرير الوحدة ‎<code>'typescript'</code>'''‎''' التي استورِدَت في الملفّ ‎'''<code>'src/app.ts'</code>‎'''

- الاستراتيجيّة التي يستخدمها المترجم: ‎<code>'NodeJs'</code>‎

- تحميل الأنواع من حزم npm: يمتلك الملفّ ‎<code>'package.json'</code>‎ الخاصيّة '''‎<code>'types'</code>‎''' قيمتها ‎<code>'./lib/typescript.d.ts'</code>‎ تُشير إلى الملفّ ‎<code>'node_modules/typescript/lib/typescript.d.ts'</code>‎.

- النتيجة النهائية: قُرِّرَت الوحدة ‎<code>'typescript'</code>‎ '''بنجاح''' إلى الملفّ ‎<code>'node_modules/typescript/lib/typescript.d.ts'</code>‎.

===استخدام الخيار ‎<code>--noResolve</code>‎===
سيحاول المترجم افتراضيًّا تقرير جميع استيرادات الوحدات قبل بداية عمليّة الترجمة. في كل مرّة ينجح فيها تقرير استيراد ملفّ ما، فسيُضاف الملفّ إلى قائمة الملفّات التي سيُعالجها المترجم لاحقًا.

يُرشِد خيار المترجمِ ‎<code>--noResolve</code>‎ المترجمَ إلى عدم إضافة أي ملفّات إلى عمليّة الترجمة إلّا تلك التي تُمرَّر عبر سطر الأوامر. لكن سيحاول المترجم رغم ذلك تقرير الوحدات إلى الملفّات، لكن إن لم يُحدَّد الملفّ، فلن يُشمَل في عمليّة الترجمة. على سبيل المثال:

(الملفّ ‎<code>app.ts</code>‎)
<syntaxhighlight lang="typescript">
// حسنًا مُرِّرت الوحدة
// 'moduleA'
// عبر سطر الأوامر
import * as A from "moduleA"

// خطأ TS2307
// لا يمكن إيجاد الوحدة
// 'moduleB'
import * as B from "moduleB"
</syntaxhighlight>

الترجمة:

<syntaxhighlight lang="typescript">
tsc app.ts moduleA.ts --noResolve
</syntaxhighlight>

ستُنتِج ترجمة الملفّ ‎<code>app.ts</code>‎ باستخدام ‎<code>--noResolve</code>‎ النتيجة التالية:

* العثور على الوحدة ‎<code>moduleA</code>‎ لأنّها مُرِّرَت عبر ‎سطر الأوامر.
* خطأ لعدم العثور على الوحدة ‎<code>moduleB</code>‎ لأنها لم تُمرَّر.

===أسئلة شائعة===
====لماذا لا تُستبعَد الوحدات الموجودة في قائمة ‎<code>exclude</code>‎ من طرف المترجم؟====
يُحوِّل الملفّ ‎<code>tsconfig.json</code>‎ مجلّدًا إلى مشروع (project). إذا لم تُحدَّد الخاصيّتان  ‎<code>“exclude”</code>‎ و‎<code>“files”</code>‎، فستشمل الترجمة جميع الملفّات في المجلّد الذي يحتوي على الملفّ ‎<code>tsconfig.json</code>‎ وجميع المجلّدات الفرعيّة داخله. إن أردت استبعاد بعض الملفّات فاستخدم الخاصيّة ‎<code>exclude</code>‎، وإذا أردت عوضًا عن ذلك تحديد جميع الملفّات التي ستُتَرجم وتجاهل بقيّة الملفّات عوضًا عن السماح للمترجم بالبحث عنها فاستعمل الخاصيّة ‎<code>files</code>‎.

هذا هو تضمين ‎<code>tsconfig.json</code>‎ الافتراضيّ. هذا لا يُضمِّن تقرير الوحدات كما هو موضّح أعلاه. إذا تعرَّف المترجم على ملفّ كهدف لأحد استيرادات الوحدات، فسيُضمَّن هذا الملفّ في عمليّة الترجمة بغضّ النظر عمّا إذا استُبعِد في الخطوات السابقة.

لذا فلاستبعاد ملفّ من عمليّة الترجمة، فستحتاج إلى استبعاده واستبعاد جميع الملفّات التي تحتوي على استيراد ‎<code>import</code>‎ يستورده أو إحالة ‎<code>‎/// <reference path="..." />‎</code>‎ تُشير إليه.

== مصادر ==
* [https://www.typescriptlang.org/docs/handbook/module-resolution.html صفحة Module Resolution في توثيق TypeScript الرسمي.]
[[تصنيف:TypeScript]]