Was ist TypeScript? Einführung in typisiertes JavaScript!

Software kann sehr schnell sehr komplex werden. Im Web kann das schnell zu Bugs führen, die erst zur Laufzeit im Browser entdeckt werden. Dies kann schnell zu unverlässlichen Programmen führen, zu verärgerten Nutzern und zu einer schlechten Entwicklungserfahrung. Aus diesem Grund setzen immer mehr Entwickler auf TypeScript. In diesem Video erkläre ich was TypeScript ist und anschließend schreiben wir noch etwas TypeScript Code im Editor.

TypeScript bringt, wie der Name es schon sagt, ein Type-System mit. Das kann zu mehr Sicherheit und Vertrauen in den eigenen Code führen. Zusätzlich kann es zu einer automatischen Dokumentation führen, wie ihr es im Video am Beispiel von Storybook sehen könnt. Ein Vorteil bringt das auch für externe TypeScript Bibliotheken, die ihr in eurem Code einsetzt, da so zum Teil keine externe Dokumentation benötigt wird.

Neben dem Typ-System bringt TypeScript auch zukünftige JavaScript Funktionen mit die zu einfacheren und besseren Code führen können. TypeScript wir vom TypeScript Compiler zu JavaScript Code transpiliert, der dann im Browser oder auf einem Server ausgeführt werden kann. Der Compiler kann den Code dabei in unterschiedliche JavaScript Versionen übersetzen. Da diese Übersetzung nur dann funktioniert, wenn gültiger TypeScript Code geschrieben wurde, werden viele Bugs vorab entdeckt.

TypeScript bietet für JavaScript Entwickler eine extrem schnelle Einarbeitung, da TypeScript auf JavaScript aufbaut. Dadurch ist ein Großteil eures bisher geschriebenen JavaScript Code auch direkt gültiger TypeScript Code.

▸ Download Node.js: https://nodejs.org/de/download/
▸ TypeScript Website: https://www.typescriptlang.org/
▸ Einführung in VS Code: https://youtu.be/eXFiKu3GRZE
▸ TypeScript tsconfig.json Docs: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
▸ Storybook Crashkurs: https://youtu.be/UPrnl4gBmhc

Die im Video verwendeten Emojis wurden von OpenMoji entworfen - dem Open-Source-Emoji- und Icon-Projekt. Lizenz: CC BY-SA 4.0

▸ OpenMoji Website: https://openmoji.org/
▸ CC BY-SA 4.0 Website: https://creativecommons.org/licenses/by-sa/4.0/

▬ Online-Kurs ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▸ Responsive Webdesign mit HTML, CSS, Bootstrap und Tailwind: https://shop.heise-academy.de/responsive-webdesign-mit-html-css-bootstrap-tailwind

▬ Timestamps ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

00:00 1. Intro
00:27 2. Was ist TypeScript?
01:52 3. TypeScript installieren
03:04 4. Dateien erstellen
03:29 5. JavaScript in TypeScript
04:02 6. TypeScript transpilieren
05:00 7. Implizit vs explizit
07:04 8. Types erstellen
07:43 9. Objekte
08:18 10. Interface erstellen
09:24 11. Optionale Keys
09:41 12. Arrays
11:42 13. Funktionen
14:07 14. Generics
16:20 15. ES Next
17:30 16. tsconfig.json Datei
18:50 17. Types bei JavaScript Paketen
20:48 18. Einblick in die Praxis

▬ Social Media ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▸ Twitter: https://twitter.com/FabianHiller
▸ LinkedIn: https://www.linkedin.com/in/fabianhiller/
▸ GitHub: https://github.com/fabian-hiller
▸ Twitter: https://twitter.com/FabianHiller
▸ Instagram: https://www.instagram.com/fabian.hiller/

▬ Weitere Links ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▸ Impressum: https://www.sifa-digital.de/impressum/