TypeScriptJavascript Done Right

24.10.2012

Wekoslav StefanovskiSeavus

Agenda

• A little bit of history• Why is TypeScript needed – design goals• Using TypeScript (with Visual Studio or without)• TypeScript declaration

– Types and type annotations– Classes– Interfaces and structural types– Modules

• Why should I use TypeScript today?• Q & A

Who am I

Wekoslav Stefanovski

Senior Developer

Seavus

- Javascript (ab)user since 2000- C# user since 2001

- Joined the Ajax and XHR fun in 2006- Member of the Macedonian .NET user group

- Co-leader of the Macedonian Visual C# user group

A little bit of history

• What is this thing called Javascript???• Prototype-based dynamic scripting language• Build in Netscape in 1995, initially focused on

non-professional developers.• Created by Brendan Eich in a 10-day hack

session.• Standardized as ECMAScript (in 1999), still

plenty incompatible “dialects”• We were somewhat lucky, it could have been

VBScript

Why is TypeScript needed?

• Javascript’s got 99 problems but types ain’t one– Variable hoisting– Some very idiosyncratic behaviors – No explicit includes– The this parameter can be actually that– Abysmal debugging experience– Browser DOM incompatibility is not due to Javascript

• ECMAScript 6 standard specification is a long way off

• Implementations are even further away

Why is TypeScript needed?

• Still people have to use it• It’s lingua franca of the web• People have build many great product using it:

– jQuery– Ext JS– GWT– Knockout– Backbone.js– JSLint / JSHint– Node.js

What exactly 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• What TypeScript does is, it basically formalizes a

static type system that describes JavaScript's dynamic types, but it describes them at development time. (Anders Hejlsberg)

TypeScript design goals

• Extend Javascript to facilitate writing large applications.

• Superset of Javascript• Development tooling support• Compiled Javascript that runs on any Javascript

execution environment (Chakra, V8, Node.js…)• Start with Javascript and add things here and

there• Generate pretty, idiomatic Javascript

Using TypeScript

• Source file / declaration file code organization– .ts for source files– .d.ts for declaration files.– (analogous to .h and .cpp in C++)

• Type safety, intellisense and compile errors• Declarations can be created for existing

Javascript libraries– DOM and jQuery declarations provided with TypeScript– Possible to write your own for any existing Javascript

library

Using TypeScript with Visual Studio

• Tooling support– Static type checking.– Strong type inference.– Symbol-based navigation.– Statement completion / intellisense.– Code refactoring.

• Plug-in available for download

Using TypeScript without Visual Studio

• Support available for most popular code editors (Eclipse, Sublime Text, EMACS, Vim…)

• Node.js package available (typescript)• Command line compiler (tsc).

TypeScript declaration

• Any (currently most) valid Javascript is valid TypeScript

• Closely aligned with existing ECMAScript 6 proposals

TypeScript types and type annotations

• Optional static typing• Applied using a post-fix syntax• Support for built-in Javascript types (number,

string, boolean, null, undefined, void)• Return type of the function can be inferred.• Supports optional types via ? Operator• Subtypes of the Any type• Supports typed arrays

TypeScript arrow notation

• New feature planned for ECMAScript 6.• Compact form of function expressions that omit

the function keyword.• Similar to lambda expressions in C#.• Lexical scoping of this.

var messenger = { message: "Hello World", start: function() { setTimeout(() => { alert(this.message); }, 3000); } }; messenger.start();

TypeScript interfaces and structural types

• Designed for development tooling support only.• Interfaces have no run-time representation - they

are purely a compile-time construct.• Structural type system - interfaces are

automatically implemented by any object/prototype that complies structurally.

• Supports overload by parameter signature.• Supports implementing multiple interfaces.

TypeScript classes

• Classes are alike to the proposed classes for ECMAScript 6.

• public or private member accessibility.• Parameter property declarations via constructor.• Supports single-parent inheritance.• Derived classes make use of super calls to

parent.• Do not support overloads yet.

TypeScript modules

• Analogous to .NET namespaces.• Prevents global variable naming collisions.• Closely aligned with those proposed for

ECMAScript 6.• Allows hiding implementation detail• Allows exposing a public API.

Why should I use TypeScript

• Open Source, hosted on codeplex!!!• Tooling support, for type safety, inference and

refactoring!!!• Static types and compilation helps catch mistakes

& bugs earlier!!!• Structural interfaces & typing!!!• Compiles to idiomatic JavaScript!!!

Why should I use TypeScript (today)

• Support for ECMAScript 6 today!!!• Works alongside existing code!!!• Does not hold your .js files hostage!!!• Anders Hejlsberg is involved!!!

Why shouldn’t I use TypeScript

• It is a remove (albeit a slight one) from the Javascript sources.

• Only at version 0.8 (and it shows)• Limited availability of resources & libraries (can use any

existing JavaScript, albeit with limited type safety and tooling support).

• No support for generics (yet, but is defined in spec).• All types are nullable.• Limited tooling support outside of Visual Studio 2012 or

Monaco web editor.

?

Thank you for your attention.

Help us choose the best Sinergija lecturer! HTC and Microsoft will award you – at the conference end, we’ll give one HTC

Windows Phone 8X to someone from the audience – randomly.

Go to www.mssinergija.net, log in and cast your votes!

You can rate only lectures that you were present at, just once. More lectures you rate, more chances you have.

Please use computers at the front of this room, or rate lecture from your phone or home computer, at Sinergija portal.

This prize contest will end at Thursday, October 24th at 21:00. Winner will be announced at the official Sinergija web portal, www.mssinergija.net

Please rate this lecture and WIN Windows Phone

8X by HTC!

Powered by:

Microsoft andOpen Source

gateway for deeperexploration ofopen source

engagementshttp://www.microsoft.com/openness

Port25blogs from the

platform communityand the OSS Lab

teams http://Port25.technet.com

Codeplexresources for

developers andconsumers of open

source projectshttp://www.codeplex.com

InteroperabilityBridgestechnical collaborativeworks

http://www.interoperabilitybridges.com

Open Upcross-Industry

Interoperability andStandards activitieshttp://

www.microsoft.com/interop/openup

Shared Sourceportal for

Programmaticallysharing code

http://www.microsoft.com/sharedsource

ODataopen source starter

kitfor Internet

publishingof Government

datasetsusing the Open Data

http://ogdisdk.cloudapp

.net

Open Specprotocols, file

formats,standards, technical

Specificationshttp://

www.microsoft.com/

openspecifications

BizSparkProgram for Start-

Upcompanies from

bothcommercial and

opensource backgroundshttp://

www.microsoft.com/bizspark

Openness and InteroperabilityOpenness and Interoperability @Microsoft@Microsoft

How can I receive up-to-date Openness announcements from Microsoft?In addition to the websites above, you can receive regular updates to Microsoft’s openness, interoperability and standards efforts via the following channels:•http://blogs.technet.com/b/openness/ •http://blogs.msdn.com/b/interoperability/ •http://twitter.com/OpenAtMicrosoft •http://port25.technet.com •http://channel9.msdn.com/Blogs/Interoperability