Upload
gyoergy-balassy
View
193
Download
1
Embed Size (px)
Citation preview
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