TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional static types, classes, and interfaces to JavaScript to help catch errors. The main benefits of TypeScript are compile time type checking, type definitions from definition files, and features like classes, interfaces, and modules. It is commonly used in large projects and with Angular. While it has good support for enterprises, its compiler can be slow and not all JavaScript libraries yet have definition files.

1. TypeScript
Andrea Paciolla / @PaciollaAndrea

2. Andrea Paciolla / @PaciollaAndrea
Get in touch with me:
https://github.com/AndreaPaciolla
https://twitter.com/PaciollaAndrea
http://andreapaciolla.it
Frontend Engineer at ObjectWay

3. Agenda
1. Introduction
2. TypeScript, why?
3. Installation
4. Features
5. TypeScript Alternatives
6. Where TypeScript is used?
7. Conclusion

4. 1. Introduction

5. TypeScript is...
TypeScript lets you write JavaScript the way
you really want to.
TypeScript is a typed superset of JavaScript
that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.
It follows the ECMAScript standards in any new versions

6. Overview
▷ Syntax based on ECMAScript 4 & ECMASCript 6 proposals
▷ TS is first and foremost a superset of JS
▷ Any regular Javascript is valid TypeScript Code

7. Well...

8. 2. TypeScript,
why?

9. Main reasons to choose TypeScript are...
1. Compile time
2. Strong typing
3. Type definitions
4. Encapsulation
5. Private and public accessors

10. Compile time
JavaScript is an interpreted language errors are revealed at run time
TypeScript compiles your code errors are revealed at compile time

11. Strong Typing
Object oriented languages do not allow the type of a
variable to change – hence they are called strongly typed
languages.
The IDE can understand what type of variable you are
working with, and can bring better autocomplete or
Intellisense options

12. Type Definitions
- TypeScript uses files with a .d.ts extension as a sort of "header" file
- GitHub repository hosts definition files: DefinitelyTyped

13. Encapsulation
Through classes, is accomplished by either using the prototype pattern, or by
using the closure pattern.

14. Private and public accessors
A compile-time feature only Private variables are hidden outside of a class
JavaScript does not have private vars.

15. 3. Installation

16. Get TypeScript setup
For more details check: https://www.typescriptlang.org/docs/tutorial.html
Via npm
$ npm install -g typescript
Visual Studio has a plugin
WebStorm has got built-in plugin

17. 4. Features

18. TypeScript Features
● Data Types Supported
● Optional Static Type Annotation
● Classes
● Interface
● Namespace
● Arrow Expressions
● Type Assertions
● Ambient Declarations
● Source File Dependencies

19. Data Types
● Any (Just when we cannot get the right interface)
● Primitive (most of cases)
○ number
○ boolean
○ string
○ void
○ null
● Array (most of cases)
● Custom (we can define types by using interfaces)

20. Type Annotation
var a = 987;
a.trim();
// javascript error: typeError: a.trim is not a function on line xxx
var a = 987;
a.trim();
// Property 'trim' does not exist on type 'number'
var a:string = 123;
a.trim()
// cannot convert 'number' to 'string'

21. TypeScript Classes
● Can implement interfaces
● Inheritance
● Instance methods/members
● Static methods/members
● Single constructor
● Default/Optional parameter
● ES6 class syntax

22. TypeScript Classes
interface IComplexType {
name: string;
print(): string;
};
class ComplexType implements IComplexType {
name: string;
print(): string {
return "name:" + this.name;
}
};
var complexType: ComplexType = new ComplexType();
complexType.name = "complexType";
console.log(complexType.print()); // name:complexType

23. TypeScript Interfaces
● By convention they start with ‘I’ - e.g. IWebRTCPeer
● Used in classes with ‘implements’ keyword
● Used on typings context with semicolon syntax - e.g. let dot: IDot;

24. TypeScript Namespaces
// Used to group classes and interfaces under a common name
declare namespace WebRTCTypings {
interface IComplexType {
name: string;
print(): string;
};
}
var complexType: WebRTCTypings.ComplexType;

25. TypeScript Arrow Expressions
● Implicit return
● No braces for single expression
● Part of ES6
● Lexically scoped this
● You don't need to keep typing function
● It lexically captures the meaning of arguments

26. TypeScript Arrow Expressions Example
function(arg) {
return arg.toUpperCase;
}
// Arrow expression by using the fat arrow operator
(arg) => arg.toUpperCase();

27. TypeScript Type Assertions
TypeScript's type assertion are purely you telling the compiler that you know
about the types better than it does, and that it should not second guess you.

28. TypeScript Type Assertions Example
var foo = {};
foo.bar = 123; // error in js --> bar does not exist
// TS Way
interface IFoo {
bar: number;
}
var foo: IFoo;
foo.bar = 123;

29. TypeScript Ambient Declarations
A major design goal of TypeScript is to make easy the use of already existing
JavaScript libraries by using declarations.

30. TypeScript Source File
Get dependencies by using reference.
● Can be done using reference keyword
● Must be the first statement of file
● Paths are relative to the current file
● Can also be done using tsconfig file

31. 5. TypeScript
Alternatives

32. TypeScript Alternatives?
TypeScript VS Dart / CoffeeScript

33. 6. Where
TypeScript is
used?

34. Spread TS Worldwide
Typescript is being adopted by tons of
companies each day.
In particular, the Angular 2 adoption of TS is
spreading it more and more.

35. 7. Conclusion

36. 7. Conclusion
PROs
● Highly scalable
● Good for enterprise projects
● Solid abstraction of Ecma Standards
CONs
● Slow compiler
● Not enough d.ts (JS libraries are getting more and more)
● Not for libraries

37. Bonus
1. TSD vs Typings
2. Reference VS amd-dependency
3. Union Types
4. Function Overloads
5. Namespace instead of modules

38. That’s all! Thank you
Questions?
Get in touch with me:
https://github.com/AndreaPaciolla
https://twitter.com/PaciollaAndrea
http://andreapaciolla.it