Learn Typescript in 30mins

1. Introduction to TypeScript
Udayakumar Mathivanan
Cloud Solution Architect

2. Your Logo
AGENDA
Why TypeScript?
Language introduction / live-coding
TypeScript and Angular
Comparison with TS alternatives
Conclusion

3. Your Logo
WHAT'S WRONG WITH JAVASCRIPT?
Dynamic typing
Lack of modularity
Verbose patterns (IIFE)
In short: JavaScript development scales badly

4. Your Logo
WHAT'S GOOD ABOUT JAVASCRIPT?
It's everywhere
Huge amount of libraries
Flexible

5. Your Logo
WISHLIST
Scalable HTML5 clientside development
Modular development
Easily learnable for Java developers
Non-invasive (existing libs, browser support)
Long-term vision
Clean JS output (exit strategy)

6. Your Logo
TYPESCRIPT
In short: Lightweight productivity booster
Superset of JavaScript
Optionally typed
Compiles to ES3/ES5
No special runtime
1.0 in April 2014, future ES6 alignment

7. Your Logo
GETTING STARTED
$ npm install -g typescript
$ mv mycode.js mycode.ts
$ tsc mycode.ts

8. OPTIONAL TYPES
Type annotations
> var a = 123
> a.trim()
TypeError: undefined is
not a function
J
S
= 123> var a: string
> a.trim()
'number'Cannot convert
to 'string'.
TS
Type inference
Types dissapear at runtime
> var a = 123
> a.trim()
The property
not exist on
'trim' does
value of
type 'number'.

9. Your Logo
boolean number string type[]any void
Object void boolean integer
long
short
...
String
char
Type[]
OPTIONAL TYPES

10. Your Logo
OPTIONAL TYPES
Types are structural rather than nominal
TypeScript has function types:
var
find:
(elem: string, elems: string[]) => string =
function(elem, elems) {
..
}

11. Your Logo
INTERFACES
MyInterface {
signature
interface
// Call
(param:
member:
number): string
number
optionalMember?: number
myMethod(param: string): void
MyInterface = ...
}
var instance:
instance(1)

12. Your Logo
INTERFACES
Use them to describe data returned in REST calls
User) => {$.getJSON('user/123').then((user:
showProfile(user.details)
}

13. Your Logo
INTERFACES
TS interfaces are open-ended:
interface JQuery {
appendTo(..): ..
..
}
interface JQuery {
draggable(..): ..
..
}jquery.d.t
s
jquery.ui.d.t
s

14. OPTIONAL TYPES: ENUMS
enum Language { TypeScript, Java, JavaScript }
Language.TypeScriptvar lang =
var ts = Language[0]
ts === "TypeScript"
enum Language { TypeScript = 1, Java, JavaScript }
var ts = Language[1]

15. TYPESCRIPT CLASSES
Can implement interfaces
Inheritance
Instance methods/members
Static methods/members
Single constructor
Default/optional parameters
ES6 class syntax
similar
different

16. Your Logo
ARROW FUNCTIONS
Implicit return
No braces for single expression
Part of ES6
function(arg1) {
return arg1.toLowerCase();
}
(arg1) => arg1.toLowerCase();
Lexically-scoped this (no more 'var that = this')

17. Your Logo
string): void }
module StorageModule {
export interface Storage { store(content:
var privateKey = 'storageKey';
export class LocalStorage implements Storage {
store(content: string): void {
localStorage.setItem(privateKey, content);
}
}
export class DevNullStorage Storage {
store(content: string):
implements
void { }
}
= new StorageModule.LocalStorage();
}
var storage: StorageModule.Storage
storage.store('testing');
INTERNAL MODULES

18. Your Logo
string): void }
module StorageModule {
export interface Storage { store(content:
var privateKey = 'storageKey';
export class LocalStorage implements Storage {
store(content: string): void {
localStorage.setItem(privateKey, content);
}
}
export class DevNullStorage Storage {
store(content: string):
implements
void { }
}
= new StorageModule.LocalStorage();
}
var storage: StorageModule.Storage
storage.store('testing');
INTERNAL MODULES

19. Your Logo
INTERNAL MODULES
TS internal modules are open-ended:
module
export class
Webshop {
Cart
}
/// <reference
module Webshop
path="cart.ts" />
{
export class
}
{ .. }
cart.ts
Catalog { .. }
main.ts

20. Your Logo
INTERNAL MODULES
TS internal modules are open-ended:
module
export class
Webshop {
Cart
}
/// <reference
module Webshop
path="cart.ts" />
{
export class
}
{ .. }
cart.ts
Catalog { .. }
main.ts
Can be hierarchical:
module Webshop.Cart.Backend {
...
}
Combine modules:
$ tsc --out main.js main.ts

21. Your Logo
BUILDING TYPESCRIPT
$ tsc -watch main.ts
grunt-typescript
grunt-ts
gulp-type (incremental)
gulp-tsc

22. Your Logo
TOOLING
IntelliJ IDEA
WebStorm
plugin

23. Your Logo
WHO USES TYPESCRIPT?
(duh)

24. TypeScript
Copy JS code Into TS file Compile to JavaScript
• TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
• TypeScript is a language for application scale JavaScript development.
• Any browser. Any host. Any OS.
• Open Source.
~typescriptlang.org
JS JSTS

25. TypeScript Key Features
• Support standard JavaScript code with static typing
• Zero cost: Static types completely disappear at run-time
• Encapsulation though classes, modules and interfaces
• Constructors, properties and functions (public, private)
• Enums
• Lambda and generics support
• Intellisense and syntax checking
• IDE support
• Visual Studio
• Sublime Text, Vi, Emacs
• Eclipse, WebStorm
• Preview Pane – Web Essentials

26. Highlights
Tool Features TypeScript Code
• Type Annotation
• Any and Primitive Type
• Interface, Implementation
• Class, constructor
• Opt. Parameter, overloads
• Event handler
• Get accessor, private, static
• Arrow function, lambda
• Module
• Typed definitions
• And more…
• Type Inference
• Intellisense, statement comp.
• Compile on Save
• Preview Pane
• ECMAScript version
• Redirect JavaScript output
• Generate declaration files

27. TypeScript Versions
• TypeScript 1.3 for VS older (Web Essentials)
• TypeScript 1.3 for VS 2013 Update 2
• TypeScript 1.4 for VS 2013
• TypeScript 1.4 for VS 2015 CTP5
• TypeScript 2.0 (vNext)

28. Your Logo
CONCLUSION
TypeScript allows for gradual adoption
Internal modules
Classes/Interfaces
Some typing
External modules
Type defs
More typing
Generics
Type defs
-noImplicitAny

29. Resources
• http://www.typescriptlang.org
• http://www.typescriptlang.org/Content/TypeScript%20Languag
e%20Specification.pdf
• http://www.typescriptlang.org/Playground
• http://vswebessentials.com/download
• https://github.com/borisyankov/DefinitelyTyped
• https://github.com/Microsoft/TypeScript

30. Angular 2: Built on TypeScript
• http://blogs.msdn.com/b/typescript/archive/2015/03/05/angul
ar-2-0-built-on-typescript.aspx
• http://blogs.msdn.com/b/visualstudio/archive/2015/03/12/a-
preview-of-angular-2-and-typescript-in-visual-studio.aspx

31. Summary
• Open source language that compiles into JavaScript
• Code encapsulation
• Maintainable code
• Tooling support
Application scale JavaScript development is hard
TypeScript makes it easier