SlideShare a Scribd company logo
1 of 22
Introduction to TypeScript



                            Jeremy Likness (@JeremyLikness)
                            Principal Consultant
                            jlikness@wintellect.com
                                                                Copyright © 2012




consulting   training   design   debugging                    wintellect.com
what we do
    consulting     training    design     debugging

 who we are
   Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins –
   we pull out all the stops to help our customers achieve their goals through advanced
   software-based consulting and training solutions.

 how we do it                                           Training
                                                        •   On-site instructor-led training
   Consulting & Debugging                               •   Virtual instructor-led training
   •   Architecture, analysis, and design services      •   Devscovery conferences
   •   Full lifecycle custom software development
   •   Content creation                                 Design
   •   Project management                               •   User Experience Design
   •   Debugging & performance tuning                   •   Visual & Content Design
                                                        •   Video & Animation Production


consulting    training    design     debugging                                   wintellect.com
Agenda

 •   JavaScript: The Problem
 •   TypeScript: The Solution
 •   Types
 •   Interfaces
 •   Classes
 •   Modules
 •   Before/After Example

consulting   training   design   debugging   wintellect.com
JavaScript: The Problem




consulting   training   design   debugging   wintellect.com
JavaScript – Why?
 • 1995 – Netscape, “make Java more accessible to non-Java
   programmers”
 • Goal was to make it easy to tie into page elements without the need
   for a compiler or knowledge of object-oriented design
 • Loosely-typed scripting language
 • Codenamed “Mocha” started out as “LiveScript” then renamed to
   “JavaScript” (oops, this caused a little bit of confusion, some think this
   was an intentional marketing move between Netscape and Sun)
 • Moved from manipulation of Java applets to manipulation of DOM
   elements
 • 1996 – Microsoft does this a little differently (surprise!) and releases
   VBScript and Jscript – IE 3.0 gets stuck behind the mainstream (1998)
 • 1997 - ECMAScript adopted (ISO in 1998)
 • 2006 – jQuery (no, it’s not JavaScript, but it is certainly ubiquitous)

consulting   training   design   debugging                         wintellect.com
JavaScript – What?
 • Dynamic – variables are not bound to types, only values
 • Object-based (not oriented) – arrays and prototypes
    – myObj.foo = myObj[“foo”]
 • Interpreted, not compiled
 • Functional
 • Supports anonymous functions
 • Closures
 • Global scope
 • Unfortunately, not consistently implemented



consulting   training   design   debugging          wintellect.com
Values are … What?! (1 of 2)
   false.toString();

   [1,2,3].toString();

   "2".toString();

   2.toString();

   02.toString();

   2 .toString();




consulting   training   design   debugging   wintellect.com
Values are … What?! (2 of 2)
   var one = 1;                              var one = [1,2,3];
   one;                                      one;
   typeof one;                               typeof one;

   var two = '2',                            var two = ['1', '2', '3']
   two;                                      two;
   typeof two;                               typeof two;

   var three = one + two;                    one[0] == two[0];
   three;                                    one[0] === two[0];
   typeof three;
                                             var three = one + two;
   var three = Number(one) +                 typeof three;
   Number(two);                              three;
   typeof three;
   three;                                    var three = one.concat(two);
                                             typeof three;
                                             three;


consulting   training   design   debugging                        wintellect.com
Case Sensitive? At least tell me!
   var myObj = { foo : 1, Bar: 2 };
   var result = myObj.foo + myObj.bar;
   typeof result;
   result;




consulting   training   design   debugging   wintellect.com
Parameters … more like “Guidelines”
   var myFunc = function(something) {
      console.log(something); return 1; };
   myfunc();
   myFunc('test');
   myFunc(myFunc);
   myFunc('test', myFunc);

   var myFunc = function() {
   console.log(Array.prototype.slice.call(arguments)); };

   myFunc();
   myFunc('test', 2);




consulting   training   design   debugging                  wintellect.com
Scope is not a Block Party
   var foo = 42;
   function test() { foo = 21; console.log(foo); };
   test();
   foo;
   var foo = 42;
   function test() { var foo = 21; console.log(foo); };
   test();
   foo;

   for(var i = 0; i < 10; i++) {
     setTimeout(function() {
        console.log(i);}, 1000);};
   for (var i = 0; i < 10; i++) {
      (function(e) {
        setTimeout(function() { console.log(e); },
         1000); })(i); };


consulting   training   design   debugging                wintellect.com
Who Knows How to Count?
   for (var x = 0; x < 5; x++) {
       console.log(x);
   }

   for (var x = 0; x < 5; ++x) {
       console.log(x);
   }




consulting   training   design   debugging   wintellect.com
Can You Guess the Result?
   (function() {
       logMe();
       var logMe = function() {
           console.log('TypeScript is more than JavaScript.');
       };
       logMe();

        function logMe() {
            console.log('All JavaScript is valid TypeScript.');
        }
        logMe();

       console.log(parseInt('0114624476'));
   })();




consulting   training   design   debugging                 wintellect.com
Can You Guess the Result?
                                             Variable declaration was hoisted
   (function() {                       Function declaration was hoisted
      var logMe;
      function logMe() {
          console.log('All JavaScript is valid TypeScript.');
      }
      logMe();
      logMe = function() {
          console.log('TypeScript is more than JavaScript.');
      }                                     parseInt assumes Octal
      logMe();
      logMe();
      console.log(parseInt('0114624476'));
   })();




consulting   training   design   debugging                           wintellect.com
TypeScript: The Solution
 • A language for application-scale JavaScript
 • Typed superset of JavaScript that compiles to plain
   JavaScript
 • All valid JavaScript is valid TypeScript!
 • Runs in any browser, host, and OS that supports JavaScript
 • Provides classes, modules, and interfaces to build robust
   components
 • Features available for development-time
 • Gain insight into existing libraries
   https://github.com/borisyankov/DefinitelyTyped
 • http://www.typescriptlang.org

consulting   training   design   debugging          wintellect.com
TypeScript: Types
 •   Any
 •   Number
 •   Boolean
 •   String
 •   Null
 •   Undefined
 •   Object
 •   Void
 •   HTMLElement
 •   Call Signatures
 •   Casting
 •   Types don't exist at runtime
consulting   training   design   debugging   wintellect.com
TypeScript: Interfaces
 •   Set of type definitions
 •   Definitions without implementations
 •   No constructor definitions
 •   No defaults
 •   Parameters may be optional
 •   No run-time representation; only development-time
 •   Interfaces with the same signature are equivalent
 •   May extend other interfaces
 •   Interfaces don't exist at runtime



consulting   training   design   debugging          wintellect.com
TypeScript: Classes
 •   Aligned with ECMAScript 6 specification
 •   Named types with implementations
 •   Class instance type and constructor function
 •   May implement multiple interfaces
 •   Supports inheritance
 •   May have public and private members
 •   Classes exist at runtime and are
     implemented as self-invoking functions

consulting   training   design   debugging   wintellect.com
TypeScript: Modules
 • Body of statements and declarations that create a
   singleton instance
 • May be exported
 • Internal modules are contained within other modules
 • External modules are separately loaded bodies of code
 • Exports declare publicly accessible module members
 • Imports introduce a local identifier to reference a module
 • Ambient declarations allow describing existing JavaScript
   with type definitions
 • Allows modules to be defined with declaration source files
   (*.d.ts)

consulting   training   design   debugging          wintellect.com
demo
   TypeScript: Event Aggregator




consulting   training   design   debugging   wintellect.com
demo
   TypeScript: Before and After




consulting   training   design   debugging   wintellect.com
Questions?




                            Jeremy Likness (@JeremyLikness)
                            Principal Consultant
                            jlikness@wintellect.com



consulting   training   design   debugging                    wintellect.com

More Related Content

What's hot

Dart the Better JavaScript
Dart the Better JavaScriptDart the Better JavaScript
Dart the Better JavaScriptJorg Janke
 
Design patterns in javascript
Design patterns in javascriptDesign patterns in javascript
Design patterns in javascriptAyush Sharma
 
Cómo Java afecta nuestros Diseños
Cómo Java afecta nuestros DiseñosCómo Java afecta nuestros Diseños
Cómo Java afecta nuestros DiseñosHernan Wilkinson
 
Object oriented programming-with_java
Object oriented programming-with_javaObject oriented programming-with_java
Object oriented programming-with_javaHoang Nguyen
 
Method Handles in Java
Method Handles in JavaMethod Handles in Java
Method Handles in Javahendersk
 
[JWPA-1]의존성 주입(Dependency injection)
[JWPA-1]의존성 주입(Dependency injection)[JWPA-1]의존성 주입(Dependency injection)
[JWPA-1]의존성 주입(Dependency injection)Young-Ho Cho
 
OOP, API Design and MVP
OOP, API Design and MVPOOP, API Design and MVP
OOP, API Design and MVPHarshith Keni
 

What's hot (10)

Dart the Better JavaScript
Dart the Better JavaScriptDart the Better JavaScript
Dart the Better JavaScript
 
Design patterns in javascript
Design patterns in javascriptDesign patterns in javascript
Design patterns in javascript
 
Cómo Java afecta nuestros Diseños
Cómo Java afecta nuestros DiseñosCómo Java afecta nuestros Diseños
Cómo Java afecta nuestros Diseños
 
Binding android piece by piece
Binding android piece by pieceBinding android piece by piece
Binding android piece by piece
 
Thinking In Swift
Thinking In SwiftThinking In Swift
Thinking In Swift
 
Core Java Tutorial
Core Java TutorialCore Java Tutorial
Core Java Tutorial
 
Object oriented programming-with_java
Object oriented programming-with_javaObject oriented programming-with_java
Object oriented programming-with_java
 
Method Handles in Java
Method Handles in JavaMethod Handles in Java
Method Handles in Java
 
[JWPA-1]의존성 주입(Dependency injection)
[JWPA-1]의존성 주입(Dependency injection)[JWPA-1]의존성 주입(Dependency injection)
[JWPA-1]의존성 주입(Dependency injection)
 
OOP, API Design and MVP
OOP, API Design and MVPOOP, API Design and MVP
OOP, API Design and MVP
 

Similar to Introduction to TypeScript

LINQ Inside
LINQ InsideLINQ Inside
LINQ Insidejeffz
 
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"Fwdays
 
JUG Münster 2014 - Code Recommenders & Codetrails - Wissenstransfer 2.0
JUG Münster 2014 - Code Recommenders & Codetrails - Wissenstransfer 2.0JUG Münster 2014 - Code Recommenders & Codetrails - Wissenstransfer 2.0
JUG Münster 2014 - Code Recommenders & Codetrails - Wissenstransfer 2.0Marcel Bruch
 
JSLounge - TypeScript 소개
JSLounge - TypeScript 소개JSLounge - TypeScript 소개
JSLounge - TypeScript 소개Reagan Hwang
 
Down With JavaScript!
Down With JavaScript!Down With JavaScript!
Down With JavaScript!Garth Gilmour
 
TDD - Seriously, try it! - Opensouthcode
TDD - Seriously, try it! - OpensouthcodeTDD - Seriously, try it! - Opensouthcode
TDD - Seriously, try it! - OpensouthcodeNacho Cougil
 
Lecture 2 software components ssssssss.pptx
Lecture 2 software components ssssssss.pptxLecture 2 software components ssssssss.pptx
Lecture 2 software components ssssssss.pptxAhmedAlAfandi5
 
Intro to javascript (6:27)
Intro to javascript (6:27)Intro to javascript (6:27)
Intro to javascript (6:27)David Coulter
 
TDD - Seriously, try it - Codemotion (May '24)
TDD - Seriously, try it - Codemotion (May '24)TDD - Seriously, try it - Codemotion (May '24)
TDD - Seriously, try it - Codemotion (May '24)Nacho Cougil
 
TDD - Seriously, try it! - Trójmiasto Java User Group (17th May '23)
TDD - Seriously, try it! - Trójmiasto Java User Group (17th May '23)TDD - Seriously, try it! - Trójmiasto Java User Group (17th May '23)
TDD - Seriously, try it! - Trójmiasto Java User Group (17th May '23)ssusercaf6c1
 
TDD - Seriously, try it! - Trjjmiasto JUG (17th May '23)
TDD - Seriously, try it! - Trjjmiasto JUG (17th May '23)TDD - Seriously, try it! - Trjjmiasto JUG (17th May '23)
TDD - Seriously, try it! - Trjjmiasto JUG (17th May '23)Nacho Cougil
 
Thinkful - Intro to JavaScript
Thinkful - Intro to JavaScriptThinkful - Intro to JavaScript
Thinkful - Intro to JavaScriptTJ Stalcup
 
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...Sang Don Kim
 
How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptKevin Read
 
Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Kevin Read
 
Functional solid
Functional solidFunctional solid
Functional solidMatt Stine
 
TDD - Seriously, try it! (updated '22)
TDD - Seriously, try it! (updated '22)TDD - Seriously, try it! (updated '22)
TDD - Seriously, try it! (updated '22)Nacho Cougil
 
How to crack java script certification
How to crack java script certificationHow to crack java script certification
How to crack java script certificationKadharBashaJ
 

Similar to Introduction to TypeScript (20)

LINQ Inside
LINQ InsideLINQ Inside
LINQ Inside
 
Code Refactoring
Code RefactoringCode Refactoring
Code Refactoring
 
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
 
JUG Münster 2014 - Code Recommenders & Codetrails - Wissenstransfer 2.0
JUG Münster 2014 - Code Recommenders & Codetrails - Wissenstransfer 2.0JUG Münster 2014 - Code Recommenders & Codetrails - Wissenstransfer 2.0
JUG Münster 2014 - Code Recommenders & Codetrails - Wissenstransfer 2.0
 
JSLounge - TypeScript 소개
JSLounge - TypeScript 소개JSLounge - TypeScript 소개
JSLounge - TypeScript 소개
 
Down With JavaScript!
Down With JavaScript!Down With JavaScript!
Down With JavaScript!
 
TDD - Seriously, try it! - Opensouthcode
TDD - Seriously, try it! - OpensouthcodeTDD - Seriously, try it! - Opensouthcode
TDD - Seriously, try it! - Opensouthcode
 
Lecture 2 software components ssssssss.pptx
Lecture 2 software components ssssssss.pptxLecture 2 software components ssssssss.pptx
Lecture 2 software components ssssssss.pptx
 
Intro to javascript (6:27)
Intro to javascript (6:27)Intro to javascript (6:27)
Intro to javascript (6:27)
 
TDD - Seriously, try it - Codemotion (May '24)
TDD - Seriously, try it - Codemotion (May '24)TDD - Seriously, try it - Codemotion (May '24)
TDD - Seriously, try it - Codemotion (May '24)
 
TDD - Seriously, try it! - Trójmiasto Java User Group (17th May '23)
TDD - Seriously, try it! - Trójmiasto Java User Group (17th May '23)TDD - Seriously, try it! - Trójmiasto Java User Group (17th May '23)
TDD - Seriously, try it! - Trójmiasto Java User Group (17th May '23)
 
TDD - Seriously, try it! - Trjjmiasto JUG (17th May '23)
TDD - Seriously, try it! - Trjjmiasto JUG (17th May '23)TDD - Seriously, try it! - Trjjmiasto JUG (17th May '23)
TDD - Seriously, try it! - Trjjmiasto JUG (17th May '23)
 
Thinkful - Intro to JavaScript
Thinkful - Intro to JavaScriptThinkful - Intro to JavaScript
Thinkful - Intro to JavaScript
 
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
 
How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScript
 
Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8
 
Functional solid
Functional solidFunctional solid
Functional solid
 
TDD - Seriously, try it! (updated '22)
TDD - Seriously, try it! (updated '22)TDD - Seriously, try it! (updated '22)
TDD - Seriously, try it! (updated '22)
 
Tdd is not about testing
Tdd is not about testingTdd is not about testing
Tdd is not about testing
 
How to crack java script certification
How to crack java script certificationHow to crack java script certification
How to crack java script certification
 

Recently uploaded

UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewDianaGray10
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Paige Cruz
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxFIDO Alliance
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuidePixlogix Infotech
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...ScyllaDB
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...FIDO Alliance
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfdanishmna97
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxMasterG
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch TuesdayIvanti
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!Memoori
 

Recently uploaded (20)

UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 

Introduction to TypeScript

  • 1. Introduction to TypeScript Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com Copyright © 2012 consulting training design debugging wintellect.com
  • 2. what we do consulting training design debugging who we are Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions. how we do it Training • On-site instructor-led training Consulting & Debugging • Virtual instructor-led training • Architecture, analysis, and design services • Devscovery conferences • Full lifecycle custom software development • Content creation Design • Project management • User Experience Design • Debugging & performance tuning • Visual & Content Design • Video & Animation Production consulting training design debugging wintellect.com
  • 3. Agenda • JavaScript: The Problem • TypeScript: The Solution • Types • Interfaces • Classes • Modules • Before/After Example consulting training design debugging wintellect.com
  • 4. JavaScript: The Problem consulting training design debugging wintellect.com
  • 5. JavaScript – Why? • 1995 – Netscape, “make Java more accessible to non-Java programmers” • Goal was to make it easy to tie into page elements without the need for a compiler or knowledge of object-oriented design • Loosely-typed scripting language • Codenamed “Mocha” started out as “LiveScript” then renamed to “JavaScript” (oops, this caused a little bit of confusion, some think this was an intentional marketing move between Netscape and Sun) • Moved from manipulation of Java applets to manipulation of DOM elements • 1996 – Microsoft does this a little differently (surprise!) and releases VBScript and Jscript – IE 3.0 gets stuck behind the mainstream (1998) • 1997 - ECMAScript adopted (ISO in 1998) • 2006 – jQuery (no, it’s not JavaScript, but it is certainly ubiquitous) consulting training design debugging wintellect.com
  • 6. JavaScript – What? • Dynamic – variables are not bound to types, only values • Object-based (not oriented) – arrays and prototypes – myObj.foo = myObj[“foo”] • Interpreted, not compiled • Functional • Supports anonymous functions • Closures • Global scope • Unfortunately, not consistently implemented consulting training design debugging wintellect.com
  • 7. Values are … What?! (1 of 2) false.toString(); [1,2,3].toString(); "2".toString(); 2.toString(); 02.toString(); 2 .toString(); consulting training design debugging wintellect.com
  • 8. Values are … What?! (2 of 2) var one = 1; var one = [1,2,3]; one; one; typeof one; typeof one; var two = '2', var two = ['1', '2', '3'] two; two; typeof two; typeof two; var three = one + two; one[0] == two[0]; three; one[0] === two[0]; typeof three; var three = one + two; var three = Number(one) + typeof three; Number(two); three; typeof three; three; var three = one.concat(two); typeof three; three; consulting training design debugging wintellect.com
  • 9. Case Sensitive? At least tell me! var myObj = { foo : 1, Bar: 2 }; var result = myObj.foo + myObj.bar; typeof result; result; consulting training design debugging wintellect.com
  • 10. Parameters … more like “Guidelines” var myFunc = function(something) { console.log(something); return 1; }; myfunc(); myFunc('test'); myFunc(myFunc); myFunc('test', myFunc); var myFunc = function() { console.log(Array.prototype.slice.call(arguments)); }; myFunc(); myFunc('test', 2); consulting training design debugging wintellect.com
  • 11. Scope is not a Block Party var foo = 42; function test() { foo = 21; console.log(foo); }; test(); foo; var foo = 42; function test() { var foo = 21; console.log(foo); }; test(); foo; for(var i = 0; i < 10; i++) { setTimeout(function() { console.log(i);}, 1000);}; for (var i = 0; i < 10; i++) { (function(e) { setTimeout(function() { console.log(e); }, 1000); })(i); }; consulting training design debugging wintellect.com
  • 12. Who Knows How to Count? for (var x = 0; x < 5; x++) { console.log(x); } for (var x = 0; x < 5; ++x) { console.log(x); } consulting training design debugging wintellect.com
  • 13. Can You Guess the Result? (function() { logMe(); var logMe = function() { console.log('TypeScript is more than JavaScript.'); }; logMe(); function logMe() { console.log('All JavaScript is valid TypeScript.'); } logMe(); console.log(parseInt('0114624476')); })(); consulting training design debugging wintellect.com
  • 14. Can You Guess the Result? Variable declaration was hoisted (function() { Function declaration was hoisted var logMe; function logMe() { console.log('All JavaScript is valid TypeScript.'); } logMe(); logMe = function() { console.log('TypeScript is more than JavaScript.'); } parseInt assumes Octal logMe(); logMe(); console.log(parseInt('0114624476')); })(); consulting training design debugging wintellect.com
  • 15. TypeScript: The Solution • A language for application-scale JavaScript • Typed superset of JavaScript that compiles to plain JavaScript • All valid JavaScript is valid TypeScript! • Runs in any browser, host, and OS that supports JavaScript • Provides classes, modules, and interfaces to build robust components • Features available for development-time • Gain insight into existing libraries https://github.com/borisyankov/DefinitelyTyped • http://www.typescriptlang.org consulting training design debugging wintellect.com
  • 16. TypeScript: Types • Any • Number • Boolean • String • Null • Undefined • Object • Void • HTMLElement • Call Signatures • Casting • Types don't exist at runtime consulting training design debugging wintellect.com
  • 17. TypeScript: Interfaces • Set of type definitions • Definitions without implementations • No constructor definitions • No defaults • Parameters may be optional • No run-time representation; only development-time • Interfaces with the same signature are equivalent • May extend other interfaces • Interfaces don't exist at runtime consulting training design debugging wintellect.com
  • 18. TypeScript: Classes • Aligned with ECMAScript 6 specification • Named types with implementations • Class instance type and constructor function • May implement multiple interfaces • Supports inheritance • May have public and private members • Classes exist at runtime and are implemented as self-invoking functions consulting training design debugging wintellect.com
  • 19. TypeScript: Modules • Body of statements and declarations that create a singleton instance • May be exported • Internal modules are contained within other modules • External modules are separately loaded bodies of code • Exports declare publicly accessible module members • Imports introduce a local identifier to reference a module • Ambient declarations allow describing existing JavaScript with type definitions • Allows modules to be defined with declaration source files (*.d.ts) consulting training design debugging wintellect.com
  • 20. demo TypeScript: Event Aggregator consulting training design debugging wintellect.com
  • 21. demo TypeScript: Before and After consulting training design debugging wintellect.com
  • 22. Questions? Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com consulting training design debugging wintellect.com

Editor's Notes

  1. false.toString();[1,2,3].toString();&quot;2&quot;.toString();2.toString(); 02.toString();2 .toString();
  2. var one = 1;one;typeof one;var two = &apos;2&apos;,two;typeof two;var three = one + two;three;typeof three; var three = Number(one) + Number(two);typeof three;three;var one = [1,2,3];one;typeof one;var two = [&apos;1&apos;, &apos;2&apos;, &apos;3&apos;]two;typeof two;one[0] == two[0];one[0] === two[0];var three = one + two;typeof three;three;var three = one.concat(two);three;typeof three;
  3. varmyObj = { foo : 1, Bar: 2 };var result = myObj.foo + myObj.bar;typeof result;result;
  4. varmyFunc = function(something) { console.log(something); return 1; };myfunc();myFunc(&apos;test&apos;);myFunc(myFunc);myFunc(&apos;test&apos;, myFunc);varmyFunc = function() { console.log(Array.prototype.slice.call(arguments)); };myFunc();myFunc(&apos;test&apos;, 2);
  5. var foo = 42;function test() { foo = 21; console.log(foo); };test();foo;(clear the screen) var foo = 42;function test() { var foo = 21; console.log(foo); };test();foo; for(vari = 0; i &lt; 10; i++) { setTimeout(function() { console.log(i);}, 1000);};for (vari = 0; i &lt; 10; i++) { (function(e) { setTimeout(function() { console.log(e); }, 1000); })(i); };
  6. for (var x = 0; x &lt; 5; x++) { console.log(x); }for (var x = 0; x &lt; 5; ++x) { console.log(x);}
  7. (function() {logMe();varlogMe = function() { console.log(&apos;TypeScript is more than just JavaScript.&apos;); };logMe(); function logMe() { console.log(&apos;All JavaScript is valid TypeScript.&apos;); }logMe(); console.log(parseInt(&apos;0114624476&apos;));})();
  8. function Add(x: any, y: any): any {    return x + y;}function AddNumbers(x: number, y: number): number {    return x + y; }Add(&quot;this&quot;, &quot;that&quot;); AddNumbers(&quot;this&quot;, &quot;that&quot;); function toDomElement(func: () =&gt; string): string {    return func();}toDomElement(function () { return &quot;this&quot;; });function toDomElement(parm: string): HTMLElement {    return &lt;HTMLElement&gt;parm; }
  9. interface IMessage {    subscribe(callback: (payload?: any) =&gt; void): number;    unSubscribe(id: number): void;    notify(payload?: any): void;}interface ILogger {    log(message: any): void;}interface IMessageWithLogging extends IMessage, ILogger {}
  10. interface HasLength {    length: () =&gt; number;}class Point implements HasLength {    private originalX: number;     private originalY: number;    constructor(public x: number, public y: number) {        this.originalX = x;        this.originalY = y;     }    public length() { return Math.sqrt(this.x * this.x + this.y * this.y); }    static origin = new Point(0, 0);}function Distance(point1: Point, point2: Point): number {    var x = point2.x - point1.x;    var y = point2.y - point1.y;    return Math.sqrt(x *x + y * y);}console.log(Distance(new Point(0, 0), new Point(5, 5)));// console.log(Point.origin.originalX);class Point3D extends Point {    constructor(public x: number, public y: number, public z: number) {        super(x, y);    }    static origin3D = new Point3D(0, 0, 0);}
  11. module Points {    export interface HasLength {        length: () =&gt; number;    }    export class Point implements HasLength {        private originalX: number;        private originalY: number;        constructor(public x: number, public y: number) {            this.originalX = x;            this.originalY = y;        }        public length() { return Math.sqrt(this.x * this.x + this.y * this.y); }        static origin = new Point(0, 0);    }    function Distance(point1: Point, point2: Point): number {        var x = point2.x - point1.x;        var y = point2.y - point1.y;        return Math.sqrt(x * x + y * y);    }    console.log(Distance(new Point(0, 0), new Point(5, 5)));    // console.log(Point.origin.originalX);    class Point3D extends Point {        constructor(public x: number, public y: number, public z: number) {            super(x, y);        }        static origin3D = new Point3D(0, 0, 0);    }    }var point = new Points.Point(1, 2);