This document provides an introduction and overview of TypeScript including: 1. How to install TypeScript in Visual Studio 2013/2015 or via NPM. 2. The basic TypeScript types like Boolean, Number, String, Array, Enum, Any, and Void. 3. Language features like constants, functions, optional and default parameters, rest parameters, lambda expressions, classes, generics, and interfaces. 4. Examples are provided for each concept to demonstrate proper TypeScript syntax. 5. References sections provides links to the official TypeScript documentation and Wikipedia pages for additional learning.

1. TYPESCRIPT
Larry Nung

2. AGENDA
Introduction
Installion
Types
Const
Function
Class
Generics
Interface
Reference
Q & A

3. INTRODUCTION

4. INTRODUCTION

5. INSTALL

6. INSTALL
 Visual Studio 2013
 TypeScript 1.5 for Visual Studio 2013
 Visual Studio 2015
 Pre-installed
 NPM
 npm install -g typescript

7. TYPES

8. TYPES
Types
Boolean
Number
String
ArrayEnum
Any
Void

9. TYPES
 var variableName: Type;
 var booleanVariable: boolean;
 var variableName: number;
 var variableName: string;
 var variableName: number[];
 var variableName: Array<number>;
 var variableName: any;
 function functionName(): void {…}

10. TYPES
 enum enumName{element1 = 1, element2,
element3};
 var enumValue: enumName = enumName. element1;
 var enumName: enumName = enumName[2];

11. TYPES
enum Color {Red, Green, Blue};
var name:string = Color[2];
var value:number = Color.Green;
alert(name);
alert(value);

12. CONST

13. CONST
const buffer:number = 512;

14. FUNCTION

15. FUNCTION
function add(x: number, y: number): number {
return x+y;
}
var myAdd = function(x: number, y: number):
number { return x+y; };

16. OPTIONAL PARAMETERS
function buildName(firstName: string, lastName?: string)
{
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
var result1 = buildName("Bob"); //works correctly now
var result2 = buildName("Bob", "Adams", "Sr."); //error, too
many parameters
var result3 = buildName("Bob", "Adams"); //ah, just right

17. DEFAULT PARAMETERS
function buildName(firstName: string, lastName =
"Smith") {
return firstName + " " + lastName;
}
var result1 = buildName("Bob"); //works correctly now,
also
var result2 = buildName("Bob", "Adams", "Sr."); //error,
too many parameters
var result3 = buildName("Bob", "Adams"); //ah, just
right

18. REST PARAMETERS
function buildName(firstName: string, ...restOfName:
string[]) {
return firstName + " " + restOfName.join(" ");
}
var buildNameFun: (fname: string, ...rest:
string[])=>string = buildName;

19. LAMBDA
var add = (x, y) => x+y;
alert(add(10, 5));

20. CLASS

21. CLASS
class Person {
name: string;
age: number;
constructor(name: string, age:number) {
this.name = name;
this.age = age;
}
SayHello():string {
return "Hello~I'm " + this.name;
}
}
var p = new Person("Larry Nung", 35);
alert(p.SayHello());

22. CLASS
class Person {
private _name: string;
private _age: number;
get name():string{ return this._name; }
set name(value:string){ this._name = value; }
get age():number{ return this._age; }
set age(value:number){ this._age = value; }
constructor(name: string, age:number) {
this.name = name;
this.age = age;
}
SayHello():string {
return "Hello~I'm " + this.name;
}
}
var p = new Person("Larry Nung", 35);
alert(p.SayHello());

23. CLASS
class Person {
name: string;
age: number;
constructor(name: string, age:number) {
this.name = name;
this.age = age;
}
SayHello():string {
return "Hello~I'm " + this.name;
}
}
class Larry extends Person {
constructor() {
super("Larry Nung", 35);
}
}
var p = new Larry();
alert(p.SayHello());

24. GENERICS

25. GENERICS
function ShowMessage<T>(message:T) {
alert(message);
}
ShowMessage<string>("test");
ShowMessage<number>(123);

26. INTERFACE

27. INTERFACE
interface IHelloable {
enableIntroduce: boolean;
SayHello():string;
}
class Person implements IHelloable {
enableIntroduce: boolean;
private name:string;
constructor(name:string, enableIntroduce:boolean) {
this.name = name;
this.enableIntroduce = enableIntroduce;
}
SayHello():string {
if(this.enableIntroduce)
return "Hello~I'm " + this.name;
else
return "Hello";
}
}
var p = new Person("LarryNung", false);
alert(p.SayHello());

28. REFERENCE

29. REFERENCE
 Welcome to TypeScript
 http://www.typescriptlang.org/
 TypeScript - 維基百科，自由的百科全書
 https://zh.wikipedia.org/wiki/TypeScript
 TypeScript - Wikipedia, the free encyclopedia
 https://en.wikipedia.org/wiki/TypeScript

30. Q&A
30

31. QUESTION & ANSWER
31