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

Mi az a TypeScript?

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

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.

Google Trend: TypeScript

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

TypeScript letöltések

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

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.

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

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

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

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

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

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, …

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 ES2015 + React/JSX Core ES2015 + Decorators

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…

Jó-e nekünk a TypeScript?

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

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

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

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.

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, …)

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

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

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

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

Protractor stack trace

WebStorm IntelliSense Type inference

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

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

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

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

Hogyan vezethetnénk be a TypeScriptet?

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

Demó: NG6-starter TodoMVC Example

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

„To type, or not to type – that is the question” - William Scriptspeare Balássy György Balassy.Gyorgy@outlook.com http://balassygyorgy.wordpress.com https://github.com/balassy/NG6-todomvc-starter