- Typescript improves on JavaScript by adding optional static typing, classes, interfaces and other features to address issues like lack of block scope and type safety. - It compiles to plain JavaScript that runs on any browser or platform, allowing use of type checking without limiting deployment targets. - Many companies have adopted Typescript for its readability, code navigation, refactoring and ability to scale to large codebases with many developers.

1. TYPESCRIPT
JS CODING JUST GOT BETTER!

2. ABOUT ME
Amit Bezalel
• UFT & SRF System Architect
• Wrote: C++, Java, C#, JavaScript, now Typescript
• Recently read up on a ton of cloud architecture
• Some articles on codeproject and HP Blog
Amit.Bezalel@hpe.com

3. JAVASCRIPT
On May 1995 a Netscape dev created a new programming language
It took him 10 days
It was called Mocha internally
Then LiveScript
And eventually JavaScript
20 years later it’s the hottest language on the planet !

4. JAVASCRIPT IS HERE TO STAY
Good things in JS:
• The language of the browser
• Widely used for Micro-Services
• A Large community
• A full stack language (Server + UI)
• Very flexible
• Asynchronous
Stack
overflow
2016

5. JAVASCRIPT IS HERE TO STAY
Some bad things:
• No block scope
• Over-flexible function definitions
• No interfaces
• Typing confusions
• Performance pitfalls
• The ‘this’ variable
• Semicolon auto completion

6. TS IMPROVES JS
TS Solutions:
• [√] No block scope
• [√] Over-flexible function definitions
• [√] No interfaces
• [√] Typing confusions
• [√] Performance pitfalls
• [√] The ‘this’ variable
• [x] Semicolon auto completion

7. WHY NOT TYPESCRIPT?
Common complaints I heard:
• Adds a compilation step
• you will have a build process anyway
• Relies on Microsoft
• MS proved itself with C#
• Doesn’t prevent JS pitfalls
• Many of them are prevented (as we saw)
• The price of keeping JS flexibility
• The illusion of safety, but still JS
• IMHO it is actually more safe given that you use types
• OO constructs may be abused
• This also goes for Java / C#

8. IT’S TRENDY
• TS surpasses all other
JS pre-compilers
• TS also passed SASS
which is widely used.
• Fast growing trend line,
indicating exponential
growth in 2016

9. WHO USES TS

10. SOME QUOTES
There are Many blogs about TS, here are some quotes:
• Angular 2.0: “typescript makes code easier to read and
understand”
• Telerik: “TypeScript may be the best of the many JavaScript front
ends”
(even though he didn’t want to use it at the end)
• Wix: “TypeScript generates JavaScript code that is easy to read
and debug”
• Asana: “static typing allows us to skip checks that would
otherwise be required at runtime”
• Microsoft:
• VS Code – An IDE Written in Typescript for Typescript
• The TS compiler itself is also written in TS (wikipedia)

12. WHAT IS ADDED TO JS?
• Features:
• An optional type system
• ES6, ES7 features
• Adds missing OO features
• Compilation
• Compile to any ES flavor (ES3 / ES5 / ES6)
• Fast compilation
• IDE Support:
• Good Code completion (Intellisence)
• Wide adoption in modern IDEs
• Better navigation and readability (jump to def, refactoring)

13. THE TS PROJECT
• Opensource (github)
• Apache 2.0 license
• https://github.com/Microsoft/TypeScript
• TS is Written in TS:
• https://github.com/Microsoft/TypeScript/tree/master/src/compiler
• Live community (bugs / suggesstions / pull requests)
• https://visualstudio.uservoice.com/forums/293070-visual-studio-code

14. LANGUAGE FEATURES
• Basic Types
• Classes (Inheritance, private members)
• Interfaces
• Generics
• Enums
• Mixins
• Let
• Async await
• Arrow functions (obj) => {}
• Modules
• Parameter default values

15. ES5 / ES3 GENERATION

16. ES6 GENERATION

17. TYPESCRIPT IDE SUPPORT
TS Code
completio
n
TS
Debugger
IDE
Performan
ce
Cross
platfor
m
Maturity Release &
activity
Needs
proj /
sln files
VS Code Excellent Good Excellent Yes v1.0 Monthly no
IntelliJ
14+
Webstor
m
Ok Good Ok (high
RAM)
Yes Mature Every
Several
months
no
Visual
studio
2013+
Good Good Bad (For
large TS
projects)
No Mature 3 months yes
Eclipse
TypEcs
Ok Ok Ok Yes v1.0 no recent
activity, 6
months
no

18. WHAT IS VSCODE?
• A new fully featured IDE from Microsoft
• Very lightweight
• MIT licensed opensource in GitHub
• Cross platform (mac/ linux /windows)
• Written over electron (V8 desktop platform)
• Everything is code (including project settings)
• Released v1.0 five days ago!
• A new release each month
• Huge amount of features in each release
• 500,000 users and counting
Releases blog:
https://code.visualstudio.com/blogs

19. COMMONJS & TYPINGS
• Importing npm modules
• Using import / var with require
• Getting type information for npms
• d.ts files
• Definitely typed git repo (ambient)
• Old reference comments (tsd) vs. new (typings) method
• Keeping types across files / modules
• Auto generated typing files (d.ts)
• Installing types from original repo
• The typings install commandline

21. OUR STORY
• Started out with Pure NodeJS 2~4
• Added some more people ~6
• JS Code is hard to understand…
• Moved to TS
• Now we are ~18 and growing!
• Using typescript in UI side as well as backend
• 20+ micro services in our architecture
• Using both intelliJ 15 & VSCode (dev’s choice)

22. OUR CONCLUSIONS
Our Cons:
- Smallish learning curve
- Mixing JS / TS possible, problematic inheritance
Our Pros:
+ Readability and code navigation increased
+ Refactoring & Code completion
+ Types are important
+ Classes and interfaces give structure
+ TS Scales, new team members benefit

23. MICRO SERVICES
• Decoupled, services
• Single responsibility
• Independent technology stacks
• Communication via Rest / WS APIs
• Swagger definitions
Typescript benefits:
• Swagger definitions can be generated from classes (including
types)
• Function signature checking adds interface enforcement

24. TS WITH NODEJS
Benefits:
• Rest body definitions can be generated from object definitions
• Code completion helps keep the correct structures
• Types are enforced for incoming data
Stack
overflow
2016

25. WEB UI & TYPESCRIPT
• Angular 2.0 is written in TypeScript
• You get up to date definitions
• Angular tools are ready for TS usage
• Typescript debugging in browser (via mapping & IDE extension)
• A short learning curve (close to JS)

26. WHAT’S NEXT
The future of typescript (v2.0):
• ReadOnly & abstract Properties
• Async / await support for ES5/ES3 generation
• Private/protected constructors
• Type definition for “this”
• Runtime Type checking for properties
• Much more…
Links:
• https://github.com/Microsoft/TypeScript/wiki/Roadmap