introducing type script
TRANSCRIPT
![Page 1: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/1.jpg)
Introducing TypeScriptLarge scale JavaScript application development made easyBy Remo H. Jansen
![Page 2: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/2.jpg)
What is TypeScript?TypeScript is a typed superset of JavaScript.
Compiles to plain JavaScript.
Any IDE. Any browser. Any host. Any OS.Open Source.
Based on open standards (ES6, ES7...).
![Page 3: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/3.jpg)
JavaScript is TypeScript!
“We’re excited to announce that we have converged the TypeScript and AtScript languages, and that Angular 2, the next version of the popular JavaScript library for building web sites and web apps, will be developed with TypeScript”
![Page 4: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/4.jpg)
Why do we need TypeScript? (PART I)“As a system evolves, its complexity increases unless steps are taken to reduce it”
JavaScript was not designed to deal with the level of complexity required to meet today’s needs.
![Page 5: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/5.jpg)
Complex !== ComplicatedComplicated implies being difficult to understand but
with time and effort, ultimately knowable.
Complex describes the interactions between a number of entities. If the number of entities and interactions between them increase we will get to a point where it would be impossible to know and understand all of them.
![Page 6: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/6.jpg)
![Page 7: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/7.jpg)
TypeScript is the future of JavaScriptTypeScript allows us to use ES6 and ES7
today!
We can use the --target compiler option to specify ECMAScript target version: ES3, ES5 or ES6.
![Page 8: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/8.jpg)
Classes
![Page 9: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/9.jpg)
Inheritance
![Page 10: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/10.jpg)
ModulesWe can use the --module compiler option to specify module code generation:
CommonJS
AMD
System
UMD
![Page 11: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/11.jpg)
Generators “Synchronous Looking Asynchronous Code”
![Page 12: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/12.jpg)
Async / Await
![Page 13: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/13.jpg)
Decorators
Note: The code snippets above are part of an open-source project I’m working on. You can learn more about it at http://inversify.io/
● Metadata Reflection API
![Page 14: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/14.jpg)
Why do we need TypeScript? (PART II)“Large codebases are more difficult to maintain when they are written in dynamic languages”
![Page 15: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/15.jpg)
TypeScript goes beyond ES6 & ES7TypeScript is a strongly typed
programming language
TypeScript introduces some great design-time features that are not available in ES6 or ES7.
![Page 16: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/16.jpg)
Namespaces● AKA Internal modules● It is recommended to
use ES6 modules instead
![Page 17: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/17.jpg)
Types● Design-time only● Type inference● Optional type
annotations● Type guards● Union types● Intersection types
![Page 18: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/18.jpg)
Interfaces● Design-time only● Structural type system● Type definitions (.d.ts files)
![Page 19: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/19.jpg)
Generics● Design-time only● Generic constraints can be
declared
![Page 20: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/20.jpg)
Getting started with TypeScript!
http://www.typescriptlang.org/Playground
https://github.com/remojansen/ts-vscode-boilerplate
![Page 21: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/21.jpg)
Questions?
![Page 22: Introducing type script](https://reader036.vdocument.in/reader036/viewer/2022070516/58729da21a28ab07208b5099/html5/thumbnails/22.jpg)
Thanks!● Join the Dublin TypeScript Meetup to learn more!
● Get 20% off my book “Learning TypeScript” (eBook) using promo code PACKT20 at www.packtpub.com