Upgrade to Pro — share decks privately, control downloads, hide ads and more …

EKON 20: TypeScript

EKON 20: TypeScript

My slides for my EKON 20 session about TypeScript

Avatar for Sebastian Gingter

Sebastian Gingter

November 08, 2016
Tweet

More Decks by Sebastian Gingter

Other Decks in Technology

Transcript

  1. Sebastian P.R. Gingter @PhoenixHawk Consultant & Software Engineer TypeScript Das

    JavaScript für Delphianer EKON 20, November 2016, Düsseldorf
  2. Sebastian P.R. Gingter @PhoenixHawk Consultant & Software Engineer EKON 20,

    November 2016, Düsseldorf TypeScript Das JavaScript für Delphianer
  3. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Warum ist das für mich relevant? “I’ve said a million times that I’ve said a million times that Javascript is the new Assembler – that Javascript will become the thing that everyone compiles higher level code into.“ - Nick Hodges, Oct. 2012 JavaScript?!?
  4. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Warum ist das für mich relevant? • Sprache des Internets • Läuft auf wirklich jedem Gerät • vom PC, Routern, NAS-Systemen, Tablets, Smartphones • über Wearables, Konsolen, Fernsehern, • bis hin zu Arduinos, Raspberry Pi‘s, IOT-Geräten, Heim-Automatisierung etc. • Viele Desktop- und Mobile Anwendungen sind schon heute in JS geschrieben • Atom Editor, VS Code, Slack, Spotify, GitKraken, Wordpress Desktop App, Ghost, Hyper terminal, Gitbook, Discord, Postman etc. JavaScript?!?
  5. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Ja, wo laufen sie denn? • Wo läuft denn JavaScript konkret? • Client: Browser • Server / Backend: Node.js • Electron (Node + Browser gebundelt) • In anderen Prozessen (RO Script, Edge…) • Datenbanken • CouchDB, Mongo, PouchDB JavaScript!
  6. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Eine kleine historische Reise • Gestartet als LiveScript im Netscape Navigator 2.0, Sept. 1995 • By Brendan Eich • JavaScript 1.1 in Netscape Navigator 3.0, April 1996 • „Jscript“ in Internet Explorer 3, Mai 1996 • Beginn des Browserkriegs • JavaScript 1.3, Oktober 1998, ECMA-262 1st & 2nd Edition • Auch ISO/IEC 16262 • JavaScript 1.5, November 2000, ECMA-262 3rd Edition (1999) JavaScript
  7. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Eine kleine historische Reise • ECMAScript 4 – Standardisierung wurde 2008 abgebrochen • ECMAScript 5 (aka ECMAScript 3.1), Dezember 2009 • Minimales Update von ECMAScript 3, JS 1.5 • ECMAScript 2015 (aka ECMAscript 6th Edition), Juni 2015 • ECMAScript 2016 , (aka ECMAScript 7th Edition), (in Arbeit) JavaScript
  8. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Nicht ganz so einfach… • ES 5: So gut wie überall (ab IE 11+, Ausnahmen z.B. Konqueror, Rhino) • http://kangax.github.io/compat-table/es5/ • ES 6: Node 6.5, Edge, neuere FF, Chrome ab 54 • http://kangax.github.io/compat-table/es6/ • ES 2016: Node 6.5, Edge, FF52 beta, Chrome ab 56 (beta) • Aber: Features fehlen noch überall • http://kangax.github.io/compat-table/es2016plus/ Support
  9. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Nur die größten • Tippfehler führen zu Laufzeitfehlern • Keine Modularisierung (Includes / Usings) • Funktionale Programmierung „this“ zeigt in Callbacks auf Objekte, die man nicht erwartet • Prototypische Vererbung ist…. mindestens Gewöhnungsbedürftig JavaScript Probleme
  10. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Einige… • Transpiler • CoffeeScript • Google‘s Closure Compiler • TypeScript Lösungsansätze
  11. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Weil alle Coolen Kids das nehmen  Warum TypeScript ?
  12. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Was ist das genau? • Entwickelt von Anders Hejlsberg bei Microsoft • Released 2012 • Reines JavaScript • Basis: ECMAScript 2015 • Plus optionale(!) Typisierung • Plus (vorwärtskompatible) Spracherweiterungen • Open Source Transpiler (in TS geschrieben) • Von TS auf ES3, ES2015 und neu auch ES2016 • Transpiler ist vor allem ein “Typlöscher“ TypeScript
  13. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Was ist das genau? • Sprachfeatures • Typsicherheit • OOP • Konstruktoren • Ableitungen • Interfaces • Function overloading • Statische- und Instanz-Member • Module TypeScript
  14. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Starten in 1… 2… 3… Voraussetzungen: • Node.js (JS Ausführungsumgebung) • Text-Editor der Wahl, z.B. VS Code oder Atom npm i typescript -g tsc Hinweis: Globale Installation von Node-Modulen sollte vermieden werden. Dies hier ist nur ein quick-start Beispiel. TypeScript
  15. EKON 20, November 2016 TypeScript – Das JavaScript für Delphianer

    Quellen: Kontakt: • https://nodejs.org • https://www.typescriptlang.org/ • http://code.visualstudio.com/ • [email protected] • @PhoenixHawk Vielen Dank! Fragen? Antworten!