one language to rule them all: typescript - sdd conference · one language to rule them all:...
TRANSCRIPT
![Page 1: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/1.jpg)
One language to rule them all:
TypeScript
Gil Fink
CEO and Senior Consultant, sparXys
![Page 2: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/2.jpg)
About Me• sparXys CEO and Senior consultant
• Microsoft MVP in the last 8 years
• Pro Single Page Application Development (Apress) co-author
• 4 Microsoft Official Courses (MOCs) co-author
• GDG Rishon and AngularUP co-organizer
![Page 3: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/3.jpg)
Agenda• The why
• TypeScript syntax and language features
• Building a simple end-to-end app with TypeScript
• Summary
![Page 4: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/4.jpg)
Wait! JavaScript?
Are you nuts?
![Page 5: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/5.jpg)
"JavaScript is the assembly language of the Web"
Erik Meijer
![Page 6: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/6.jpg)
“You can write large programs in JavaScript. You
just can’t maintain them”
Anders Hejlsberg
![Page 7: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/7.jpg)
Let’s Be Serious• JavaScript is really a powerful language:
o Functional
o Dynamic
o Can run everywhere
• Huge community
• Big eco-system
• Tools – IDEs, debuggers, test tools and etc.
![Page 8: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/8.jpg)
The Alternatives• We have several alternatives:
• Hard core vanilla JavaScript development
• JavaScript transpilers
• CoffeeScript – http://coffeescript.org
• Dart – http://dartlang.org
• Clojurescript - https://github.com/clojure/clojurescript
• Script# - http://scriptsharp.com/
![Page 9: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/9.jpg)
What is TypeScript?“TypeScript is a typed superset of JavaScript that compiles to
plain JavaScript” ~typescriptlang.org
![Page 10: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/10.jpg)
Hello TypeScriptDemo
![Page 11: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/11.jpg)
TypeScript is Very Flexible
Any Browser Any Host
Any OS Tool Support
![Page 12: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/12.jpg)
Some TypeScript Key Features
Support standard
JavaScript code with
static typing
Encapsulation through classes
and modules
Support for constructors,
properties and functions
Interfaces and enumssupport
Lambda and generics support
Intellisenseand syntax checking
![Page 13: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/13.jpg)
• Modules
• Classes
• Arrow functions
• Default parameters
• Destructuring
• Spread and rest
• Let and const
• for...of
• Object literal
methods
• Shorthand
properties
• Computed
properties
• Octal / binary
literals
• Symbols
• Template strings
Features from the near Future of
the Web (ES2015/6), Today
Choose your compilation scenario.
It is up to you!
![Page 14: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/14.jpg)
From TypeScript to JavaScript
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return “Hi," + this.greeting;
}
}
TypeScript Code JavaScript Code
TypeScriptCompiler
var Greeter = (function () {function Greeter(message) {
this.greeting = message;}Greeter.prototype.greet =
function () { return “Hi," + this.greeting;
};return Greeter;
})();
tsc.js
![Page 15: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/15.jpg)
How Good is TypeScript’sOutput?
![Page 16: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/16.jpg)
tsconfig.json• Enables to configure the compiler options:
o Target language (ES3, ES5, ES6)
o Module system (AMD, ES6, CommonJS and etc.)
o Source map generation
o Remove comments when compiling
o And more
![Page 17: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/17.jpg)
tsconfig.jsonDemo
![Page 18: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/18.jpg)
Some Important Side Notes
• All JavaScript code is TypeScript codeo Simply copy and paste
• All JavaScript libraries work with TypeScripto You will need a declaration file to work with the library
![Page 19: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/19.jpg)
@Types
Demo
![Page 20: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/20.jpg)
TypeScript Type Annotations
• You can add type annotations to variables and
functions
var str: string = ‘hello’; // str is annotated as string
function foo(name: string) : string { // parameter and function annotated
return ‘hello’ + name;
}
![Page 21: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/21.jpg)
TypeScript Types
![Page 22: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/22.jpg)
Type AnnotationsDemo
![Page 23: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/23.jpg)
Classes and Interfaces• You can define classes (same as in ES2015)
• You can define interfaceso And implement them later
interface IGreeter {
greet(): void;
}
class Greeter implements IGreeter{
greeting: string;
greet() {
console.log(this.greeting);
}
}
var Greeter = (function () {
function Greeter() {
}
Greeter.prototype.greet = function () {
console.log(this.greeting);
};
return Greeter;
})();
![Page 24: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/24.jpg)
Modules• Uses ES2015 modules syntax
export interface IGreeter {
greet(): void;
}
export class Greeter implements IGreeter {
greeting: string;
greet() {
console.log(this.greeting);
}
}
var Greeter = (function () {
function Greeter() {
}
Greeter.prototype.greet = function () {
console.log(this.greeting);
};
return Greeter;
}());
exports.Greeter = Greeter;
![Page 25: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/25.jpg)
Classes, Modules and Interfaces
Demo
![Page 26: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/26.jpg)
Building a Simple End-to-End App with
TypeScriptDemo
![Page 27: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/27.jpg)
TypeScript Versions• TypeScript 1.0
• TypeScript 2.0
• Current version: TypeScript 2.3
![Page 28: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/28.jpg)
What’s New in TypeScript2?
• Generators and Iteration for ES5/ES3
• Type-checking for JavaScript files
• Null- and undefined-aware types
• ES2017 Spread and Rest
• Improved any inference
• Tagged union types
• And a lot more
![Page 29: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/29.jpg)
Questions?
![Page 30: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/30.jpg)
Summary• Open source language that compiles into
JavaScript
• Key features:• Code encapsulation
• Maintainable code
• Tooling support
• Learn TypeScript today!
![Page 31: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/31.jpg)
Resources• TypeScript – http://www.typescriptlang.org
• TypeScript Source Code -
https://github.com/Microsoft/TypeScript
• Definitely Typed –
https://github.com/borisyankov/DefinitelyTyped
• My Website – http://www.gilfink.net
• Follow me on Twitter – @gilfink
![Page 32: One language to rule them all: TypeScript - SDD Conference · One language to rule them all: TypeScript Gil Fink CEO and Senior Consultant, sparXys. About Me • sparXys CEO and Senior](https://reader036.vdocuments.mx/reader036/viewer/2022062602/5ee14a21ad6a402d666c3941/html5/thumbnails/32.jpg)
Thank You!