An introduction to Typescript for programmers who use JavaScript. It goes through what it is, what's it useful for, how to start using it and some things I've observed while using it. Notes are not available but feel free to PM me if you have any question.

1. Typescript for the
programmers who
like JavaScript
@Andrei_Cimpean

2. What will we cover ?
What it is
What's it useful for
How to get started
Using it

3. What is Typescript ?

4. Typescript is an open
source project started
and maintained by
Microsoft.
It works on any OS.

5. Typescript is a typed
superset of JavaScript
that transpiles to plain
JavaScript.
It offers classes,
modules, and
interfaces.

6. What does transpilation mean ?

7. A transpiler takes the source code of a
programming language as its input and
outputs the source code into another
programming language

8. The typescript compiler
Can generate JS valid
down to IE8.
Compile-time type
checking.
JS code is considered
valid.

9. a typescript class

10. transpiled to a JS type

11. It basically allows you to use features that are not
available out of the box in the targeted language.

12. What does Typescript help with ?

13. Compile time errors
Runtime errors ( traceur )
Better auto-completion
Helps the JS VM in making better code optimizations
Transpiles to ES3, ES5 or ES6

14. http://kangax.github.io/compat-table/
ES5
ES6
ES7

15. Let's pick a ES feature not available yet...

16. Decorators
Proposed for ES7
Typescript 1.5 adds support for ES7 like
Decorators
Decorators are not allowed when targeting ES3

17. decorators in typescript

18. ES5 object literals support arbitrary expressions in
the value position.
ES6 classes only support literal functions as values.
Decorators restore the ability to run code at design
time, while maintaining a declarative syntax.
https://github.com/wycats/javascript-decorators

19. Typescript 1.4 is the current stable version.
The roadmap is planned until 2.0.

20. https://github.com/Microsoft/TypeScript/wiki/Roadmap

21. Language features

22. Classes.
Public, private and protected members.

23. a typescript class

24. transpiled to JavaScript

25. The resulting Type is a just a
JS constructor + prototype trapped in a IIFE.

26. Interfaces

27. a typescript interface

28. transpiled to … nothing

29. About interfaces
No runtime cost.
The type information is erased from a TypeScript
program during compilation.

30. Suggestion: use interfaces everywhere

31. highlighting errors

32. partial matching

33. Integrating 3rd
party libs

34. Libraries and frameworks are described with
interfaces.
Interfaces are defined in files with the .d.ts
extensions and are called ambient definitions.
A repository for TypeScript type definitions:
http://definitelytyped.org/
Check out https://www.npmjs.com/package/tsd

35. You usually create a folder in your project and
dump typings there for the libraries and
frameworks you use.
You need to reference the files in the source
code.

36. using reference paths

37. It's a common practice to create a reference file
where you add the paths for all the definitions
used in your project and just include that
everywhere.

38. Modules

39. Basically namespaces.

40. Declaring a module in typescript

41. Declaring a module in typescript

42. It's a good idea to group things up into small
modules and wrap interfaces together with
classes / functions / etc. .

43. * you probably won't want to do that; it depends on the target of the
compiler and you'll loose the option of only compiling changes
A module can* be spread across multiple files.

44. Starting to use Typescript is easy

45. npm i -g typescript

46. tsc source-code.ts > source-code.js

47. You usually have a source folder from where you
transpile the code into a build / dist folder.

48. There are a lot of projects around grunt or gulp
that help you automate builds.
( in one file, in watch mode, etc. )

49. Gruntfile sample
This grunt task creates a .js file for each .ts file and
maintains the folder structure.
It also creates source maps.

50. Caveat: each save means compile.
You loose some speed, especially when you need
to compile hundreds of files.
It's fast, but it's noticeable.

51. Typescript in text editors / IDEs

52. Example: online visual studio

53. Baked in:
Visual studio / Visual studio code
Plugins for:
Intellij IDEA
Sublime Text
Atom
Vim
Emacs

54. Plugins usually work as a client for TSServer
( an editor service bundled into TypeScript ).
It also outputs errors and warnings on save,
gaining you back some dev speed.

55. How easy it is to find useful information ?

56. Just be careful about 0.9 stuff.
It used to be hard to find things after because 0.9
and 1.0 are incompatible.
You probably won't have issues.

57. Getting started resources
http://www.infoq.com/minibooks/typescript-c-sharp-programmers
http://www.typescriptlang.org/Content/TypeScript%20Language%20Specif
ication.pdf
https://www.edx.org/course/introduction-typescript-microsoft-dev201x-0

58. Debugging Typescript

59. Typescript generates source maps for your code.
Sometimes you do have to go through the
compiled code.

60. http://blog.mgechev.com/2015/04/06/angular2-first-impressions/

61. Hating Typescript

62. It's hard to add it slowly in your codebase.
It's easier to transition towards the web and
assume you don't need to learn JS.
Tsc can fail miserably at catching typing errors
when programming in a more functional style.
You will end up writing ambient definitions for
various – less popular – libraries.

63. Questions ?

64. Thank you !