Introducing TypeScript
Large scale JavaScript application
development made easy
By Remo H. Jansen
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...).
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”
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.
Complex !== Complicated
Complicated 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.
TypeScript is the future of JavaScript
TypeScript allows us to use ES6 and ES7 today!
We can use the --target compiler option to
specify ECMAScript target version: ES3, ES5 or
ES6.
Classes
Inheritance
Modules
We can use the --module
compiler option to specify
module code generation:
CommonJS
AMD
System
UMD
Generators “Synchronous Looking
Asynchronous Code”
Async / Await
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
Why do we need TypeScript? (PART II)
“Large codebases are more difficult to maintain
when they are written in dynamic languages”
TypeScript goes beyond ES6 & ES7
TypeScript is a strongly typed programming
language
TypeScript introduces some great design-time
features that are not available in ES6 or ES7.
Namespaces
● AKA Internal modules
● It is recommended to
use ES6 modules
instead
Types
● Design-time only
● Type inference
● Optional type
annotations
● Type guards
● Union types
● Intersection types
Interfaces
● Design-time only
● Structural type system
● Type definitions (.d.ts files)
Generics
● Design-time only
● Generic constraints can be
declared
Getting started with TypeScript!
http://www.typesc
riptlang.org/Playgr
ound
https://github.com
/remojansen/ts-
vscode-boilerplate
Questions?
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

Introducing type script

  • 1.
    Introducing TypeScript Large scaleJavaScript application development made easy By Remo H. Jansen
  • 2.
    What is TypeScript? TypeScriptis 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...).
  • 3.
    JavaScript is TypeScript! “We’reexcited 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”
  • 4.
    Why do weneed 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.
  • 5.
    Complex !== Complicated Complicatedimplies 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.
  • 7.
    TypeScript is thefuture of JavaScript TypeScript allows us to use ES6 and ES7 today! We can use the --target compiler option to specify ECMAScript target version: ES3, ES5 or ES6.
  • 8.
  • 9.
  • 10.
    Modules We can usethe --module compiler option to specify module code generation: CommonJS AMD System UMD
  • 11.
  • 12.
  • 13.
    Decorators Note: The codesnippets 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
  • 14.
    Why do weneed TypeScript? (PART II) “Large codebases are more difficult to maintain when they are written in dynamic languages”
  • 15.
    TypeScript goes beyondES6 & ES7 TypeScript is a strongly typed programming language TypeScript introduces some great design-time features that are not available in ES6 or ES7.
  • 16.
    Namespaces ● AKA Internalmodules ● It is recommended to use ES6 modules instead
  • 17.
    Types ● Design-time only ●Type inference ● Optional type annotations ● Type guards ● Union types ● Intersection types
  • 18.
    Interfaces ● Design-time only ●Structural type system ● Type definitions (.d.ts files)
  • 19.
    Generics ● Design-time only ●Generic constraints can be declared
  • 20.
    Getting started withTypeScript! http://www.typesc riptlang.org/Playgr ound https://github.com /remojansen/ts- vscode-boilerplate
  • 21.
  • 22.
    Thanks! ● Join theDublin TypeScript Meetup to learn more! ● Get 20% off my book “Learning TypeScript” (eBook) using promo code PACKT20 at www.packtpub.com

Editor's Notes

  • #2 I like to think that TypeScript is a tool not a programming language A tool that help us to manage the complexity of large code bases
  • #3 TypeScript is an npm module
  • #4 Typed superset of JavaScript Typed superset of JSX All you JavaScript is valid TypeScript
  • #5 The two main text block in this screen are links, use them to find out more. JavaScript was designed in 10 days. Laws of software evolution. Complexity is evolving even if you work and a TODO app.
  • #6 Logic is increasing in the front-end
  • #8 The features are great to manage complexity but we can’t use them in old browsers