Introduction to Typescript

Typescript 101

Code Camp Sponsor Slide HERE

Agenda• Why TypeScript?• Development Environment• Demos:• Basics• Classes• External Libraries

• Debugging

Why Typescript?1. Static type checking catches errors earlier2. Intellisense3. Use ES6 features in ES3, ES5 (or at least get

compatibility checking)4. Class structure familiar to .NET programmers5. Prepare for AngularJS 2.0

let x = 5;for (let x=1; x<10; x++) { console.log (‘x is ‘ + x.toString());}console.log (‘In the end, x is ‘ + x.toString());

var x = -1;for (var x_1 = 1; x_1 < 10; x_1++) { console.log("x is " + x_1.toString());}console.log("In the end, x is " + x.toString()); // -1

Setup steps:• Install VS Code• Install Node

(https://nodejs.org/en/download)• npm install –g typescript• Ensure no old versions of tsc are on your

path; VS adds:C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0\

• In VS Code create tsconfig.json in the root of your folder{ "compilerOptions": { "target": "es5“, "sourceMap": true }}

• Use Ctrl+Shift+B to build – first time click the error to define a default task runnerEdit task runner and un-comment the 2nd example in the default

• npm install –g http-server(In a command prompt, run http-server and browse to http://localhost:8080/)

VS Code Environment

Setup steps:• Install Visual Studio• For VS2012 or 2013, install TypeScript

extension• Build and debug the usual way• Consider WebEssentials for side by side

TypeScript and JavaScript view(does not work in VS2015)

Visual Studio Environment

demo

Code Walk-through• Basics• Type Annotations• Classes• External Libraries

ResourcesTypeScript Playground• http://bit.ly/TSPlaygroundTypeScript this• http://bit.ly/TypeScriptThisCode Samples• http://bit.ly/LearnTypeScript

An Insight company

Thank you.