28
Rachel Appel Appel Consulting http://RachelAppel.com http://Twitter.com/RachelAppel http://Linkedin.com/rachelappel Building Next Generation Apps with TypeScript

Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Rachel Appel Appel Consulting

http://RachelAppel.com

http://Twitter.com/RachelAppel

http://Linkedin.com/rachelappel

Building Next Generation Apps with

TypeScript

Page 2: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Agenda

• TypeScript Intro

• Tools

• Compilation

• Types

• Classes

• Inheritance

• Debugging

• Web and Apps

Page 3: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Get TypeScript

http://www.typescriptlang.org

Page 4: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

TypeScript in the Wild

• Bing

• Monaco

Page 5: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

TypeScript Features ES5 / ES6

Type Checking

Superset of JavaScript

Next-gen JavaScript for the enterprise

Syntactic Sugar

Classes

Generics & Arrow

Functions

Dot notation for properties

Visual Studio Webstorm

Browser tools

Page 6: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Why use TypeScript? More and more server side

logic using JavaScript (Node.JS)

JavaScript was designed for a sapling DOM

tree

SPA App model

JavaScript apps are becoming quite complex

OOP is easier

C# coders forced into JavaScript

Page 7: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Web/HTML/ASP.NET

Windows Store JavaScript

http://www.typescriptlang.org/playground

Visual Studio

Page 8: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Program organization Program

Module

Class

Class

Method

Property

Members

Module

Class

Members

Class Members

Class Members

Page 9: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

DEMO

• TypeScript programs in Visual Studio

Page 10: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

TypeScript Compilation

TypeScript .ts

Compiler

JavaScript .js

Page 11: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

TypeScript compilation

Page 12: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Types

• Primitive and Object

• Any

• Number

• Boolean

• String

• Null *

• Undefined *

• Object

• Void *

• HTMLElement

• Functions

• Enum

Page 13: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Type annotations

• Argument types

• Return types

• Type inference

Page 14: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

DEMO

• Types and annotations

Page 15: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Classes

JS

TS

Page 16: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Classes: Constructors

TS

JS

Page 17: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes
Page 18: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Classes: Members

TS

JS

Page 19: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Enums

Page 20: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Classes: Access modifiers

Page 21: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Accessing a Class and its members

Page 22: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

DEMO

• Creating and using a class

Page 23: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Inheritance

JS

TS

Page 24: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

DEMO

• Inheritance

Page 25: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Debugging TypeScript

Page 26: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

DEMO

• Debugging

Page 27: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Web and Apps

• HTML

• ASP.NET WebForms and ASP.NET MVC

• Windows Store JavaScript apps

http://bit.ly/15iOfFt

Page 28: Building Next Generation Apps with TypeScriptsddconf.com/brands/sdd/library/Next_Generation_OO... · 2015-05-05 · Agenda •TypeScript Intro •Tools •Compilation •Types •Classes

Thank You! Rachel Appel

[email protected]

http://RachelAppel.com

http://Twitter.com/RachelAppel

http://LinkedIn.com/RachelAppel

http://bit.ly/RachNOW Use code APPEL-13 for a 14 day free trial!