TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?
-
Upload
gyoergy-balassy -
Category
Software
-
view
139 -
download
0
Transcript of TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?
![Page 1: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/1.jpg)
TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?
Balássy GyörgyPrincipal Engineer, LogMeInVisual Studio and Development Technologies MVP
![Page 2: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/2.jpg)
Mi az a TypeScript?
![Page 3: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/3.jpg)
„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
![Page 4: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/4.jpg)
Anders Hejlsberg.Nyílt forráskód.
Népszerű.
![Page 5: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/5.jpg)
TypeScript: Skálázódó JavaScript.
![Page 6: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/6.jpg)
Statikusan típusos.
A JavaScript supersetje.
JavaScriptre fordul.
A fejlesztőeszközök okosabbak lehetnek.
![Page 7: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/7.jpg)
Ez JavaScriptfunction greet(name) { return "Hello, " + name;}
var user = "Gipsz Jakab";
document.body.innerHTML = greet(user);
![Page 8: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/8.jpg)
Ez TypeScriptfunction greet(name: string) { return "Hello, " + name;}
var user = "Gipsz Jakab";
document.body.innerHTML = greet(user);
A tsc tudja JavaScriptre fordítani.
![Page 9: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/9.jpg)
De! Ez is TypeScript. A típus opcionális.
function greet(name) { return "Hello, " + name;}
var user = "Gipsz Jakab";
document.body.innerHTML = greet(user);
![Page 10: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/10.jpg)
A jövő képességei már ma.
ECMAScript kompatibilitás.
module, let, const, iterator, generator, promise, generic, enum, class, interface, type, symbols, …
![Page 11: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/11.jpg)
Jó-e nekünk a TypeScript?
![Page 12: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/12.jpg)
FedEx Day fókusz: end-to-end tesztekNode.js projectES6Babelasync-await (ES7)Protractor, JasmineMeglévő JavaScript kódbázisEszköztámogatás
![Page 13: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/13.jpg)
Node.js vs. ES6 import
A tsc érti az import-ot, és tud CommonJS modulokat generálni.
![Page 14: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/14.jpg)
Más ES6 nyelvi elemek
A tsc-nek arrow function, class, let, const, … nem gond.
![Page 15: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/15.jpg)
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.
![Page 16: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/16.jpg)
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, …)
![Page 17: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/17.jpg)
Meglévő JavaScript kódbázis
Létezik egy allowJs kapcsoló a tsc-ben:.ts és .js fájlok közös projektben
![Page 18: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/18.jpg)
Generált fájlok elrejtése WebStormbanEgymás alatt
Külön mappában
![Page 19: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/19.jpg)
Hibakeresés WebStormbanTöréspont közvetlenül a .ts fájlba (.map)
![Page 20: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/20.jpg)
Hibakeresés WebStormbanStack trace, változók és típusok
![Page 21: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/21.jpg)
Protractor stack trace
![Page 22: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/22.jpg)
WebStorm IntelliSense
Type inference
![Page 23: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/23.jpg)
WebStorm IntelliSenseTípus információ más
gyártók könyvtáraihoz.
![Page 24: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/24.jpg)
Folyamatos fordítás WebstormbanManuális fordítás nélkül.
![Page 25: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/25.jpg)
Statikus elemzés: TSLintWebStorm integráció
Parancssor
tslinttslint-eslint-rulestslint-microsoft-contrib
![Page 26: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/26.jpg)
Egységes forráskód formázás
![Page 27: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/27.jpg)
Hogyan vezethetnénk be a TypeScriptet?
![Page 28: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/28.jpg)
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
![Page 29: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/29.jpg)
Demó: NG6-starter TodoMVC Example
![Page 30: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/30.jpg)
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
![Page 31: TypeScript: Tényleg ez lenne a fájdalommentes JavaScript?](https://reader035.fdocuments.net/reader035/viewer/2022070600/589d59031a28abef688b564d/html5/thumbnails/31.jpg)
„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