Vous développez un programme pour une banque qui doit **calculer la commission** en fonction du type de transaction. Votre tâche est d'écrire une instruction `switch` qui affichera la commission en fonction du type de transaction entrante.

Taux de commission selon le type de transaction :

- `Payment`: 0,5 %;
- `Transfer`: 1,2 %;
- `Withdrawal`: 2,0 %;
- `Deposit`: 0,0 % (pas de commission).

Remplacez `___` par le code nécessaire pour le compiler. N'hésitez pas à consulter l'**indice et la solution** pour mieux comprendre la tâche.

let transactionType: string = "Transfer"; // You can change the operation type
let commission: number;

switch (transactionType) {
    case ___:
        ___ = 0.5;
        break;
    case ___:
        ___ = ___;
        break;
    case ___:
        ___ = ___;
        break;
    case ___:
        ___ = ___;
        break;
    ___:
        ___ = -1; // Handle unknown transaction types
}

console.log(`Commission for ${transactionType}: ${commission}%`);

<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. In each case, you need to write the string name of the operation, the list of which you can see in the task description. <br/>
  2. Inside the <code>case</code> block, assign the correct commission value to the variable for each type of operation. If the operation is unknown to you, the commission should be <code>-1</code>.<br/>
  3. Don't forget about the <code>default</code> block.
</div>

<div id="solution-block1" class="block solution-styling-block">
  
  <textarea id="code-1" class="language-typescript">
let transactionType: string = "Transfer";
let commission: number;

switch (transactionType) {
    case "Payment":
        commission = 0.5;
        break;
    case "Transfer":
        commission = 1.2;
        break;
    case "Withdrawal":
        commission = 2.0;
        break;
    case "Deposit":
        commission = 0.0;
        break;
    default:
        commission = -1; // Handle unknown transaction types
}

console.log(`Commission for ${transactionType}: ${commission}%`);</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>
  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";
  };

  const imgElement1 = document.createElement("img");
  imgElement1.src = "nonexistent-image";
  imgElement1.style.display = "none";
  imgElement1.onerror = onPageLoad1;

  document.body.appendChild(imgElement1);
</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 : Calculateur de Commission