05_typescript/unterricht/tag30/01_ts-types/assets/js/01_type-literale.js

@@ -1,2 +1,67 @@
 (() => {
+  // src/01_type-literale.ts
+  {
+    let draw = function(shape) {
+      console.log(`Drawing a ${shape.type} with size ${shape.size}`);
+    }, toggleSwitch = function(state) {
+      return state ? "Switch is ON" : "Switch is OFF";
+    };
+    let language = "English";
+    language = "French";
+    const lang = "English";
+    const greeting = "Hello";
+    const greeting2 = "Hello";
+    const number = 23;
+    const number2 = 23;
+    console.log({ language, lang, greeting, greeting2, number, number2 });
+    const setDirection = (direction) => {
+      console.log(`Moving ${direction}`);
+    };
+    setDirection("up");
+    setDirection("down");
+    const evaluateScore = (score) => {
+      return `You rated the service a ${score}`;
+    };
+    evaluateScore(5);
+    evaluateScore(3);
+    evaluateScore(1);
+    draw({ type: "circle", size: 10 });
+    draw({ type: "square", size: 20 });
+    const slideOptions = {
+      type: "slide",
+      nav: true
+    };
+    console.log(slideOptions);
+    console.log(toggleSwitch(true));
+    console.log(toggleSwitch(false));
+    let Move;
+    ((Move2) => {
+      Move2["Up"] = "up";
+      Move2["Down"] = "down";
+      Move2["Right"] = "right";
+      Move2["Left"] = "left";
+    })(Move || (Move = {}));
+    const setDirection2 = (movement) => {
+      console.log(`Moving ${movement}`);
+    };
+    setDirection2("up" /* Up */);
+    setDirection2("right" /* Right */);
+    setDirection2("down" /* Down */);
+    setDirection2("right" /* Right */);
+    let Rating;
+    ((Rating2) => {
+      Rating2[Rating2["One"] = 1] = "One";
+      Rating2[Rating2["Two"] = 2] = "Two";
+      Rating2[Rating2["Three"] = 3] = "Three";
+      Rating2[Rating2["Four"] = 4] = "Four";
+      Rating2[Rating2["Five"] = 5] = "Five";
+    })(Rating || (Rating = {}));
+    const evaluateScore2 = (score) => {
+      return `You rated the service a ${score}`;
+    };
+    evaluateScore2(1 /* One */);
+    evaluateScore2(5 /* Five */);
+    evaluateScore2(4 /* Four */);
+    evaluateScore2(5);
+  }
 })();

05_typescript/unterricht/tag30/01_ts-types/src/01_type-literale.ts

@@ -1 +1,121 @@
-// Literal
+// Literalzuweisung - Feste alleinstehende Werte zuweisen
+{
+  let language = 'English'; // TypeScript infers the type of `language` as `string`.
+  language = 'French';
+
+  const lang = 'English'; // TypeScript infers the type of `lang` as literal 'English'.
+
+  const greeting = 'Hello'; // inferred as literal 'Hello'
+  const greeting2: 'Hello' = 'Hello';
+
+  const number = 23; // inferred as literal 23
+  const number2: 23 = 23; // explicit
+
+  console.log({ language, lang, greeting, greeting2, number, number2 });
+
+  // --------
+
+  type Direction = 'up' | 'down' | 'left' | 'right';
+  const setDirection = (direction: Direction) => {
+    console.log(`Moving ${direction}`);
+  };
+
+  setDirection('up'); // OK
+  setDirection('down'); // OK
+  // setDirection('north'); // Error: Argument of type '"north"' is not assignable to parameter of type '"up" | "down" | "left" | "right"'.
+
+  // ---------
+
+  type Score = 1 | 2 | 3 | 4 | 5;
+
+  const evaluateScore = (score: Score) => {
+    return `You rated the service a ${score}`;
+  };
+
+  evaluateScore(5); // OK
+  evaluateScore(3); // OK
+  evaluateScore(1); // OK
+
+  // evaluateScore(6); // Error: Argument of type '6' is not assignable to parameter of type '1 | 2 | 3 | 4 | 5'.
+
+  // ---------
+
+  interface Shape {
+    type: 'circle' | 'square' | 'rectangle';
+    size: number;
+  }
+
+  function draw(shape: Shape) {
+    console.log(`Drawing a ${shape.type} with size ${shape.size}`);
+  }
+
+  draw({ type: 'circle', size: 10 }); // OK
+  draw({ type: 'square', size: 20 }); // OK
+  // draw({ type: 'triangle', size: 15 }); // Error: Type '"triangle"' is not assignable to type '"circle" | "square"'.
+
+  // ---------
+
+  interface Splide {
+    type: 'loop' | 'fade' | 'slide';
+    nav: boolean;
+    showDots?: boolean;
+    fixedHeight?: string | number;
+  }
+
+  const slideOptions: Splide = {
+    type: 'slide',
+    nav: true,
+  };
+
+  console.log(slideOptions);
+
+  // ---------
+  function toggleSwitch(state: boolean) {
+    return state ? 'Switch is ON' : 'Switch is OFF';
+  }
+
+  console.log(toggleSwitch(true)); // OK
+  console.log(toggleSwitch(false)); // OK
+  // console.log(toggleSwitch('on')); // Error: Argument of type '"on"' is not assignable to parameter of type 'true | false'
+
+  // -------
+
+  // enum - Enumerationen sind ein spezieller Typ, der eine Liste von konstanten Werten definiert.
+  // Sie sind nützlich, um eine Gruppe von Werten zu definieren, die eine bestimmte Bedeutung haben.
+
+  enum Move {
+    Up = 'up',
+    Down = 'down',
+    Right = 'right',
+    Left = 'left',
+  }
+
+  const setDirection2 = (movement: Move): void => {
+    console.log(`Moving ${movement}`);
+  };
+
+  setDirection2(Move.Up);
+  setDirection2(Move.Right);
+  setDirection2(Move.Down);
+  setDirection2(Move.Right);
+  // setDirection2(Move.North); // Property 'North' does not exist on type 'typeof Move'.
+
+  // ----
+  enum Rating {
+    One = 1,
+    Two = 2,
+    Three = 3,
+    Four = 4,
+    Five = 5,
+  }
+
+  const evaluateScore2 = (score: Rating): string => {
+    return `You rated the service a ${score}`;
+  };
+
+  evaluateScore2(Rating.One); // OK
+  evaluateScore2(Rating.Five); // OK
+  evaluateScore2(Rating.Four); // OK
+  evaluateScore2(5); // OK
+  // evaluateScore2(Rating.Six);
+}