Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Typescript 101 introduction

Introduction to the TypeScript language - most of the detail is in source code at https://github.com/BobGerman/LearnTypeScript

  • Login to see the comments

  • Be the first to like this

Typescript 101 introduction

  1. 1. Introduction to Typescript Typescript 101
  2. 2. Code Camp Sponsor Slide HERE
  3. 3. Agenda • Why TypeScript? • Development Environment • Demos: • Basics • Classes • External Libraries • Debugging
  4. 4. Why Typescript? 1. Static type checking catches errors earlier 2. Intellisense 3. Use ES6 features in ES3, ES5 (or at least get compatibility checking) 4. Class structure familiar to .NET programmers 5. 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
  5. 5. 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 SDKsTypeScript1.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 runner Edit 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
  6. 6. 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
  7. 7. demo Code Walk-through • Basics • Type Annotations • Classes • External Libraries
  8. 8. Resources TypeScript Playground • http://bit.ly/TSPlayground TypeScript this • http://bit.ly/TypeScriptThis Code Samples • http://bit.ly/LearnTypeScript
  9. 9. An Insight company Thank you.

×