Upload
gyoergy-balassy
View
136
Download
0
Embed Size (px)
Citation preview
TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?
Balássy GyörgyPrincipal Engineer, LogMeInVisual Studio and Development Technologies MVP
Mi az a TypeScript?
„Feature gap”
State ofthe art JS
State of server JS
State ofweb JS
JavaScript feature gap
Target Productivity
JavaScriptEvolution
ES3 ES5 ES20
16 ES
201
7 ES20
18ES
201
5
March 2015
March 2016
Anders Hejlsberg.Nyílt forráskód.
Népszerű.
TypeScript: Skálázódó JavaScript.
Statikusan típusos.
A JavaScript supersetje.
JavaScriptre fordul.
A fejlesztőeszközök okosabbak lehetnek.
Ez JavaScriptfunction greet(name) { return "Hello, " + name;}
var user = "Gipsz Jakab";
document.body.innerHTML = greet(user);
Ez TypeScriptfunction 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);
A jövő képességei már ma.
ECMAScript kompatibilitás.
module, let, const, iterator, generator, promise, generic, enum, class, interface, type, symbols, …
Jó-e nekünk a TypeScript?
FedEx Day fókusz: end-to-end tesztekNode.js projectES6Babelasync-await (ES7)Protractor, JasmineMeglévő JavaScript kódbázisEszkö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ítvejasmine utoljára 4 napja frissítveselenium-webdriver utoljára 1 hónapja frissítvelodash 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 WebStormbanEgymás alatt
Külön mappában
Hibakeresés WebStormbanTöréspont közvetlenül a .ts fájlba (.map)
Hibakeresés WebStormbanStack trace, változók és típusok
Protractor stack trace
WebStorm IntelliSense
Type inference
WebStorm IntelliSenseTípus információ más
gyártók könyvtáraihoz.
Folyamatos fordítás WebstormbanManuális fordítás nélkül.
Statikus elemzés: TSLintWebStorm integráció
Parancssor
tslinttslint-eslint-rulestslint-microsoft-contrib
Egységes forráskód formázás
Hogyan vezethetnénk be a TypeScriptet?
LépésekMost: TypeScript az E2E teszteknél
Fejlesztőkörnyezet kialakítása a fejlesztői gépekenLinter szabálykészlet kialakításaWebStorm kódformázási szabálykészlet kialakításaTípus definíciók beszerzéseTípus információ hozzáadása a meglévő kódhozCI/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ódBiztosabb refaktorTöbb hibát veszünk észre kódolás közbenEgyszerűbb hibakeresésMinimális kockázat: egyszerű visszaút
„To type, or not to type – that is the question”
- William Scriptspeare
Balássy Gyö[email protected]://balassygyorgy.wordpress.comhttps://github.com/balassy/NG6-todomvc-starter