Matt Harrington's slides from "Introduction to TypeScript" at HTML5DevConf, Oct 2013, San Francisco.

1. Intro to TypeScript
Matt Harrington
http://aka.ms/mattharrington
@mh415

2. Agenda
• What is TypeScript and why should you care?
• How to install and use
• Demos
• Feature overview
• Benefits for:
• jQuery users
• Angular devs
• Library writers
• Larger apps

3. What is TypeScript?
TypeScript is a language for application-scale JavaScript
development.
TypeScript is a typed superset of JavaScript that compiles to
plain JavaScript.
Any browser. Any host. Any OS. Open Source.

4. TypeScript
• Classes, modules, arrow
functions (coming in ES6)
• Interfaces, optional static
typing
JavaScript
ES5

5. Workflow
File.ts
compiler
tsc --out File.js File.ts
File.js

6. JavaScript types
String
Number
Array
Boolean
Null
Object
Undefined
Prefer the terms static and dynamic to strong and weak

7. How does TypeScript compare to …?
• Check out Bryan Klimt’s session:
• “Stop Writing JavaScript by Hand: 7 Ways Transpiling Makes JavaScript Better”
• Wednesday @ 1:30pm
• Room N-125

8. How does TypeScript compare to …?
TypeScript
CoffeeScript
Dart
Main aim?
Enable large-scale app
dev with JavaScript
Cleaner syntax, but
compiles to JavaScript
“A new language, with
tools and libraries, for
structured web app
engineering”
JS or something else?
Yes, TS is a superset
New language
New language
Static typing?
Yes
No
Yes
Classes, OOP?
Yes
Yes
Yes
Use 3rd party JS?
Yes
Yes
Sorta (js-interop)
Mac, Linux, Windows?
Yes
Yes
Yes
Which VM?
Any JS VM
Any JS VM
Dart VM or JS VM
Adapted from TypeScript Revealed by Dan Maharry

10. Summary
• Typescriptlang.org & CodePlex
• TypeScript adds:
1.
2.
3.
4.
5.
•
•
•
•
Classes
Modules
Interfaces
Arrow functions
Optional static typing
Compiles to plain old JavaScript. Use anywhere.
Any JavaScript is TypeScript
Use tons of 3rd party libraries
Use it today on projects large and small

11. Questions?
Tweet your questions to @mh415 and use these hashtags #html5devconf and #msdev
@mh415/@msdev