TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?

Az előadások a következő témára: "TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?"— Előadás másolata:

1 TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?
Balássy György Principal Engineer, LogMeIn Visual Studio and Development Technologies MVP

2 Mi az a TypeScript?

3 JavaScript feature gap
JavaScript Evolution ES3 ES5 ES2016 ES2017 ES2018 ES2015 State of web JS State of server JS State of the art JS JavaScript feature gap Target Productivity March 2015 March 2016

4 Anders Hejlsberg. Nyílt forráskód. Népszerű.
Microsoft Build 2016 4/11/2018 5:02 AM Anders Hejlsberg. Nyílt forráskód. Népszerű. © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5 Google Trend: TypeScript

6 TypeScript közösség GitHub Stack Overflow Definitely Typed
commit a múlt évben fork star Stack Overflow kérdés, 2× több, mint az előző évben Definitely Typed d.ts deklaráció, 2× több, mint az előző évben

7 TypeScript letöltések

8

9 TypeScript and frameworks
“With TypeScript, several of our team members have said things like “I now actually understand most of our own code!” because they can easily traverse it and understand relationships much better.” -- Brad Green, Engineering Director at Google “One of Ionic's main goals is to make app development as quick and easy as possible, and the tooling support TypeScript gives us with autocompletion, type checking and source documentation really aligns with that.” -- Tim Lancina, Tooling Developer at Ionic “TypeScript helped us to reuse the team’s knowledge and to keep the same team velocity by providing the same excellent developer experience as C# ... A huge improvement over plain JavaScript.” -- Valio Stoychev, PM Lead NativeScript “By combining Aurelia with TypeScript for modern web, mobile and desktop development, we've seen what is perhaps the most beautiful and elegant app development workflow to date.” -- Rob Eisenberg, Architect - Aurelia “TypeScript has helped ensure that Dojo 2 will be built on rock solid foundations, which will make enterprise development better. TS gives us all the benefits of ES6, plus more productivity, … and responsive support from the TypeScript team ” -- Dylan Schiemann, Co-founder - Dojo Toolkit, CEO - SitePen

10 TypeScript: Skálázódó JavaScript.
Microsoft Build 2016 4/11/2018 5:02 AM TypeScript: Skálázódó JavaScript. © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11 Statikusan típusos. A JavaScript supersetje. JavaScriptre fordul
Statikusan típusos. A JavaScript supersetje. JavaScriptre fordul. A fejlesztőeszközök okosabbak lehetnek.

12 Ez JavaScript function greet(name) { return "Hello, " + name; }
var user = "Gipsz Jakab"; document.body.innerHTML = greet(user);

13 Ez TypeScript function greet(name: string) { return "Hello, " + name;
} var user = "Gipsz Jakab"; document.body.innerHTML = greet(user); A tsc tudja JavaScriptre fordítani.

14 De! Ez is TypeScript. A típus opcionális.
function greet(name) { return "Hello, " + name; } var user = "Gipsz Jakab"; document.body.innerHTML = greet(user);

15 Fejlesztőeszközök Visual Studio Sublime Text Atom WebStorm
Visual Studio Code Eclipse Emacs Vim

16 A jövő képességei már ma. ECMAScript kompatibilitás
A jövő képességei már ma. ECMAScript kompatibilitás. module, let, const, iterator, generator, promise, generic, enum, class, interface, type, symbols, …

17 Egy év, négy kiadás 1.8 1.7 1.6 JavaScript in TS projects + control flow analysis 1.5 Async/await on server + polymorphic ‘this’ types Full ES React/JSX Core ES Decorators

18 TypeScript roadmap TypeScript 2.0 TypeScript 2.1 and beyond
Non-nullable types Control flow based type analysis Async/await downlevel support Readonly properties Declared ‘this’ type in functions Improved typings acquisition TypeScript 2.1 and beyond New JS language service in Visual Studio More refactoring support Improved support for ‘this’ in functions And much more…

19 Jó-e nekünk a TypeScript?

20 FedEx Day fókusz: end-to-end tesztek
Node.js project ES6 Babel async-await (ES7) Protractor, Jasmine Meglévő JavaScript kódbázis Eszköztámogatás

21 Node.js vs. ES6 import A tsc érti az import-ot,
és tud CommonJS modulokat generálni.

22 Más ES6 nyelvi elemek A tsc-nek arrow function, class, let, const, … nem gond.

23 Async - await A tsc képes az async-await-et ES6-ra fordítani. (ES5 támogatás majd TypeScript 2.0-ban.) Nem kell többé Babel.

24 Típus definíciók más gyártók könyvtáraira
DefinitelyTyped repository a Githubon: angular-protractor utoljára 1 hónapja frissítve jasmine utoljára 4 napja frissítve selenium-webdriver utoljára 1 hónapja frissítve lodash utoljára 17 napja frissítve typings segítségével könnyen kezelhető (letöltés, frissítés, …)

25 Meglévő JavaScript kódbázis
Létezik egy allowJs kapcsoló a tsc-ben: .ts és .js fájlok közös projektben

26 Generált fájlok elrejtése WebStormban
Egymás alatt Külön mappában

27 Hibakeresés WebStormban
Töréspont közvetlenül a .ts fájlba (.map)

28 Hibakeresés WebStormban
Stack trace, változók és típusok

29 Protractor stack trace

30 WebStorm IntelliSense
Type inference

31 WebStorm IntelliSense
Típus információ más gyártók könyvtáraihoz.

32 Folyamatos fordítás Webstormban
Manuális fordítás nélkül.

33 Statikus elemzés: TSLint
WebStorm integráció Parancssor tslint tslint-eslint-rules tslint-microsoft-contrib

34 Egységes forráskód formázás

35 Hogyan vezethetnénk be a TypeScriptet?

36 Lépések Most: TypeScript az E2E teszteknél
Fejlesztőkörnyezet kialakítása a fejlesztői gépeken Linter szabálykészlet kialakítása WebStorm kódformázási szabálykészlet kialakítása Típus definíciók beszerzése Típus információ hozzáadása a meglévő kódhoz CI/CD környezet felkészítése a TypeScriptre Útmutató a fejlesztők számára Később: TypeScript az alkalmazásban

37 Demó: NG6-starter TodoMVC Example

38 Mit nyertünk vele? Gyorsabban készül a kód Biztosabb refaktor
Több hibát veszünk észre kódolás közben Egyszerűbb hibakeresés Minimális kockázat: egyszerű visszaút

39 „To type, or not to type – that is the question”
- William Scriptspeare Balássy György