{ "cells": [ { "cell_type": "markdown", "id": "d5c00cd0-b48b-467e-9276-0356d2ccffdb", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "source": [ "# Variablen\n", "Anders als bei Java müssen Datentypen in TypeScript nicht explizit angegeben werden. Besserer Programmierstil ist jedoch, wenn wir die Typen trotzdem mit angeben. Die Schreibweise hierzu ist jedoch an der UML-Schreibweise angelegt:\n", "\n", "Wir kennen von Java bereits:\n", "`int a = 5`\n", "\n", "Demgegenüber bei TypeScript:\n", "`let a: number = 5`\n", "\n", "Wie in der Einführung bereits geschrieben, wird TypeScript immer in JavaScript übersetzt und dann erst ausgeführt. Dadurch, dass JavaScript jedoch keine statische Typisierung von Variablen kennt, können wir den Datentyp prinzipiell auch weglassen.\n", "\n", "Programmiert jedoch ein größeres Projekt in einer richtigen Entwicklungsumgebung, so helfen Typen dabei, Fehler frühzeitig zu erkennen! Wir werden in aller Regel deshalb auch hier den Datentyp mit dazu schreiben!" ] }, { "cell_type": "markdown", "id": "67bb7709-852f-480b-80ab-a6b5b0194037", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "source": [ "## Datentypen in TypeScript\n", "Bei TypeScript gibt es im Wesentlichen folgende Datentypen:\n", "* `string`: Entspricht dem Java-Datentyp `String`, dieser kann Zeichenketten aufnehmen\n", "* `number`: Im Gegensatz zu Java unterscheidet TypeScript z.B. nicht, um welche Zahltypen (ganze Zahlen/Kommazahlen) es sich handelt. `number` steht allgemein für eine Zahl\n", "* `boolean`: Wahrheitswerte `true` bzw `false`\n", "\n", "Wird eine Variable gleichzeitig deklariert (= angelegt) als auch initialisiert (= Wert zugewiesen) so kann hier auf eine Angabe des Datentyps verzichtet werden, da TypeScript dann automatisch den Datentyp ableitet.\n", "\n", "Soll beispielsweise bei einem Funktions-Parameter der Datentyp variabel sein bzw alle möglichen Werte angenommen werden können, so kann als Datentyp `any` genutzt werden.\n", "\n", "### Beispiel:\n", "\n", "```\n", "let x = \"Hallo\";\n", "```\n", "\n", "`x` hat hier automatisch den Datentyp `string`." ] }, { "cell_type": "markdown", "id": "c96b5908-744c-49e8-b705-02fae696b6fe", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "source": [ "## Variablentypen\n", "neben `let` gibt es auch noch die Schlüsselwörter `const` sowie `var`. Der Unterschiede bestehen darin:\n", "* `var`: ähnlich wie `let`, jedoch ist der Geltungsbereich etwas \"gewöhnungsbedürftig\". So kann innerhalb eines Blocks eine Variable, die außerhalb mit `var` angelegt wurde nicht neu angelegt werden.\n", "* `let`: Verahlten, wie man es z.B. von Java gewohnt ist. Wird eine Variable mit `let` in einem Block neu definiert, so wird eine neue Variable angelegt. Will man stattdessen den Wert der außerhalb definierten Variable ändern, so lässt man das Schlüsselwort `let` weg.\n", "* `const`: Wie `let`, jedoch kann der Wert der \"Variablen\" nicht mehr geändert werden." ] }, { "cell_type": "markdown", "id": "1406f526-923c-40a6-bb87-422e50a5899b", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "source": [ "### Beispiel für `var`:\n", "Hier wird außerhalb des `if`-Blocks eine Variable `hallo` angelegt. Innerhalb des Blocks wird die `hallo`-Variable neu zugewiesen. In der Ausgabe wird deshalb zunächst `Hallo` und anschließend zwei mal `Tschüss` ausgegeben.\n", "\n", "Bei der Variablen `greeter` wird trotz Angabe des Schlüsselwortes `var` innerhalb des `if`-Blocks keine neue Variable angelegt sondern ebenfalls der Wert der äußeren Variablen `greeter` verändert. Die Ausgabe ist deshalb ebenfalls zunächst `Hello`, anschließend beide male `Goodbye`." ] }, { "cell_type": "code", "execution_count": 17, "id": "4dd26396-d818-4ea4-829a-92c193012890", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "Hallo Hello\n", "Tschüss Goodbye\n", "Tschüss Goodbye\n" ] } ], "source": [ "var hallo = \"Hallo\";\n", "var greeter = \"Hello\";\n", "console.log(hallo, greeter); // Ausgabe: \"Hallo Hello\"\n", "var times = 4;\n", "\n", "if (times > 3) {\n", " hallo = \"Tschüss\";\n", " var greeter = \"Goodbye\";\n", " console.log(hallo, greeter); // Ausgabe: \"Tschüss Goodbye\"\n", "}\n", "\n", "console.log(hallo, greeter); // Ausgabe: \"Tschüss Goodbye\"" ] }, { "cell_type": "markdown", "id": "4343607c-7165-4236-b2b3-bd03526a6b3b", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "source": [ "### Beispiel für `let`:\n", "Hier wird außerhalb des `if`-Blocks eine Variable `hallo2` angelegt. Innerhalb des Blocks wird die `hallo2`-Variable neu zugewiesen. In der Ausgabe wird deshalb zunächst `Hallo` und anschließend zwei mal `Tschüss` ausgegeben.\n", "\n", "Bei der Variablen `greeter2` wird durch die Angabe des Schlüsselwortes `let` innerhalb des `if`-Blocks eine neue Variable angelegt. Die Ausgabe ist deshalb ebenfalls zunächst `Hello`, anschließend `Goodbye`. Da die Variable `greeter2` in dem `if`-Block neu angelegt wurde und nur dort gültig ist, wird nach dem Block wieder auf die ursprüngliche Variable zugegriffen und wieder `Hello` ausgegeben." ] }, { "cell_type": "code", "execution_count": 11, "id": "d1fad4da-b713-4ca5-a7b8-34401b078883", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "Hallo Hello\n", "Tschüss Goodbye\n", "Tschüss Hello\n" ] } ], "source": [ "let hallo2 = \"Hallo\";\n", "let greeter2 = \"Hello\";\n", "console.log(hallo2, greeter2); // Ausgabe: \"Hallo Hello\"\n", "let times2 = 4;\n", "\n", "if (times > 3) {\n", " hallo2 = \"Tschüss\";\n", " let greeter2 = \"Goodbye\";\n", " console.log(hallo2, greeter2); // Ausgabe: \"Tschüss Goodbye\"\n", "}\n", "\n", "console.log(hallo2, greeter2); // Ausgabe: \"Tschüss Goodbye\"" ] }, { "cell_type": "markdown", "id": "51652a7d-dc22-4244-8823-3babfc29a1c8", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "source": [ "### Beispiel für `const`:\n", "Wird eine \"Variable\" mit `const` angelegt, so verhält sie sich bzgl. dem Geltungsbereich wie `let`. Jedoch lässt sich der direkt Inhalt nicht mehr ändern.\n", "\n", "*Anmerkung: ist der Inhalt dieser Variablen ein Array oder ein Objekt, so lassen sich die Inhalte davon weiterhin ändern. Dazu später mehr.*" ] }, { "cell_type": "code", "execution_count": 15, "id": "39b662d7-ab11-4628-865d-abe4cdc6e6cd", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "outputs": [ { "ename": "TypeError", "evalue": "Assignment to constant variable.", "output_type": "error", "traceback": [ "Stack trace:", "TypeError: Assignment to constant variable.", " at :2:8" ] } ], "source": [ "const hallo3 = \"Hallo\";\n", "hallo3 = \"Tschüss\"; // funktioniert nicht, da \"hallo3\" konstant!" ] }, { "cell_type": "markdown", "id": "ff6bd7f3-5020-4358-a66b-5836ed36dae5", "metadata": { "editable": false, "slideshow": { "slide_type": "" }, "tags": [] }, "source": [ "# Regel für den Unterricht:\n", "**Wir werden kein `var` verwenden! Wir verwenden in aller Regel `let` oder alternativ, wenn sich nichts direkt ändern soll `const`**" ] } ], "metadata": { "kernelspec": { "display_name": "Deno", "language": "typescript", "name": "deno" }, "language_info": { "codemirror_mode": "typescript", "file_extension": ".ts", "mimetype": "text/x.typescript", "name": "typescript", "nbconvert_exporter": "script", "pygments_lexer": "typescript", "version": "5.8.3" } }, "nbformat": 4, "nbformat_minor": 5 }