TypeScript is a superset of JavaScript that primarily adds support for static types, classes, and interfaces to the language without imposing constraints on JavaScript code. It is primarily used to enable catching errors earlier and providing better tooling support. Some key benefits of TypeScript include managing modules and namespaces, scoping variables, and adding type safety to JavaScript code. TypeScript code is compiled to plain JavaScript, so any valid JavaScript code is also valid TypeScript code.

1. TYPESCRIPT
THE NEXT FRONTIER

2. It’s JavaScript…
Yep, its TypeScript
It’s a script…?

3. What isTypeScript and why should we use it?
• TypeScript is a SUPERSET of JavaScript…. But use it respectfully.
• Any JavaScript isValid TypeScript
//JAVASCRIPT
var myString1 = "Hello";
var myString2 = "World!";
var finalString = myString1 + " " + myString2;
//TYPESCRIPT
var myString1 = "Hello";
var myString2 = "World!";
var finalString = myString1 + " " + myString2;
Two Exceptions:
1. JavaScript’s With Statements
2. Vender Specific Extensions – i.e.: Mozilla’s CONST
…..Well sort of
• So what ‘problems’ does TypeScript solve in JavaScript then?
• Prototypal Inheritance
• Management of Modules (namespaces)
• Scoping
• Lack ofTypes
3

4. What isTypeScript and why should we use it?
4
var FelineSoft;
(function (FelineSoft) {
var Employee = (function () {
function Employee(options) {
this.firstName = options.firstName;
this.lastName = options.lastName;
this.payType = options.payType;
this.payRate = options.payRate;
this.title = options.title || "";
}
Employee.prototype.calculatePay = function (hoursWorked) {
if (this.payType === PayType.Hourly) {
var pay = new Pay();
return pay.calculatePay(hoursWorked, this.payRate);
}
else {
return this.payRate;
}
};
Employee.prototype.fireThem = function () {
return this.firstName + " " + this.lastName + ", you are FIRED!";
};
return Employee;
})();
FelineSoft.Employee = Employee;
var Pay = (function () {
function Pay() { }
Pay.prototype.calculatePay = function (hours, poundsPerHour) {
return hours * poundsPerHour; };
return Pay;
})();
var PayType;
(function (PayType) {
PayType[PayType["Hourly"] = 0] = "Hourly";
PayType[PayType["Salary"] = 1] = "Salary";
})(PayType || (PayType = {}));
})(FelineSoft || (FelineSoft = {}));
namespace FelineSoft {
export class Employee {
private firstName: string;
private lastName: string;
private payType: PayType;
private payRate: number;
private title: string;
constructor(options: IEmployeOptions) {
this.firstName = options.firstName;
this.lastName = options.lastName;
this.payType = options.payType;
this.payRate = options.payRate;
this.title = options.title || "";
}
calculatePay(hoursWorked: number): number {
if (this.payType === PayType.Hourly) {
const pay = new Pay();
return pay.calculatePay(hoursWorked, this.payRate);
}
else { return this.payRate; }
}
fireThem(): string {
return this.firstName + " " + this.lastName + ", you are FIRED!";
}
}
class Pay {
calculatePay(hours: number, poundsPerHour: number): number {
return hours * poundsPerHour;
}
}
enum PayType {
Hourly = 0,
Salary = 1
}
// DOES NOT CONVERT TO JAVASCRIPT
export interface IEmployeOptions {
firstName: string;
lastName: string;
payType: PayType;
payRate: number;
title?: string;
}
}

5. TypeScript andVisual Studio
5
• TypeScript – Kind of Important (CurrentVersion 1.8.4)

6. TypeScript andVisual Studio
6
• Web Essentials (CurrentVersion 2015.1)

7. TypeScript andVisual Studio
7
• BasicVisual Studio Settings forTypeScript

8. TypeScript andVisual Studio
8

9. TypeScript andVisual Studio
9

10. TypeScript andVisual Studio
10

11. TheTypeScript Basics
11
Variables
• The First Character must be:
• Uppercase Letter
• Lowercase Letter
• Underscore
• Dollar Sign <= Warning
• Reserved Words
var ThisIsValid;
var thisIsValid;
var _andthisIsValid;
var $AlsoValid;
break case catch class const continue debugger default delete do else enum export
extends false finally for function if import in instanceof new null return super
switch this throw true try typeof var void while with implements interface let package
private protected public static yield any boolean number string symbol abstract as
async await constructor declare from get is module namespace of require set type

12. TheTypeScript Basics
12
Types
namespace Presentation {
var badGlobalVariable;
var goodGlobalString: string;
export class BadClass {
classVariable;
}
export class GoodClass {
classString: string;
}
}
var Presentation;
(function (Presentation) {
var badGlobalVariable;
var goodGlobalString;
var BadClass = (function () {
function BadClass() {
}
return BadClass;
})();
Presentation.BadClass = BadClass;
var GoodClass = (function () {
function GoodClass() {
}
return GoodClass;
})();
Presentation.GoodClass = GoodClass;
})(Presentation || (Presentation = {}));
• Declaring a type is optional, but then you defeat the point of using TypeScript
• To declare a type, use this syntax:
• In a namespace/module
• var myString: string;
• In a class
• myString: string;
• What types are available in TypeScript?
• Strings
• Booleans
• Numbers (all numbers, integers, decimals, floats, etc.)
• Objects
• Arrays
• Enumerations / Bit Flags
• Any

13. TheTypeScript Basics
13
Operations
• Increment / Decrement : ++ / --
• Math: + - * / %
• String to Number Converter: +string or –string
• Bit Wise: << >> >>> & ^ | ~
• Not Operator: ! !!
• And Operator: &&
• Or Operator: ||
• Type Operator: typeof instanceof in delete
namespace Presentation {
export class Foo {
myString: string = "1";
myNumber: number = 1;
addStringAndNumber(): number {
return this.myNumber + +this.myString;
}
subtractStringAndNumber(): number {
return this.myNumber - +this.myString;
}
}
}
namespace Presentation {
export class Foo {
truthyString: string = 'Truthy string';
falseyString: string;
test(): void {
// False, it checks the string but inverts the truth
var invertedTest = !this.truthyString;
// True, the string is not undefined or empty
var truthyTest = !!this.truthyString;
// False, the string is empty
var falseyTest = !!this.falseyString;
}
}
}

14. TheTypeScript Basics
14
Functions
• Functions are just Methods
• Inside a class, just the name
• Outside a class, you must include the keyword ‘function’
• Parameters
• Optional Parameters
• Default Parameters
• Rest Parameters
• Overloads
• Arrow Functions
• Return Values
namespace Presentation {
export class Foo {
myClassMethod(): void {
//DO SOMETHING
}
}
function myGlobalFunction(): void {
//DO SOMETHING
}
}
namespace Presentation {
export class Foo {
getString(): string {
return "Hello World!";
}
getNumber(): number {
return 1;
}
getNothing(): void {
// HA HA HA, nothing to return
}
}
}
namespace Presentation {
export class Foo {
getAverage(a: string, b: string, c: string): string;
getAverage(a: number, b: number, c: number): string;
getAverage(a: any, b: any, c: any): string {
var total = parseInt(a, 10) + parseInt(b, 10) + parseInt(c, 10);
var average = total / 3;
return `The average is ${average}`;
}
}
}
namespace Presentation {
export class Foo {
methodWithOptionalParams(param?: string): void {
//DO SOMETHING
}
methodWithDefaultParams(param: string = "default"): void {
//DO SOMETHING
}
methodWithRestParams(...param: string[]): void {
//DO SOMETHING
}
}
}

15. TheTypeScript Basics
15
NameSpaces
• Namespaces used to be referred to as Modules
• Namespaces can be nested
• Top level namespaces do not need to be mark for export
• Anything accessed by something outside of its parent
namespace must be marked for export
namespace Presentation {
export class MyClass {
myString: string;
myNumber: number;
constructor() {
this.myString = "Hello World!";
this.myNumber = 42;
}
}
}
namespace Level1 {
namespace Level2a {
export class L2aClass {
}
Level1.Level2b.L2bClass // ACCESSABLE
}
export namespace Level2b {
export class L2bClass {
}
Level1.level2a.L2aClass // NOT ACCESSABLE
}
}
namespace LevelA {
Level1.Level2a.L2aClass // NOT ACCESSABLE
Level1.Level2b.L2bClass // ACCESSABLE
}
module Presentation {
export class MyClass {
myString: string;
myNumber: number;
constructor() {
this.myString = "Hello World!";
this.myNumber = 42;
}
}
}

16. TheTypeScript Basics
16
Interfaces
• Interfaces are used solely by TypeScript, no JavaScript is created
• Interfaces can be used model an ‘virtual object’
• Interfaces can use Inheritance
• Interfaces are just Interfaces
• But they support optional fields
• Interfaces support Generics
• Type Constraints can be used using EXTENDS
namespace Presentation {
interface ICar {
engine: string;
color: string;
}
class Car implements ICar {
constructor(engine: string, color: string) {
this.engine = engine;
this.color = color;
}
engine: string;
color: string;
}
}
namespace Presentation {
interface ICar {
engine: string;
color: string;
}
class Car implements ICar {
constructor(data: ICar) {
this.engine = data.engine;
this.color = data.color;
}
engine: string;
color: string;
}
var myCar = new Car({ engine : "FAST", color : "BLACK" });
}

17. TheTypeScript Basics
17
Interfaces
namespace Presentation {
interface IEngine {
type: string;
}
interface ICar<T extends IEngine> {
engine: T;
color: string;
}
class SlowEngine implements IEngine {
type = "slow :(";
}
class FastEngine implements IEngine {
type = "FAST :)";
}
class MySlowCar implements ICar<SlowEngine> {
engine: SlowEngine;
color: string;
}
class MyFastCar implements ICar<FastEngine> {
engine: FastEngine;
color: string;
}
}
namespace Presentation {
interface ICar {
engine: string;
color: string;
}
interface IBasicCar extends ICar {
doors: number;
}
class Car implements IBasicCar {
constructor(engine: string, color: string, doors: number) {
this.engine = engine;
this.color = color;
this.doors = doors;
}
engine: string;
color: string;
doors: number;
}
}

18. TheTypeScript Basics
18
Classes
• Constructors use the keyword, constructor, and never have a return type
• Classes have Fields, Properties and Methods
• Access Modifiers can be used but ONLY apply within TypeScript
• Classes can use Inheritances
• Classes IMPLEMENTS interfaces
• Classes EXTENDS other classes
• Classes support Generics
• Type Constraints can be used
namespace Presentation {
class MyClass {
constructor() {
}
}
}
namespace Presentation {
class MyClass {
private _value: string;
constructor() {
}
myField: string;
myMethod(): void {
//DO SOME WORK HERE
}
get value() {
return this._value;
}
set value(item: string) {
this._value = item;
}
}
}
namespace Presentation {
class MyClass {
constructor() {
}
private myPrivateProperty: string;
public myPublicProperty: string;
protected myProtectedProperty: string;
public myPublicMethod(): void {
//DO SOME WORK FOR ANYONE
}
private myPrivateMethod(): void {
// DO SOME INTERNAL WORK
}
protected myProtectedMethod(): void {
// DO SOME WORK FOR MY FRIEND
}
}
}

19. TheTypeScript Basics
19
Classes
namespace Presentation {
class MyClass<T> {
private id: T;
constructor(id: T) {
this.id = id;
}
myId(): T {
return this.id;
}
}
}
namespace Presentation {
class MyClass {
constructor() {
}
private myPrivateProperty: string;
public myPublicProperty: string;
protected myProtectedProperty: string;
public myPublicMethod(): void {
//DO SOME WORK FOR ANYONE
}
private myPrivateMethod(): void {
// DO SOME INTERNAL WORK
}
protected myProtectedMethod(): void {
// DO SOME WORK FOR MY FRIEND
}
}
class ChildClass extends MyClass {
constructor() {
super();
this.myProtectedMethod(); // ACCESSABLE
this.myProtectedProperty = ""; // ACCESSABLE
this.myPrivateMethod(); // NOT ACCESSABLE
this.myPrivateProperty = ""; // NOT ACCESSABLE
}
}
}

20. TypeScript:The Advance Stuff 
20
IsThere More?
• Anything written in JavaScript, can be written in TypeScript
• .NET Core
• Node.js
• Node Package Manager
• Etc etc etc etc
• Async/Await - New
• Most common JavaScript Frameworks have a Type Definition
• If not, you can create one
function getStringFromWebServerAsync() {
return new Promise<string>((resolve, reject) => {
$.get("http://localhost/GetAString")
.done((data) => {
resolve(data);
})
.fail((err) => {
reject(err);
});
});
}
async function asyncExample() {
try {
let data = await getStringFromWebServerAsync();
console.log(data);
}
catch (err) {
console.log(err);
}
}
asyncExample();

21. Links
21
• https://en.wikipedia.org/wiki/TypeScript
• http://www.typescriptlang.org/
• http://vswebessentials.com/
• https://github.com/DefinitelyTyped/DefinitelyTyped

22. Code Demo