SlideShare a Scribd company logo
1 of 10
THE JS SUPERSET
What?
A Strict superset of JavaScript.
Outputs plain JavaScript
Works on all JavaScript engines
It transpiles to JavaScript
Why ?
JavaScript is BROKEN !!!!
Allows compile checking of code.
JavaScript compatible with IE 8 and up.
Offers classes, modules and interfaces.
Basic auto-complete
Open source project, Managed my Microsoft.
Optionally typed
Why Not?
Slows down compile slightly.
Integrating third party libraries.
How ?
To install
Run the following in npm:
Or
in Visual Studio 2013 just install as extention.
(Already in VS 2015)
npm install -g typescript
To Use
Run: script.ts -> script.js
Or
Grunt
typescript: {
all: {
src: ["Scripts/typings/**/*.ts", "www/app/*.ts", "www/app/**/*.ts"],
dest: "www/scripts/appbundle.js",
options: {
sourceMap: true,
declaration: false,
removeComments: true,
noEmitOnError: true,
target: 'ES5',
}
}
Typescript Class
http://www.typescriptlang.org/Playground
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter;
})();
Typescript Module(Namespaces)
module Sayings {
export class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " +
this.greeting;
}
}
}
var greeter = new
Sayings.Greeter("world");
var Sayings;
(function (Sayings) {
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter;
})();
Sayings.Greeter = Greeter;
})(Sayings || (Sayings = {}));
var greeter = new Sayings.Greeter("world");
Typescript Generic
class Greeter<T> {
greeting: T;
constructor(message: T) {
this.greeting = message;
}
greet() {
return this.greeting;
}
}
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return this.greeting;
};
return Greeter;
})();
Other functions
Mixins
Inheritance
Enumerated type
Play on: http://www.typescriptlang.org/Playground
Other solutions

More Related Content

What's hot

Dynamics demoworkbenchv2
Dynamics demoworkbenchv2Dynamics demoworkbenchv2
Dynamics demoworkbenchv2
John Dooley
 
Dynamics demoworkbenchv2
Dynamics demoworkbenchv2Dynamics demoworkbenchv2
Dynamics demoworkbenchv2
John Dooley
 
Dynamics demoworkbenchv3
Dynamics demoworkbenchv3Dynamics demoworkbenchv3
Dynamics demoworkbenchv3
John Dooley
 

What's hot (20)

Tasting Your First Test Burger
Tasting Your First Test BurgerTasting Your First Test Burger
Tasting Your First Test Burger
 
Codeception @ New Business Dept Adira Finance
Codeception @ New Business Dept Adira FinanceCodeception @ New Business Dept Adira Finance
Codeception @ New Business Dept Adira Finance
 
TDC2013 - PHP - Virtualização e Provisionamento de Ambientes com Vagrant e ...
TDC2013 - PHP - Virtualização e Provisionamento de Ambientes com Vagrant e ...TDC2013 - PHP - Virtualização e Provisionamento de Ambientes com Vagrant e ...
TDC2013 - PHP - Virtualização e Provisionamento de Ambientes com Vagrant e ...
 
Xdebug for Beginners
Xdebug for BeginnersXdebug for Beginners
Xdebug for Beginners
 
Ignite talks - 自動化的關鍵
Ignite talks - 自動化的關鍵Ignite talks - 自動化的關鍵
Ignite talks - 自動化的關鍵
 
Visual Regression Testing with Wraith
Visual Regression Testing with WraithVisual Regression Testing with Wraith
Visual Regression Testing with Wraith
 
Dynamics demoworkbenchv2
Dynamics demoworkbenchv2Dynamics demoworkbenchv2
Dynamics demoworkbenchv2
 
Dynamics demoworkbenchv2
Dynamics demoworkbenchv2Dynamics demoworkbenchv2
Dynamics demoworkbenchv2
 
What can possibly go wrong if i dont e2 e test my packages?
What can possibly go wrong if i dont e2 e test my packages?What can possibly go wrong if i dont e2 e test my packages?
What can possibly go wrong if i dont e2 e test my packages?
 
React Typescript for beginners: Translator app with Microsoft cognitive services
React Typescript for beginners: Translator app with Microsoft cognitive servicesReact Typescript for beginners: Translator app with Microsoft cognitive services
React Typescript for beginners: Translator app with Microsoft cognitive services
 
PHP Conference Brasil 2013 - Virtualização e Provisionamento de Ambientes c...
PHP Conference Brasil 2013 - Virtualização e Provisionamento de Ambientes c...PHP Conference Brasil 2013 - Virtualização e Provisionamento de Ambientes c...
PHP Conference Brasil 2013 - Virtualização e Provisionamento de Ambientes c...
 
AdaptTo 2016 Vault Install Hooks with Groovy Console Scripts and Sling Pipes
AdaptTo 2016 Vault Install Hooks with Groovy Console Scripts and Sling PipesAdaptTo 2016 Vault Install Hooks with Groovy Console Scripts and Sling Pipes
AdaptTo 2016 Vault Install Hooks with Groovy Console Scripts and Sling Pipes
 
BSides Iowa 2017 Wanna break JavaScript and APIs in web apps?
BSides Iowa 2017 Wanna break JavaScript and APIs in web apps?BSides Iowa 2017 Wanna break JavaScript and APIs in web apps?
BSides Iowa 2017 Wanna break JavaScript and APIs in web apps?
 
Few command line tools for help Android development
Few command line tools for help Android developmentFew command line tools for help Android development
Few command line tools for help Android development
 
Service Worker 101 (en)
Service Worker 101 (en)Service Worker 101 (en)
Service Worker 101 (en)
 
Dynamics demoworkbenchv3
Dynamics demoworkbenchv3Dynamics demoworkbenchv3
Dynamics demoworkbenchv3
 
Infinum iOS Talks #4 - Making your Swift networking code more awesome with Re...
Infinum iOS Talks #4 - Making your Swift networking code more awesome with Re...Infinum iOS Talks #4 - Making your Swift networking code more awesome with Re...
Infinum iOS Talks #4 - Making your Swift networking code more awesome with Re...
 
HOW TO EXTEND WEBPACK WITH YOUR OWN PLUGINS
HOW TO EXTEND WEBPACK WITH YOUR OWN PLUGINSHOW TO EXTEND WEBPACK WITH YOUR OWN PLUGINS
HOW TO EXTEND WEBPACK WITH YOUR OWN PLUGINS
 
Browserium
BrowseriumBrowserium
Browserium
 
Browserium
BrowseriumBrowserium
Browserium
 

Viewers also liked

Double page spread stages powerpoint
Double page spread stages powerpointDouble page spread stages powerpoint
Double page spread stages powerpoint
kittylantos
 
Renovatie aluminium
Renovatie aluminium Renovatie aluminium
Renovatie aluminium
Sven Torfs
 
EVANGELISTIC PROCESS FOR THE LOCAL CHURCH -TR-15
EVANGELISTIC PROCESS FOR THE LOCAL CHURCH -TR-15EVANGELISTIC PROCESS FOR THE LOCAL CHURCH -TR-15
EVANGELISTIC PROCESS FOR THE LOCAL CHURCH -TR-15
Jordan Jordanidis
 

Viewers also liked (20)

Single Page Application con Angular 2
Single Page Application con Angular 2Single Page Application con Angular 2
Single Page Application con Angular 2
 
TypeScript DevSum 2013
TypeScript DevSum 2013TypeScript DevSum 2013
TypeScript DevSum 2013
 
Typescript for the programmers who like javascript
Typescript for the programmers who like javascriptTypescript for the programmers who like javascript
Typescript for the programmers who like javascript
 
TypeScript
TypeScriptTypeScript
TypeScript
 
Typescript: enjoying large scale browser development
Typescript: enjoying large scale browser developmentTypescript: enjoying large scale browser development
Typescript: enjoying large scale browser development
 
Double page spread stages powerpoint
Double page spread stages powerpointDouble page spread stages powerpoint
Double page spread stages powerpoint
 
Renovatie aluminium
Renovatie aluminium Renovatie aluminium
Renovatie aluminium
 
lA educacion-socialista
lA educacion-socialistalA educacion-socialista
lA educacion-socialista
 
Sermon 1 John 5:8-21
Sermon 1 John 5:8-21Sermon 1 John 5:8-21
Sermon 1 John 5:8-21
 
How do you spell relief???
How do you spell relief???How do you spell relief???
How do you spell relief???
 
EVANGELISTIC PROCESS FOR THE LOCAL CHURCH -TR-15
EVANGELISTIC PROCESS FOR THE LOCAL CHURCH -TR-15EVANGELISTIC PROCESS FOR THE LOCAL CHURCH -TR-15
EVANGELISTIC PROCESS FOR THE LOCAL CHURCH -TR-15
 
Mateo Quintero
Mateo Quintero Mateo Quintero
Mateo Quintero
 
Building Angular 2.0 applications with TypeScript
Building Angular 2.0 applications with TypeScriptBuilding Angular 2.0 applications with TypeScript
Building Angular 2.0 applications with TypeScript
 
Getting Started with TypeScript
Getting Started with TypeScriptGetting Started with TypeScript
Getting Started with TypeScript
 
Furniture industry in India
 Furniture industry in India  Furniture industry in India
Furniture industry in India
 
Typescript in 30mins
Typescript in 30mins Typescript in 30mins
Typescript in 30mins
 
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
Upgrading JavaScript to ES6 and using TypeScript as a shortcutUpgrading JavaScript to ES6 and using TypeScript as a shortcut
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
 
Angular 2 : learn TypeScript already with Angular 1
Angular 2 : learn TypeScript already with Angular 1Angular 2 : learn TypeScript already with Angular 1
Angular 2 : learn TypeScript already with Angular 1
 
Introducing type script
Introducing type scriptIntroducing type script
Introducing type script
 
Why do we need TypeScript?
Why do we need TypeScript?Why do we need TypeScript?
Why do we need TypeScript?
 

Similar to Typescript - a JS superset

JavaScript Core fundamentals - Learn JavaScript Here
JavaScript Core fundamentals - Learn JavaScript HereJavaScript Core fundamentals - Learn JavaScript Here
JavaScript Core fundamentals - Learn JavaScript Here
Laurence Svekis ✔
 
Testing OSGi the "groovy" way - Lars Pfannenschmidt, Dennis Nobel
Testing OSGi the "groovy" way - Lars Pfannenschmidt, Dennis NobelTesting OSGi the "groovy" way - Lars Pfannenschmidt, Dennis Nobel
Testing OSGi the "groovy" way - Lars Pfannenschmidt, Dennis Nobel
mfrancis
 
Lightning talk-ppt-802973941-typescript
Lightning talk-ppt-802973941-typescriptLightning talk-ppt-802973941-typescript
Lightning talk-ppt-802973941-typescript
Neha Gawade
 

Similar to Typescript - a JS superset (20)

JavaScript Unit Testing
JavaScript Unit TestingJavaScript Unit Testing
JavaScript Unit Testing
 
8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation
 
A few good JavaScript development tools
A few good JavaScript development toolsA few good JavaScript development tools
A few good JavaScript development tools
 
JavaScript Core fundamentals - Learn JavaScript Here
JavaScript Core fundamentals - Learn JavaScript HereJavaScript Core fundamentals - Learn JavaScript Here
JavaScript Core fundamentals - Learn JavaScript Here
 
Glimpse of Loops Vs Set
Glimpse of Loops Vs SetGlimpse of Loops Vs Set
Glimpse of Loops Vs Set
 
JVM Web Frameworks Exploration
JVM Web Frameworks ExplorationJVM Web Frameworks Exploration
JVM Web Frameworks Exploration
 
TypeScript
TypeScriptTypeScript
TypeScript
 
Getting started with typescript
Getting started with typescriptGetting started with typescript
Getting started with typescript
 
Java script hello world
Java script hello worldJava script hello world
Java script hello world
 
Unit 4 Java script.pptx
Unit 4 Java script.pptxUnit 4 Java script.pptx
Unit 4 Java script.pptx
 
Testing OSGi the "groovy" way - Lars Pfannenschmidt, Dennis Nobel
Testing OSGi the "groovy" way - Lars Pfannenschmidt, Dennis NobelTesting OSGi the "groovy" way - Lars Pfannenschmidt, Dennis Nobel
Testing OSGi the "groovy" way - Lars Pfannenschmidt, Dennis Nobel
 
Lightning talk-ppt-802973941-typescript
Lightning talk-ppt-802973941-typescriptLightning talk-ppt-802973941-typescript
Lightning talk-ppt-802973941-typescript
 
Breaking Bad CSP
Breaking Bad CSPBreaking Bad CSP
Breaking Bad CSP
 
Joomla! Day Chicago 2011 Presentation - Steven Pignataro
Joomla! Day Chicago 2011 Presentation - Steven PignataroJoomla! Day Chicago 2011 Presentation - Steven Pignataro
Joomla! Day Chicago 2011 Presentation - Steven Pignataro
 
JavaFX JumpStart @JavaOne 2016
JavaFX JumpStart @JavaOne 2016JavaFX JumpStart @JavaOne 2016
JavaFX JumpStart @JavaOne 2016
 
Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016
 
Android develop guideline
Android develop guidelineAndroid develop guideline
Android develop guideline
 
Scripting Oracle Develop 2007
Scripting Oracle Develop 2007Scripting Oracle Develop 2007
Scripting Oracle Develop 2007
 
Moving from Jenkins 1 to 2 declarative pipeline adventures
Moving from Jenkins 1 to 2 declarative pipeline adventuresMoving from Jenkins 1 to 2 declarative pipeline adventures
Moving from Jenkins 1 to 2 declarative pipeline adventures
 
Forseti driven javascript
Forseti driven javascriptForseti driven javascript
Forseti driven javascript
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 

Typescript - a JS superset

  • 2. What? A Strict superset of JavaScript. Outputs plain JavaScript Works on all JavaScript engines It transpiles to JavaScript
  • 3. Why ? JavaScript is BROKEN !!!! Allows compile checking of code. JavaScript compatible with IE 8 and up. Offers classes, modules and interfaces. Basic auto-complete Open source project, Managed my Microsoft. Optionally typed
  • 4. Why Not? Slows down compile slightly. Integrating third party libraries.
  • 5. How ? To install Run the following in npm: Or in Visual Studio 2013 just install as extention. (Already in VS 2015) npm install -g typescript To Use Run: script.ts -> script.js Or Grunt typescript: { all: { src: ["Scripts/typings/**/*.ts", "www/app/*.ts", "www/app/**/*.ts"], dest: "www/scripts/appbundle.js", options: { sourceMap: true, declaration: false, removeComments: true, noEmitOnError: true, target: 'ES5', } }
  • 6. Typescript Class http://www.typescriptlang.org/Playground class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; })();
  • 7. Typescript Module(Namespaces) module Sayings { export class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } } var greeter = new Sayings.Greeter("world"); var Sayings; (function (Sayings) { var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; })(); Sayings.Greeter = Greeter; })(Sayings || (Sayings = {})); var greeter = new Sayings.Greeter("world");
  • 8. Typescript Generic class Greeter<T> { greeting: T; constructor(message: T) { this.greeting = message; } greet() { return this.greeting; } } var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return this.greeting; }; return Greeter; })();
  • 9. Other functions Mixins Inheritance Enumerated type Play on: http://www.typescriptlang.org/Playground