عرض مصدر TypeScript/variable declarations

<noinclude>{{DISPLAYTITLE:التصريح عن المتغيّرات في TypeScript}}</noinclude>

==التصريح عن المتغيّرات (Variable Declarations)==
الكلمتان المفتاحيتان ‎<code>let</code>‎ و‎<code>const</code>‎ نوعان جديدان من طرق التصريح عن المتغيرات في لغة JavaScript. الكلمة المفتاحية <code>let</code> مُشابهة للكلمة المفتاحية <code>var</code> من عدّة نواحي، لكنّ <code>let</code> تسمح للمُطورين بتجنب بعض المشاكل التي تحدث عادةً في لغة JavaScript. أمّا <code>const</code> فهي طريقة لمنع إعادة تعيين القيم للمتغيرات.

ولأنّ TypeScript مجموعة عليا من JavaScript، فاللغة تدعم ‎<code>let</code>‎ و‎<code>const</code>‎. وسنشرح طرق التصريح عن المتغيرات هذه ولمَ يُفضّل استعمالها عوضًا عن ‎<code>var</code>‎.

إن كانت لديك خبرة قليلة في لغة JavaScript، فستفيدك الفقرة التالية لتقويم معلوماتك. أما إن كانت لك دراية شاملة بكيفية عمل تصريحات ‎<code>var</code>‎ في  لغة JavaScript، فيُمكنك تجاهل الفقرة التالية.

==تصريحات ‎‎<code>var</code>‎==
لطالما صُرِّح عن المُتغيّرات في JavaScript بالكلمة المفتاحية ‎‎<code>var</code>‎.
<syntaxhighlight lang="typescript">
var a = 10;
</syntaxhighlight>
صرحنا في الشيفرة أعلاه عن مُتغيّر باسم ‎<code>a</code>‎ وعيّنا له القيمة ‎<code>10</code>‎.

يُمكننا كذلك التصريح عن مُتغيّر داخل دالة كما يلي:
<syntaxhighlight lang="typescript">
function f() {
    var message = "Hello, world!";

    return message;
}
</syntaxhighlight>
ويُمكننا كذلك الوصول إلى هذه المتغيرات داخل دوال أخرى كما يلي:
<syntaxhighlight lang="typescript">
function f() {
    var a = 10;
    return function g() {
        var b = a + 1;
        return b;
    }
}

var g = f();
g(); // returns '11'
// يُعيد الاستدعاء أعلاه القيمة
// '11'
</syntaxhighlight>

في المثال أعلاه، التقطت (capture) الدالة <code>g</code> المُتغيّر <code>a</code> المُعرَّف في الدالة <code>f</code>. عندما تُستدعى الدالة <code>g</code> فقيمة <code>a</code> ستكون مرتبطة بقيمة <code>a</code> داخل الدالة <code>f</code>. وحتى ولو استُدعيَت الدالة <code>g</code> في الوقت الذي تتوقف فيه الدالة <code>f</code> عن التنفيذ، فستتمكن رغم ذلك من الوصول إلى المتغير <code>a</code> وتغييره.
<syntaxhighlight lang="typescript">
function f() {
    var a = 1;

    a = 2;
    var b = g();
    a = 3;

    return b;

    function g() {
        return a;
    }
}

f(); // returns '2'
// يُعيد الاستدعاء أعلاه القيمة
// '2'
</syntaxhighlight>
===قواعد المجال (Scoping rules)===
قواعد المجال في تصريحات ‎<code>var</code>‎ غريبة وغير مألوفة لمن اعتاد على العمل بلغات برمجة أخرى. مثلًا:
<syntaxhighlight lang="typescript">
function f(shouldInitialize: boolean) {
    if (shouldInitialize) {
        var x = 10;
    }

    return x;
}

f(true);  // returns '10'
f(false); // returns 'undefined'
</syntaxhighlight>
قد يتعجّب البعض من هذا المثال، إذ صُرِّح عن المتغيّر ‎<code>x</code>‎ ''داخل'' كتلة <code>if</code>، لكن رغم ذلك تمكّنا من الوصول إليه من خارج هذه الكتلة. هذا لأنّه من الممكن الوصول إلى تصريحات ‎<code>var</code>‎ من أي مكان داخل الدالة، أو الوحدة (module)، أو مجال الأسماء (namespace)، أو المجال العمومي (global scope) الذي يحتوي على الشيفرة، وذلك بغضّ النظر عن الكتلة التي تحتوي على الشيفرة. يُسمّى هذا الأمر عادةً بمجال ‎<code>var</code>‎ ‎(var-scoping‎)‎ أو مجال الدوال (function-scoping). والمُعاملات (Parameters) تكون في مجال الدالة كذلك.

يُمكن لقواعد المجال هذه أن تسبّب عددًا من الأخطاء. ويُعدّ السماح بإعادة تصريح نفس المتغيّر لأكثر من مرّة واحدة من المشاكل التي تُفاقمها هذه القواعد:
<syntaxhighlight lang="typescript">
function sumMatrix(matrix: number[][]) {
    var sum = 0;
    for (var i = 0; i < matrix.length; i++) {
        var currentRow = matrix[i];
        for (var i = 0; i < currentRow.length; i++) {
            sum += currentRow[i];
        }
    }

    return sum;
}
</syntaxhighlight>
لاحظ أنّ حلقة ‎<code>for</code>‎ الداخلية ستكتب وتغطّي على (overwrite) قيمة المتغيّر <code>i</code> بدون قصد، وذلك لأنّ المتغيّر <code>i</code> يُشير إلى نفس المتغير الموجود داخل مجال الدالة، ما سيُخلخل طريقة عمل البرنامج. يُمكن لمثل هذه العلل (bugs) أن تتجاوز عمليات مراجعة الشيفرة (code reviews) ما سيُصعّب من عمليّة إصلاح الأخطاء.

===مراوغات التقاط المتغيّرات (Variable capturing quirks)===
حاول تخمين مُخرج (output) الشيفرة التالية:
<syntaxhighlight lang="typescript">
for (var i = 0; i < 10; i++) {
    setTimeout(function() { console.log(i); }, 100 * i);
}
</syntaxhighlight>
تُحاول الدالة ‎<code>setTimeout</code>‎ تنفيذ دالة بعد عدد معين من أجزاء من ألف جزء من الثانية milliseconds (لكنها تنتظر إلى أن تنتهي العمليات الأخرى من التنفيذ).

هذا هو المُخرج:
<syntaxhighlight lang="typescript">
10
10
10
10
10
10
10
10
10
10
</syntaxhighlight>
إن فاجأك المُخرج، فأنت لست وحيدًا، مُعظم الناس سيتوقعون المُخرج التالي:
<syntaxhighlight lang="typescript">
0
1
2
3
4
5
6
7
8
9
</syntaxhighlight>
تذكّر ما قلناه سابقًا عن التقاط المتغيرات، كل تعبير دالة نُمرّره إلى ‎<code>setTimeout</code>‎ سيُشير إلى نفس المتغيّر  ‎<code>i</code>‎  داخل نفس المجال.

هذا يعني بأنّ الدالة <code>setTimeout</code> ستُشغّل الدالة بعد عدد من  أجزاء من ألف جزء من الثانية، ''لكن فقط'' بعد الانتهاء من تنفيذ حلقة  ‎<code>for</code>‎؛ عندما تتوقف حلقة <code>for</code>، فقيمة المتغيّر <code>i</code> تكون <code>10</code>. لذا ستُطبع القيمة <code>10</code> في كل مرّة تُستدعَى فيها الدالة!

عادةً ما تُستعمل تعابير IIFE (تعبير دالة يُعتمد عليها فورًا، اختصارًا للعبارة Immediately Invoked Function Expression) لحل هذه المشكلة عبر التقاط المتغيّر <code>i</code> عند كل تكرار:
<syntaxhighlight lang="typescript">
for (var i = 0; i < 10; i++) {
    // capture the current state of 'i'
    // by invoking a function with its current value
    // التقاط حالة المتغيّر
    // عبر الاعتماد على دالةٍ تُمرّر لها قيمته الحاليّة
    (function(i) {
        setTimeout(function() { console.log(i); }, 100 * i);
    })(i);
}
</syntaxhighlight>
هذه الشيفرة التي تبدو غريبةً شائعةٌ في تطبيقات JavaScript. المعامل ‎<code>i</code>‎ الموجود في قائمة المعاملات يغطّي على المتغيّر المُصرَّح عنه في حلقة ‎<code>for</code>‎، ولكنّنا لم نغيّر محتويات الحلقة كثيرًا لأننا سمّيناهما بنفس الاسم.

==تصريحات ‎‎<code>let</code>‎==
أضيف التصريح ‎‎<code>let</code>‎ لحلّ المشاكل التي تُسبّبها تصريحات  ‎‎<code>var</code>‎. وطريقة كتابة جمل <code>let</code> شبيهة بطريقة كتابة جمل <code>var</code>:
<syntaxhighlight lang="typescript">
let hello = "Hello!";
</syntaxhighlight>
الاختلاف الحقيقي موجود في طريقة العمل والدلالات (semantics)، وليس في البنية العامّة (syntax).

===مجالات الكتلة (Block-scoping)===
عند التصريح عن مُتغيّر باستخدام ‎<code>let</code>‎، فهذا يعني أنه يَستخدم ما يُصطلح عليه بالمجالات المعجميّة (lexical-scoping) أو مجالات الكتلة (block-scoping). وعلى النقيض من المتغيّرات المُصرّح عنها بالكلمة المفتاحية ‎<code>var</code>‎ التي تتسرّب مجالاتها إلى الدالة التي تحتوي عليها، فالمتغيّرات المصرح عنها في مجال الكتلة لا يُمكن الوصول إليها خارج أقرب كتلة محتويّة أو حلقة <code>for</code>.
<syntaxhighlight lang="typescript">
function f(input: boolean) {
    let a = 100;

    if (input) {
        // الإشارة إلى المتغيّر
        // 'a'
        // مسموح بها
        let b = a + 1;
        return b;
    }
    // خطأ، المتغيّر
    // 'b'
    // غير موجود هنا، لأننا عرفناه في كتلة الشرط
    return b;
}
</syntaxhighlight>
هنا لدينا متغيّران محليّان، المتغيّر ‎<code>a</code>‎ والمتغيّر ‎<code>b</code>‎. مجال ‎<code>a</code>‎ محدود في جسم الدالة ‎<code>f</code>‎ ومجال ‎<code>b</code>‎ محدود في كتلة جملة ‎<code>if</code>‎ المحتوية.

تملك المتغيرات المُصرّح عنها في كتلة <code>catch</code> قواعدَ مجالات مُشابهة كذلك:
<syntaxhighlight lang="typescript">
try {
    throw "oh no!";
}
catch (e) {
    console.log("Oh well.");
}
// خطأ، المتغيّر
// 'e'
// غير موجود هنا
console.log(e);
</syntaxhighlight>
لا يُمكن قراءة المتغيّرات (الحصول على قيمتها) أو الكتابة إليها (إسناد قيمة لها) قبل التصريح عنها، وهذه من مزايا المتغيّرات المحدودة في مجالات الكتل. ورغم أن هذه المتغيرات موجودة في كامل مجالها، لكن جميع الأماكن التي تسبق مكان التصريح عنها تُعدّ جزءًا من نطاق الموت المؤقّت (temporal dead zone) الخاص بها. وهذه العبارة تعني ببساطة بأنك لا تستطيع الوصول إلى المتغيّرات قبل جملة ‎<code>let</code>‎ التي تُصرِّح عنها، ولحسن الحظّ، ستخبرك TypeScript بذلك لتجنّب الأخطاء.
<syntaxhighlight lang="typescript">
a++; // لا يجوز استعمال المتغير قبل التصريح عنه
let a;
</syntaxhighlight>
ملحوظة: لا يزال بإمكانك التقاط متغيّر مجال كتلة قبل التصريح عنه. لكن لا يجوز استدعاء الدالة المحتوية قبل التصريح عن المتغيّر. إن كنت تعتمد على النسخة ES2015، فسيرمي زمن التّنفيذ (runtime) استثناءً؛ لكن رغم ذلك، تسمح TypeScript حاليًّا بذلك ولن تُخبرك بأنه خطأ.
<syntaxhighlight lang="typescript">
function foo() {
    // التقاط المتغيّر
    // 'a'
    // مسموح به هنا
    return a;
}

// لا يجوز استدعاء الدالة قبل التصريح عن المتغيّر
// سيُرمى خطأ في زمن التّنفيذ هنا
foo();

let a;
</syntaxhighlight>
للاستزادة حول نطاق الموت المؤقّت، انظر [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let هذه الصّفحة].

==إعادة التصريحات (Re-declarations) والتغطية (Shadowing)==
عند استخدام تصريحات ‎<code>var</code>‎، يُمكن إعادة التصريح عن المتغيّر بعدد لا نهائي من المرّات؛ وستحصل في النهاية على متغيّر واحد فقط:
<syntaxhighlight lang="typescript">
function f(x) {
    var x;
    var x;

    if (true) {
        var x;
    }
}
</syntaxhighlight>
في الشيفرة أعلاه، جميع التصريحات عن ‎<code>x</code>‎ تُشير إلى ''نفس'' المتغيّر <code>x</code>، وهذا صحيح وسليم. لكنّه ينتهي أحيانًا كمصدر للعلل. لكن تصريحات ‎<code>let</code>‎ تحلّ هذه المشاكل، إذ لا تكون مسامحة بنفس الشّكل:
<syntaxhighlight lang="typescript">
let x = 10;
let x = 20; // خطأ، لا يمكن إعادة التصريح عن المتغيّر في نفس المجال
</syntaxhighlight>
ليس من الضروري أن يكون كلا المتغيرين محدودي المجال في الكتلة لتُخبرنا TypeScript بأنّ هناك مشكلة ما.
<syntaxhighlight lang="typescript">
function f(x) {
    let x = 100; // خطأ، هذا يتعارض مع التصريح عن معامل الدالة
}

function g() {
    let x = 100;
    var x = 100; // خطأ، لا يُمكن التصريح عن المتغيّر بكلا الطريقتين
}
</syntaxhighlight>
هذا لا يعني بأنّه لا يمكن التصريح عن متغيّرات مجال الكتلة (block-scoped variable) مع متغيّر مجال دالّة (function-scoped variable). إذ يحتاج متغيّر مجال الكتلة فقط إلى التصريح عنه داخل كتلة مختلفة اختلافًا واضحًا.
<syntaxhighlight lang="typescript">
function f(condition, x) {
    if (condition) {
        let x = 100;
        return x;
    }

    return x;
}

f(false, 0); // returns '0'
f(true, 0);  // returns '100'
</syntaxhighlight>

إقحام اسم جديد في مجال داخليّ يُسمّى بالتغطيّة (shadowing). وهو سلاح ذو حديّن نوعًا ما، لأنّه قد يجلب عللًا أخرى في حالة التغطيّة بغير قصد، في نفس الوقت الذي يحمي فيه من علل أخرى كذلك. على سبيل المثال، تخيّل لو كتبنا الدالة ‎<code>sumMatrix</code>‎ السابقة باستخدام متغيّرات ‎<code>let</code>‎.
<syntaxhighlight lang="typescript">
function sumMatrix(matrix: number[][]) {
    let sum = 0;
    for (let i = 0; i < matrix.length; i++) {
        var currentRow = matrix[i];
        for (let i = 0; i < currentRow.length; i++) {
            sum += currentRow[i];
        }
    }

    return sum;
}
</syntaxhighlight>
هذه النسخة من حلقة التكرار ستؤدي الجمع بشكل صحيح لأن المتغيّر ‎<code>i</code>‎ داخل الحلقة يُغطي على ‎<code>i</code>‎ الموجود في الحلقة الخارجية.

من المُفضّل ''عادةً'' تجنّب التغطيّة لكتابة شيفرة نقيّة ونظيفة. ورغم أن هناك بعض الحالات التي يكون فيها استعمال التغطية مناسبًا، عليك أن تتخذ قرارك بحذر.

===التقاط متغيّرات مجالات الكتلة (Block-scoped variable capturing)===
عندما تطرّقنا إلى فكرة التقاط المتغيرات عند استعمال تصريحات ‎<code>var</code>‎، ألقينا نظرة على كيفية تصرّف المتغيّرات عندما تُلتقط. لتوضيح الفكرة أكثر، ضع في ذهنك أنّه في كل مرة يُنفّذ فيها مجال مُعيّن، سيقوم بإنشاء "بيئة” من المتغيرات. يُمكن لهذه البيئة والمتغيرات الملتقطة فيها أن تكون متوفّرة حتى بعد انتهاء تنفيذ كل شيء موجود في مجالها.
<syntaxhighlight lang="typescript">
function theCityThatAlwaysSleeps() {
    let getCity;

    if (true) {
        let city = "Seattle";
        getCity = function() {
            return city;
        }
    }

    return getCity();
}
</syntaxhighlight>
لأنّنا التقطنا المتغيّر ‎<code>city</code>‎ في داخل بيئته، فلا نزال نستطيع الوصول إليه رغم أن تنفيذ كتلة ‎<code>if</code>‎ قد انتهى.

تذكّر مثال ‎<code>setTimeout</code>‎ السابق، الذي احتجنا فيه تعبير IIFE لالتقاط حالة المتغيّر لكل تكرار في حلقة ‎<code>for</code>‎. إذ كنّا نُنشئُ بيئة متغيّرات جديدة للمتغيرات الملتقطة الخاصّة بنا. وكان ذلك معقدًا نوعًا ما، لكن ولحسن الحظ، لن تحتاج إلى القيام بذلك أبدًا في TypeScript.

تمتلك تصريحات ‎<code>let</code>‎ آلية عمل مختلفة تمامًا عندما تُستعمل داخل حلقات التكرار. فعوضًا عن إنشاء بيئة جديدة في الحلقة، تُنشئُ التصريحات مجالًا جديدًا ''لكل تكرار''. ولأن هذا هو الهدف من تعبير  IIFE الذي استعملناه، فنستطيع تغيير مثال ‎<code>setTimeout</code>‎ السابق لاستعمال تصريحات <code>let</code> فقط.
<syntaxhighlight lang="typescript">
for (let i = 0; i < 10 ; i++) {
    setTimeout(function() { console.log(i); }, 100 * i);
}
</syntaxhighlight>
والمخرج هذه المرّة سيكون كما هو متوقّع:
<syntaxhighlight lang="typescript">
0
1
2
3
4
5
6
7
8
9
</syntaxhighlight>

==تصريحات ‎‎<code>const</code>‎==
تصريحات ‎‎<code>const</code>‎ طريقةٌ أخرى للتصريح عن المتغيّرات.
<syntaxhighlight lang="typescript">
const numLivesForCat = 9;
</syntaxhighlight>
وهي مشابهة لتصريحات ‎<code>let</code>‎‎، لكن وكما يُشير اسم التصريح (من constant، أي ثابت)، فقيم المتغيرات المصرح عنها لا تكون قابلة للتغيير بعد ربطها. بعبارة أخرى، تصريحات ‎ <code>const</code>‎تتبع نفس قواعد المجال التي تتبعها تصريحات <code>const</code>‎، لكنّك لا تستطيع إعادة تعيين قيمة لها.

هذا لا يعني بأن القيم التي تشير إليها المتغيرات غير قابلة للتغيير (immutable):
<syntaxhighlight lang="typescript">
const numLivesForCat = 9;
const kitty = {
    name: "Aurora",
    numLives: numLivesForCat,
}

// خطأ، لا يمكن تغيير القيمة إلى قيمة أخرى
kitty = {
    name: "Danielle",
    numLives: numLivesForCat
};

// لا بأس بتغيير محتويات القيمة التي يشير إليها المتغيّر
kitty.name = "Rory";
kitty.name = "Kitty";
kitty.name = "Cat";
kitty.numLives--;
</syntaxhighlight>
لاحظ أنّه لا يزال بإمكانك تغيير الحالة الداخلية لمتغيّرات ‎<code>const</code>‎، إلا إن اتّخذت إجراءات خاصّة لمنع ذلك.

ولحسن الحظ، تسمح لك TypeScript بتحديد عناصر من كائن معيّن لتكون قابلة للقراءة فقط (<code>readonly</code>). يُمكنك الاطلاع على صفحة [[TypeScript/interfaces|الواجهات]] للمزيد من التفاصيل.

==الفرق بين تصريحات ‎‎<code>let</code>‎ وتصريحات ‎‎<code>const</code>‎==
لأن كلا الطريقتين متشابهتان من ناحية آلية عمل المجال، فمن الطبيعي أن نسأل أيّ الطريقتين أفضل ومتى علينا استخدام أي نوع من التصريحات. والإجابة هي أن ذلك يعتمد على الهدف من استعمال المتغيّر.

بتطبيق مبدأ الامتيازات الدنيا (principle of least privilege)، يجب على جميع التصريحات التي لا تُخطّط لتغييرها أن تستخدم  ‎‎<code>const</code>‎‎‎. إن لم يكن متغيّر ما بحاجة إلى تعيين قيمة جديدة له، فمن يعمل على الشيفرة لا يجب أن يتمكن من فعل ذلك تلقائيًّا، وسيُفكّر من يريد تغيير قيمة المتغيّر في الأمر مليًّا قبل فعله. استعمال  ‎<code>const</code>‎ يجعل كذلك من قراءة وشرح الشيفرة وتحليل تدفق البيانات سهلًا.

فكّر مليًّا في الأمر، وإن كنت تعمل ضمن فريق فاستشر زملاءك.

يستخدم هذا التوثيق تصريحات ‎<code>let</code>‎  في معظم الأحيان.

==التفكيك (Destructuring)==
التفكيك من المزايا الجديدة في ECMAScript 2015 المتوفّرة في TypeScript. لمرجع كامل حول التفكيك، انظر [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment هذه الصّفحة]. 

===تفكيك المصفوفات (Array destructuring)===
تفكيك المصفوفات وإسناد عناصرها إلى عدّة متغيّرات من أبسط أشكال التفكيك:

<syntaxhighlight lang="typescript">
let input = [1, 2];
let [first, second] = input;
console.log(first); // 1
console.log(second); // 2
</syntaxhighlight>
يُنشئ هذا متغيرين جديدين باسم ‎<code>first</code>‎ و‎<code>second</code>‎. هذا مكافئ لاستخدام الفهرسة (indexing)، لكنّه أكثر وضوحًا وبساطة من الفهرسة:
<syntaxhighlight lang="typescript">
first = input[0];
second = input[1];
</syntaxhighlight>
يعمل التفكيك مع المتغيرات المصرح عنها مسبقًا كذلك:
<syntaxhighlight lang="typescript">
// مبادلة المتغيرات، بحيث يحمل كل واحد قيمة الآخر
[first, second] = [second, first];
</syntaxhighlight>
ويمكن استعماله كذلك مع معاملات الدوال:
<syntaxhighlight lang="typescript">
function f([first, second]: [number, number]) {
    console.log(first);
    console.log(second);
}
f([1, 2]);
</syntaxhighlight>
يمكنك إنشاء متغيّر يحمل بقيّة عناصر القائمة باستخدام البنية ‎<code>...</code>‎ كما يلي:
<syntaxhighlight lang="typescript">
let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [ 2, 3, 4 ]
</syntaxhighlight>
ولأننا نتعامل مع لغة JavaScript، فيُمكنك كذلك تجاهل العناصر المتبقيّة غير المرغوبة:
<syntaxhighlight lang="typescript">
let [first] = [1, 2, 3, 4];
console.log(first); // 1
</syntaxhighlight>
أو تجاهل عناصر أخرى:
<syntaxhighlight lang="typescript">
let [, second, , fourth] = [1, 2, 3, 4];
</syntaxhighlight>
===تفكيك الكائنات (Object destructuring)===
يُمكنك  تفكيك الكائنات كذلك:
<syntaxhighlight lang="typescript">
let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, b } = o;
</syntaxhighlight>
يُنشئ هذا متغيّرين جديدين، ‎<code>a</code>‎ و‎<code>b</code>‎ من ‎<code>o.a</code>‎ و‎<code>o.b</code>‎. لاحظ أنّك تستطيع تخطي ‎<code>c</code>‎ إن لم تحتج إليه.

ومثل تفكيك المصفوفات، يُمكنك كذلك التعيين دون التصريح عن المتغيرات:
<syntaxhighlight lang="typescript">
({ a, b } = { a: "baz", b: 101 });
</syntaxhighlight>
لاحظ أنّه توجّب علينا إحاطة هذه الجملة بقوسين. وهذا لأنّ JavaScript تعتبر الرمز ‎<code>{</code>‎ على أنّه بداية كتلة (block).

يمكنك إنشاء متغيّر يحمل بقيّة عناصر الكائن باستخدام البنية ‎<code>...</code>‎ كما يلي:
<syntaxhighlight lang="typescript">
let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;
</syntaxhighlight>
===إعادة تسمية الخاصيات (Property renaming)===
يُمكنك تسميّة الخاصيات كذلك:
<syntaxhighlight lang="typescript">
let { a: newName1, b: newName2 } = o;
</syntaxhighlight>
البنية العامة هنا معقدة قليلًا، يُمكنك قراءة المقطع  ‎<code>a: newName1</code>‎ وكأنّك تقول: خذ قيمة ‎<code>a</code>‎ من الكائن وضَعها في المتغيّر ‎<code>newName1</code>‎. الاتجاه يكون من اليسار إلى اليمين، وكأنّك كتبت ما يلي:

<syntaxhighlight lang="typescript">
let newName1 = o.a;
let newName2 = o.b;
</syntaxhighlight>
ما يجعل الأمر مُشوّشًا ومُحيّرًا هنا هو أن النقطتان (:) لا تُعبّران عن النوع. إن حُدِّد النوع يجب أن يُحدَّد بعد كامل التفكيك كما يلي:
<syntaxhighlight lang="typescript">
let { a, b }: { a: string, b: number } = o;
</syntaxhighlight>
===القيم الافتراضيّة (Default values)===
تسمح القيم الافتراضية بتحديد قيمة افتراضيّة لخاصيةٍ في حالة لم تُعرَّف:
<syntaxhighlight lang="typescript">
function keepWholeObject(wholeObject: { a: string, b?: number }) {
    let { a, b = 1001 } = wholeObject;
}
</syntaxhighlight>
في هذا المثال، أصبحت الدالة ‎<code>keepWholeObject</code>‎ تمتلك متغيّرًا ‎<code>wholeObject</code>‎ إضافة إلى الخاصيتين ‎<code>a</code>‎ و‎<code>b</code>‎، حتى ولو لم تُعرّف الخاصيّة ‎<code>b</code>‎. إذ ستكون قيمتها الافتراضيّة العدد ‎<code>1001</code>‎.

===التصريح عن الدوال (Function declarations)===
يعمل التفكيك عند التصريح عن الدوال كذلك. وهذا واضح في الحالات البسيطة:
<syntaxhighlight lang="typescript">
type C = { a: string, b?: number }
function f({ a, b }: C): void {
    // ...
}
</syntaxhighlight>
تحديد القيم الافتراضية للمعاملات شائع جدًّا، وجمعه مع التفكيك قد يكون صعبًا. أولًا، عليك أن تتذكر تحديد النمط (pattern) قبل القيمة الافتراضيّة:
<syntaxhighlight lang="typescript">
function f({ a, b } = { a: "", b: 0 }): void {
    // ...
}
f();
// القيمة الافتراضية هي
// { a: "", b: 0 }
</syntaxhighlight>
ملاحظة: المقطع أعلاه مثال على [[TypeScript/type inference|استنتاج الأنواع]] (type inference).

بعد ذلك ستحتاج إلى أن تتذكّر تحديد القيم الافتراضية للخاصيات الاختيارية على الخاصيّة المُفكّكة عوضًا عن الجزء الرئيسيّ, تذكّر بأنّ ‎<code>C</code>‎ قد عُرّف مع ‎<code>b</code>‎ كخاصية اختيارية:
<syntaxhighlight lang="typescript">
function f({ a, b = 0 } = { a: "" }): void {
    // ...
}
// القيمة الافتراضية هي
// b = 0
f({ a: "yes" });

// القيمة الافتراضية الأولى هي
// { a: "" }
// ما يُؤدي إلى القيمة الافتراضيّة
// b = 0
f();

// خطأ لأنّ 
// 'a'
// خاصيّة مطلوبة عندما نُمرّر قيمة للمعامل
f({});
</syntaxhighlight>
استعمل التفكيك بحذر. فكما يوضح المثال أعلاه، يُمكن لتعابير التفكيك أن تتحول إلى شيفرة مُعقّدة بسهولة. والتفكيك المتداخل يزيد من هذا التعقيد، ما قد يجعل فهم الشيفرة أمرًا صعبًا وشاقًّا حتى دون استعمال إعادة التسميّة (renaming) والقيم الافتراضيّة (default values) وحواشي الأنواع (type annotations). حاول إبقاء تعابير التفكيك صغيرةً وبسيطة. إذ يُمكنك دائمًا كتابة التعيينات التي سيُولّدها التفكيك بنفسك، ما سيُسهّل قراءة وفهم الشيفرة.

==معامل النشر Spread==
معامل النشر (spread operator) هو المقابل للتفكيك. إذ يسمح بنشر مصفوفة إلى مصفوفة أخرى، أو كائن إلى كائن آخر. على سبيل المثال:

<syntaxhighlight lang="typescript">
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];
</syntaxhighlight>
يمنح هذا القيمةَ ‎<code>[0, 1, 2, 3, 4, 5]</code>‎ للمصفوفة ‎<code>bothPlus</code>‎. يقوم النشر بنسخ سطحي لكل من <code>first</code> و<code>second</code>، لذا فالنشر لا يُغيّرهما.

يُمكنك نشر الكائنات (objects) كذلك:
<syntaxhighlight lang="typescript">
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" };
</syntaxhighlight>
بهذا يُصبح الكائن ‎<code>search</code>‎ كما يلي:
<syntaxhighlight lang="typescript">
{ food: "rich", price: "$$", ambiance: "noisy" }
</syntaxhighlight>
نشر الكائنات أعقد من نشر المصفوفات. وكما في نشر المصفوفات، فالعملية تجري من اليسار إلى اليمين، لكنّ النتيجة تبقى كائنًا. هذا يعني بأن الخاصيات التي تكون في آخر كائن النشر تكتب وتغطّي على (overwrite) الخاصيات التي تكون في بدايته. لذا لو عدّلنا المثال أعلاه ونشرنا في آخر الكائن:
<syntaxhighlight lang="typescript">
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { food: "rich", ...defaults };
</syntaxhighlight>
فستكتب الخاصية ‎<code>food</code>‎ الموجودة في الكائن ‎<code>defaults</code>‎ على الخاصية ‎<code>‎food: "rich"‎</code>‎، وهذه النتيجة غير مرغوبة في هذه الحالة، لذا خذ حذرك عند نشر الكائنات.

لنشر الكائنات بعض المعيقات المفاجأة كذلك. فأولًا، لا يشمل النشر إلا الخاصيات التي يملكها والقابلة للعدّ (انظر [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties هذه الصّفحة]). ما يعني ببساطة أنك ستفقد التوابع (methods) عندما تنشر نسخًا (instances) من الكائن:
<syntaxhighlight lang="typescript">
class C {
  p = 12;
  m() {
  }
}
let c = new C();
let clone = { ...c };
clone.p; // ok
clone.m(); // خطأ، التابع لا ينضم إلى النسخة الجديدة المنشأة عن طريق النشر
</syntaxhighlight>
ثانيًّا، لا يسمح مترجم (compiler) لغة Typescript بنشر معاملات الأنواع (type parameters) من الدوال العموميّة (generic functions). لكن من المتوقع أن تتاح هذه الميزة في نسخ مستقبلية من اللغة.

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