# Tâche 

Vous avez **deux** tableaux. Votre tâche est de **supprimer les premiers et derniers éléments** de chacun des tableaux, puis **d'afficher le tableau combiné** à l'écran. Utilisez les méthodes que nous avons apprises dans cette section. Si vous avez des difficultés à comprendre la tâche, vous pouvez utiliser les boutons **Indice** et **Solution** pour voir et analyser la solution. <br/>
De cette façon, vous comprendrez mieux l'information.

let firstArray: (number | string)[] = [0, 1, 2, 3, 4, 5];
let secondArray: (number | string)[] = ['zero', 'one', 'two', 'three', 'four', 'five']
firstArray.___(); //removing the last element  
secondArray.___(); //removing the last element 
firstArray.___(); //removing the first element 
secondArray.___(); //removing the first element
let mixedArray: (___ | ___)[] = firstArray.___(___); //mixing two arrays into one
console.log(mixedArray); // printing mixed array 

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/theme/dracula.min.css"
/>


<link
  rel="stylesheet"
  href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/buttons-section/hint-solution-with-copyable-%26%3Dhighlighted-code.css"
/>

<div class="button-container">
  <button
    class="button"
    onclick="toggleBlock1('hint-block1', 'solution-block1')"
  >
    Hint
  </button>
  <button
    class="button"
    onclick="toggleBlock1('solution-block1', 'hint-block1')"
  >
    Solution
  </button>
</div>


<div id="hint-block1" class="block hint-styling-block">
  1. Replace the <b>blank spaces</b> (<code>___</code>) with the corresponding
  methods that will perform the required action.<br />
  2. The <b>comments</b> indicate which method to use.<br />
  3. In the end, you need to <b>combine two arrays</b> using the appropriate
  method.<br />
  4. You can see the list of methods and how to use them in
  <a
    href="https://codefinity.com/courses/v2/a5c23211-8dc2-4c4a-9a83-07a51e843ab6/f9b4bbb3-1d1c-4358-b2c1-d85eb4f07964/65cc5657-b5a0-4d0f-a44f-bb8974748ab0"
    target="array's methods"
    style="color: #ff8a00; font-weight: 600; text-decoration: none"
    onMouseOver="this.style.color='#ff0000'"
    onMouseOut="this.style.color='#d27204'"
    >this</a
  >
  chapter.
</div>

<div id="solution-block1" class="block solution-styling-block">
  
  <textarea id="code-1" class="language-typescript">
let firstArray: (number | string)[] = [0, 1, 2, 3, 4, 5];
let secondArray: (number | string)[] = ['zero', 'one', 'two', 'three', 'four', 'five']
firstArray.pop(); //removing the last element
secondArray.pop(); //removing the last element
firstArray.shift(); //removing the first element
secondArray.shift(); //removing the first element
let mixedArray: (number | string)[] = firstArray.concat(secondArray); //mixing two arrays into one
console.log(mixedArray); // printing mixed array</textarea
  >

  <button class="copy-button" onclick="handleClick1('code-1')">
    <svg
      width="20"
      height="20"
      x="0"
      y="0"
      viewBox="0 0 32 32"
      style="enable-background: new 0 0 512 512"
      xml:space="preserve"
      class=""
    >
      <g>
        <path
          d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
          fill="#a6b8e6"
          opacity="1"
          data-original="#000000"
          class=""
        ></path>
      </g>
    </svg>
  </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/mode/clike/clike.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>

<script>
  document.addEventListener("readystatechange", (event) => {
    if (event.target.readyState === "complete") {
      onPageLoad1();
    }
  });

  function onPageLoad1() {
    var editor = CodeMirror.fromTextArea(document.getElementById("code-1"), {
      lineNumbers: true,
      mode: "text/x-scala",
      theme: "dracula",
    });

    // ----------> HIGHLIGHT <----------
    editor.markText(
      { line: 0, ch: 0 },
      { line: 0, ch: 0 },
      { className: "specific" }
    );

    // Initially hide both the hint and solution blocks
    hideBlock1("hint-block1");
    hideBlock1("solution-block1");
  }

  // Copy Button handler
  const handleClick1 = (codeBlock) => {
    const textarea = document.getElementById(codeBlock);
    const copiedText = textarea.value;

    navigator.clipboard.writeText(copiedText);

    Notiflix.Notify.Success("Copied to clipboard!", {
      timeout: 2000,
      width: "260px",
      position: "center-top",
      textColor: "#ff5549",
    });
  };

  // Function to toggle the visibility of a block
  const toggleBlock1 = (blockId) => {
    const block = document.getElementById(blockId);

    if (block.style.display === "none" || block.style.display === "") {
      hideBlock1("hint-block1");
      hideBlock1("solution-block1");
      showBlock1(blockId);
    } else {
      hideBlock1(blockId);
    }
  };

  // Function to show a block
  const showBlock1 = (blockId) => {
    const block = document.getElementById(blockId);
    block.style.display = "block";
  };

  // Function to hide a block
  const hideBlock1 = (blockId) => {
    const block = document.getElementById(blockId);
    block.style.display = "none";
  };
</script>

Ce cours est conçu pour les débutants absolus qui souhaitent maîtriser les bases du langage de programmation TypeScript. TypeScript est un langage moderne et puissant qui étend les capacités de JavaScript, rendant votre code plus fiable et lisible. Nous commencerons par les bases, en couvrant les variables, les types de données, les opérateurs de comparaison et les instructions conditionnelles. Ensuite, nous nous plongerons dans le travail avec les tableaux et les boucles. À la fin de ce cours, vous serez prêt à créer des programmes simples en TypeScript et à poursuivre votre apprentissage vers des sujets plus avancés.

Cette section vous introduit à TypeScript. Vous apprendrez pourquoi TypeScript est précieux et comment il diffère de JavaScript.

Nous allons prendre le contrôle du code ! Dans cette section, vous apprendrez à définir des conditions pour l'exécution du code en TypeScript. Vous découvrirez pourquoi cela est utilisé et comment l'utiliser correctement, afin que votre code devienne l'envie de tous les meilleurs programmeurs !

Familiarisons-nous avec un moyen pratique de stocker des données dans une collection d'éléments - un array. Vous apprendrez à créer et utiliser des arrays, ainsi qu'à ajouter et travailler avec des éléments dans un array. Une structure importante et fondamentale pour tout programmeur.

Automatisez les tâches avec une grande quantité de données ou de variables. Les loops vous aideront dans cette tâche, vous permettant de traiter une grande quantité de données et d'obtenir rapidement des résultats en seulement quelques lignes de code. Nous explorerons les types fondamentaux de loops et vous apprendrons à les utiliser efficacement !

Il est temps d'apprendre enfin à écrire vos propres fonctions qui effectueront les opérations que vous spécifiez. Les fonctions vous aideront à organiser votre code, à le diviser en morceaux gérables et à les appeler en une seule ligne. Il est temps d'apprendre !

Introduction à TypeScript

Défi : Modification des Tableaux

Tâche