typescript today
TRANSCRIPT
![Page 1: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/1.jpg)
TypeScript Today
György BalássyVisual Studio and Development Technologies MVPhttp://gyorgybalassy.wordpress.com
![Page 2: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/2.jpg)
AgendaWhat is it?Can we use it?How can we introduce it?Shall we use it?
![Page 3: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/3.jpg)
What is TypeScript?
![Page 4: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/4.jpg)
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
![Page 5: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/5.jpg)
Open source. Started by Microsoft.
Used by many.
![Page 6: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/6.jpg)
TypeScript: JavaScript that scales.
![Page 7: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/7.jpg)
A statically typed superset of JavaScript
that compiles to plain JavaScript.
Great tools enabled by static types.
![Page 8: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/8.jpg)
This is JavaScriptfunction greet(name) { return "Hello, " + name;}
var user = "James Plaster";
document.body.innerHTML = greet(user);
![Page 9: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/9.jpg)
This is TypeScriptfunction greet(name: string) { return "Hello, " + name;}
var user = "James Plaster";
document.body.innerHTML = greet(user);
Transpiled to JavaScript with tsc.
![Page 10: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/10.jpg)
Wait! This is also TypeScript. It is opt-in.
function greet(name) { return "Hello, " + name;}
var user = "James Plaster";
document.body.innerHTML = greet(user);
![Page 11: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/11.jpg)
Features from the future today.Commitment to ECMAScript
compatibility.
modules, let, const, iterators, generators, promises, generics, enums, classes, interfaces,
types, symbols, …
![Page 12: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/12.jpg)
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
![Page 13: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/13.jpg)
Can we use TypeScript?
![Page 14: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/14.jpg)
PoC projectNode.js projectES6Babelasync-await (ES7)Protractor, JasmineExisting JavaScript codebaseTooling support
![Page 15: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/15.jpg)
Node.js vs. ES6 import
tsc understands import, and can produce CommonJS modules
![Page 16: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/16.jpg)
Other ES6 language elements
tsc understands arrow functions, classes, let, const, …
![Page 17: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/17.jpg)
Async - await
tsc can transpile async-await to ES6(ES5 support comes in TypeScript 2.0)
We don’t need Babel any more.
![Page 18: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/18.jpg)
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, …)
![Page 19: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/19.jpg)
Existing JavaScript codebase
tsc has an allowJs option:.ts and .js files can co-exist in the same project
![Page 20: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/20.jpg)
Hiding generated files in WebStormNested view
Output folder
![Page 21: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/21.jpg)
Debugging in WebStorm
Break and step directly into .ts files with .map files
![Page 22: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/22.jpg)
Debugging in WebStormInspect stack trace, variables and types
![Page 23: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/23.jpg)
Protractor stack trace
![Page 24: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/24.jpg)
WebStorm IntelliSense
Type inference
![Page 25: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/25.jpg)
WebStorm IntelliSense
Type information for 3rd party
libraries
![Page 26: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/26.jpg)
WebStorm continuous error checkingWithout manual
compilation
![Page 27: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/27.jpg)
Static analysis: TSLint
WebStorm integration
Command line
tslinttslint-eslint-rulestslint-microsoft-contrib
![Page 28: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/28.jpg)
Code conformance
![Page 29: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/29.jpg)
How can you introduce TypeScript?
![Page 30: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/30.jpg)
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
![Page 31: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/31.jpg)
Achievable goals
Writing code fasterCatching errors in development timeDebugging easilyMinimizing the risk: easy return path
![Page 32: TypeScript Today](https://reader035.vdocuments.mx/reader035/viewer/2022062218/589d59031a28abef688b564b/html5/thumbnails/32.jpg)
„To type, or not to type – that is the question”
- William Scriptspeare