TypeScript Today

György BalássyVisual Studio and Development Technologies MVPhttp://gyorgybalassy.wordpress.com

AgendaWhat is it?Can we use it?How can we introduce it?Shall we use it?

What is TypeScript?

The 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

Open source. Started by Microsoft.

Used by many.

TypeScript: JavaScript that scales.

A statically typed superset of JavaScript

that compiles to plain JavaScript.

Great tools enabled by static types.

This is JavaScriptfunction greet(name) { return "Hello, " + name;}

var user = "James Plaster";

document.body.innerHTML = greet(user);

This is TypeScriptfunction greet(name: string) { return "Hello, " + name;}

var user = "James Plaster";

document.body.innerHTML = greet(user);

Transpiled to JavaScript with tsc.

Wait! This is also TypeScript. It is opt-in.

function greet(name) { return "Hello, " + name;}

var user = "James Plaster";

document.body.innerHTML = greet(user);

Features from the future today.Commitment to ECMAScript

compatibility.

modules, let, const, iterators, generators, promises, generics, enums, classes, interfaces,

types, symbols, …

One year, four releases

1.51.6

1.71.8

Core ES2015 +Decorators

Full ES2015 +React/JSX

Async/awaiton server +polymorphic‘this’ types

JavaScript inTS projects +control flow

analysis

Can we use TypeScript?

PoC projectNode.js projectES6Babelasync-await (ES7)Protractor, JasmineExisting JavaScript codebaseTooling support

Node.js vs. ES6 import

tsc understands import, and can produce CommonJS modules

Other ES6 language elements

tsc understands arrow functions, classes, let, const, …

Async - await

tsc can transpile async-await to ES6(ES5 support comes in TypeScript 2.0)

We don’t need Babel any more.

Type definitions for 3rd party libraries

DefinitelyTyped repository on Github:

angular-protractor updated a month agojasmine updated 4 days agoselenium-webdriver updated a month agolodash updated 17 days ago

tsd can manage them (download, update, …)

Existing JavaScript codebase

tsc has an allowJs option:.ts and .js files can co-exist in the same project

Hiding generated files in WebStormNested view

Output folder

Debugging in WebStorm

Break and step directly into .ts files with .map files

Debugging in WebStormInspect stack trace, variables and types

Protractor stack trace

WebStorm IntelliSense

Type inference

WebStorm IntelliSense

Type information for 3rd party

libraries

WebStorm continuous error checkingWithout manual

compilation

Static analysis: TSLint

WebStorm integration

Command line

tslinttslint-eslint-rulestslint-microsoft-contrib

Code conformance

How can you introduce TypeScript?

StepsStep 1: Use TypeScript on the server

Set up build environment on developer machinesSet up linter with custom rulesetSet up formatting rules in your IDEReference type definitions for 3rd party librariesAdapt existing code if neededSet up transpilation on the build serversCreate guideline for developers

Step 2: Use TypeScript in the front-end

Achievable goals

Writing code fasterCatching errors in development timeDebugging easilyMinimizing the risk: easy return path

„To type, or not to type – that is the question”

- William Scriptspeare