This is an introductory presentation of the TypeScript language. It cover its genesis, its features and its use in Visual Studio 2012

1. TypeScript
Javascript Done Right
Wekoslav Stefanovski
Seavus
24.10.2012

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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)

8. 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

9. 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

10. 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

11. 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).

12. TypeScript declaration
• Any (currently most) valid Javascript is valid
TypeScript
• Closely aligned with existing ECMAScript 6
proposals

13. 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

14. 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();

15. 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.

16. 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.

17. 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.

18. 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!!!

19. 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!!!

20. 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.

21. ?

22. Thank you for your attention.

23. Please rate this lecture
and WIN Windows Phone 8X
by HTC!
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
Powered by:

24. Openness and Interoperability @Microsoft
Microsoft and Port25 Codeplex
Open Source blogs from the resources for
gateway for deeper platform community developers and
exploration of and the OSS Lab teams consumers of open
open source http://Port25.technet.com source projects
engagements http://www.codeplex.com
http://www.microsoft.com/openness
Interoperability Open Up Shared Source
Bridges cross-Industry portal for
technical collaborative Interoperability and Programmatically
works Standards activities sharing code
http://www.microsoft.com
http://www.interoperabilitybridges.com http://www.microsoft.com
/interop/openup /sharedsource
OData Open Spec BizSpark
open source starter kit protocols, file formats, Program for Start-Up
for Internet publishing standards, technical companies from both
of Government datasets Specifications commercial and open
using the Open Data http://www.microsoft.c source backgrounds
http://ogdisdk.cloudapp.net om/openspecific http://www.microsoft.com
ations /bizspark
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