Post on 20-Jan-2017
TypeScriptAndrea Paciolla / @PaciollaAndrea
Andrea Paciolla / @PaciollaAndrea
Get in touch with me:https://github.com/AndreaPaciollahttps://twitter.com/PaciollaAndrea
http://andreapaciolla.it
Frontend Engineer at ObjectWay
Agenda
1. Introduction2. TypeScript, why?3. Installation4. Features5. TypeScript Alternatives6. Where TypeScript is used?7. Conclusion
1. Introduction
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
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
Well...
2. TypeScript, why?
Main reasons to choose TypeScript are...
1. Compile time2. Strong typing3. Type definitions4. Encapsulation5. Private and public accessors
Compile time
JavaScript is an interpreted language errors are revealed at run time
TypeScript compiles your code errors are revealed at compile time
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
Type Definitions
- TypeScript uses files with a .d.ts extension as a sort of "header" file- GitHub repository hosts definition files: DefinitelyTyped
Encapsulation
Through classes, is accomplished by either using the prototype pattern, or by using the closure pattern.
Private and public accessors
A compile-time feature only Private variables are hidden outside of a class JavaScript does not have private vars.
3. Installation
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
4. Features
TypeScript Features
● Data Types Supported● Optional Static Type Annotation● Classes● Interface● Namespace● Arrow Expressions● Type Assertions● Ambient Declarations● Source File Dependencies
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)
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'
TypeScript Classes
● Can implement interfaces● Inheritance● Instance methods/members● Static methods/members● Single constructor● Default/Optional parameter● ES6 class syntax
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
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;
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;
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
TypeScript Arrow Expressions Example
function(arg) {
return arg.toUpperCase;
}
// Arrow expression by using the fat arrow operator
(arg) => arg.toUpperCase();
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.
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;
TypeScript Ambient Declarations
A major design goal of TypeScript is to make easy the use of already existing JavaScript libraries by using declarations.
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
5. TypeScript Alternatives
TypeScript Alternatives?
TypeScript VS Dart / CoffeeScript
6. Where TypeScript is used?
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.
7. Conclusion
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
Bonus
1. TSD vs Typings2. Reference VS amd-dependency3. Union Types4. Function Overloads5. Namespace instead of modules
That’s all! Thank youQuestions?
Get in touch with me:https://github.com/AndreaPaciollahttps://twitter.com/PaciollaAndreahttp://andreapaciolla.it