01/2014
Agenda

What is TypeScript.
Language Features.
Integration in Environnement.
Future.

2
What is TypeScript

Why create TypeScript
CoffeScript, Dart, TypeScript…
Transcripting.

3
What is TypeScript/Why create TypeScript
• TypeScript is just a tool to be used at coding-time
to improve the quality of y...
What is TypeScript/CoffeScript, Dart, TypeScript
• CoffeeScript – a fresh coat of paint
• Dart – a fresh look at the web
•...
What is TypeScript/Transcripting

• In reality is not a compilation but a transcripting

6
Language Features
Primitive Type
Grammar
Generics
Poo
Parametres
Exception
Include / Reference
7
Language Features / Primitive Type
•
•
•
•
•
•
•
•

Number
Boolean
String
Void
Null
Undefined
Enum
String Literal
8
Language Features / Grammar

9
Language Features / Grammar
var myString = 'A String';
var myNumber = 1;
var myBoolean = true;
var myString: string = 'A S...
Language Features / Grammar
var example = {
name: 'Example',
id: 5,
collection: ['a', 'b', 'c']
}

11
Language Features / Grammar
var example: {
name: string;
id: number;
collection: string[];
} = {
name: 'Example',
id: 5,
c...
POO / Items
Classes
Interfaces
Function
Modules
Generic

13
Classes
class Car {
// Property (public by default)
engine: string;
// Constructor
// (accepts a value so you can
// initi...
Interface
interface ICar {
engine: string;
color: string;
}
class Car implements ICar {
constructor(
public engine: string...
Function
class Car {
engine: string;
constructor(engine: string) {
this.engine = engine;
}
start() {
return "Started " +
t...
Generics
class G<T> { // parameter T
self: G<T>; // T type argument
f() {
// Both of type G<T>
this.self = this;
}
}

17
Module
module Shapes {
export class Rectangle {
constructor(
public height: number,
public width: number) {
}
}
}
// This ...
Module
// bootstrapper.ts file
// imports the greeter.ts file as the
greeter module
import gt = module('greeter');
export ...
POO / Keyword
•
•
•
•
•
•

Public
Private
Interface
Class
Implements
Module

20
POO/ Function overload
function func(shape: Square): number;
function func(shape: Ellipse): number;
function func(shape: T...
Language Features / Parameter
print(char: string = '0') {
}
print4(index: number = this.length): number {
}
print2(char?: ...
Language Features / Exception
• TypeScript using the throw keyword. In
JavaScript you can follow the throw statement
with ...
Language Features / References
/// <reference path="SimplSocket.ts" />
module MyWebApp.BusinessLogic {
class ComplexWebSoc...
Integration in Environnement
Editor
Web Essentials

25
Environnement / Editor
• Visual studio, WebStorm with IntelliSense and
Debug.
• Sublime Text 2, Vim and eMacs, but it does...
Environnement / Web Essentials
• Produce a minified version of the generated
JavaScript file.
• Will automatically produce...
Future
• 0.9.5
– Focus on user-report issues, Improve reliability,
Improve CPU- and memory-usage

• 1.0RC
– Finish stabili...
Future
• 1.x
– Async/Await
– Mixins
– Protected access
– More ECMAScript 6 language features
– ECMAScript 6 modules syntax...
Questions?

30
Some links…
http://www.typescriptlang.org/
http://typescript.io/
http://en.wikipedia.org/wiki/TypeScript
http://www.dotnet...
Some books…

32
Find out more
• On https://techblog.betclicgroup.com/
About Betclic
•

•

•

Betclic Everest Group, one of the world leaders in online gaming, has a unique portfolio
comprising...
Upcoming SlideShare
Loading in …5
×

Mini-Training: TypeScript

1,958 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,958
On SlideShare
0
From Embeds
0
Number of Embeds
492
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mini-Training: TypeScript

  1. 1. 01/2014
  2. 2. Agenda What is TypeScript. Language Features. Integration in Environnement. Future. 2
  3. 3. What is TypeScript Why create TypeScript CoffeScript, Dart, TypeScript… Transcripting. 3
  4. 4. What is TypeScript/Why create TypeScript • TypeScript is just a tool to be used at coding-time to improve the quality of your JavaScript • TypeScript is designed for development of large applications and compiles down to JavaScript • Adds optional static typing and class-based POO to the language 4
  5. 5. What is TypeScript/CoffeScript, Dart, TypeScript • CoffeeScript – a fresh coat of paint • Dart – a fresh look at the web • TypeScript – the JavaScript of tomorrow 5
  6. 6. What is TypeScript/Transcripting • In reality is not a compilation but a transcripting 6
  7. 7. Language Features Primitive Type Grammar Generics Poo Parametres Exception Include / Reference 7
  8. 8. Language Features / Primitive Type • • • • • • • • Number Boolean String Void Null Undefined Enum String Literal 8
  9. 9. Language Features / Grammar 9
  10. 10. Language Features / Grammar var myString = 'A String'; var myNumber = 1; var myBoolean = true; var myString: string = 'A String'; var myNumber: number = 1; var myBoolean: boolean = true; 10
  11. 11. Language Features / Grammar var example = { name: 'Example', id: 5, collection: ['a', 'b', 'c'] } 11
  12. 12. Language Features / Grammar var example: { name: string; id: number; collection: string[]; } = { name: 'Example', id: 5, collection: ['a', 'b', 'c'] } 12
  13. 13. POO / Items Classes Interfaces Function Modules Generic 13
  14. 14. Classes class Car { // Property (public by default) engine: string; // Constructor // (accepts a value so you can // initialize engine) constructor(engine: string) { this.engine = engine; } } 14
  15. 15. Interface interface ICar { engine: string; color: string; } class Car implements ICar { constructor( public engine: string, public color: string) { } } 15
  16. 16. Function class Car { engine: string; constructor(engine: string) { this.engine = engine; } start() { return "Started " + this.engine; } } 16
  17. 17. Generics class G<T> { // parameter T self: G<T>; // T type argument f() { // Both of type G<T> this.self = this; } } 17
  18. 18. Module module Shapes { export class Rectangle { constructor( public height: number, public width: number) { } } } // This works! var rect = Shapes.Rectangle(10, 4); 18
  19. 19. Module // bootstrapper.ts file // imports the greeter.ts file as the greeter module import gt = module('greeter'); export function run() { var el = document.getElementById('content'); var greeter = new gt.Greeter(el); greeter.start(); } 19
  20. 20. POO / Keyword • • • • • • Public Private Interface Class Implements Module 20
  21. 21. POO/ Function overload function func(shape: Square): number; function func(shape: Ellipse): number; function func(shape: Triangle): number; function func(shape: Shape): number { if (shape instanceof Square) { // Do something } // ... throw new TypeError("Unsupported type!"); } 21
  22. 22. Language Features / Parameter print(char: string = '0') { } print4(index: number = this.length): number { } print2(char?: string) { } print3(...num: number[]) { } 22
  23. 23. Language Features / Exception • TypeScript using the throw keyword. In JavaScript you can follow the throw statement with any type, although typically strings are used to supply an error message. In TypeScript it is more usual to throw an “Error” object. • Only on catch for multiple object Exception 23
  24. 24. Language Features / References /// <reference path="SimplSocket.ts" /> module MyWebApp.BusinessLogic { class ComplexWebSocket extends MyWebApp.BusinessLogic.SimplSocket { } } 24
  25. 25. Integration in Environnement Editor Web Essentials 25
  26. 26. Environnement / Editor • Visual studio, WebStorm with IntelliSense and Debug. • Sublime Text 2, Vim and eMacs, but it does not include the TLS, so there is no IntelliSense 26
  27. 27. Environnement / Web Essentials • Produce a minified version of the generated JavaScript file. • Will automatically produce source map (.js.map) files for debugging purposes as soon as the .ts file is saved. • … 27
  28. 28. Future • 0.9.5 – Focus on user-report issues, Improve reliability, Improve CPU- and memory-usage • 1.0RC – Finish stability work, Finish conformance with 1.0 spec • 1.0 – Begin backward-compatibility 28
  29. 29. Future • 1.x – Async/Await – Mixins – Protected access – More ECMAScript 6 language features – ECMAScript 6 modules syntax – ES6-compatible codegen 29
  30. 30. Questions? 30
  31. 31. Some links… http://www.typescriptlang.org/ http://typescript.io/ http://en.wikipedia.org/wiki/TypeScript http://www.dotnetcurry.com/showarticle.aspx?ID=939 http://www.johnpapa.net/typescriptpost2/ http://www.codeproject.com/Articles/469280/An-introduction-to-Type-Script http://codeforhire.com/2013/06/18/coffeescript-vs-typescript-vs-dart/ 31
  32. 32. Some books… 32
  33. 33. Find out more • On https://techblog.betclicgroup.com/
  34. 34. About Betclic • • • Betclic Everest Group, one of the world leaders in online gaming, has a unique portfolio comprising various complementary international brands: Betclic, Everest Gaming, bet-athome.com, Expekt… Active in 100 countries with more than 12 million customers worldwide, the Group is committed to promoting secure and responsible gaming and is a member of several international professional associations including the EGBA (European Gaming and Betting Association) and the ESSA (European Sports Security Association). Through our brands, Betclic Everest Group places expertise, technological know-how and security at the heart of our strategy to deliver an on-line gaming offer attuned to the passion of our players.

×