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örgyBalassy.Gyorgy@outlook.comhttp://balassygyorgy.wordpress.comhttps://github.com/balassy/NG6-todomvc-starter