Intro to TypeScript, HTML5DevConf Oct 2013

Intro to TypeScriptMatt Harrington

http://aka.ms/mattharrington@mh415

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

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.

TypeScript• Classes, modules, arrow

functions (coming in ES6)• Interfaces, optional static

typing

JavaScript ES5

Workflow

File.ts compiler File.js

tsc --out File.js File.ts

JavaScript types

String Number Boolean Object

Array Null Undefined

Prefer the terms static and dynamic to strong and weak

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

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

Summary

• Typescriptlang.org & CodePlex• TypeScript adds:

1. Classes2. Modules3. Interfaces4. Arrow functions5. 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

Questions?

@mh415/@msdev

Tweet your questions to @mh415 and use these hashtags #html5devconf and #msdev