Download - Typescript 101 introduction
![Page 1: Typescript 101 introduction](https://reader033.vdocuments.net/reader033/viewer/2022061307/58a6bc461a28ab661f8b5f33/html5/thumbnails/1.jpg)
Introduction to Typescript
Typescript 101
![Page 2: Typescript 101 introduction](https://reader033.vdocuments.net/reader033/viewer/2022061307/58a6bc461a28ab661f8b5f33/html5/thumbnails/2.jpg)
Code Camp Sponsor Slide HERE
![Page 3: Typescript 101 introduction](https://reader033.vdocuments.net/reader033/viewer/2022061307/58a6bc461a28ab661f8b5f33/html5/thumbnails/3.jpg)
Agenda• Why TypeScript?• Development Environment• Demos:• Basics• Classes• External Libraries
• Debugging
![Page 4: Typescript 101 introduction](https://reader033.vdocuments.net/reader033/viewer/2022061307/58a6bc461a28ab661f8b5f33/html5/thumbnails/4.jpg)
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
![Page 5: Typescript 101 introduction](https://reader033.vdocuments.net/reader033/viewer/2022061307/58a6bc461a28ab661f8b5f33/html5/thumbnails/5.jpg)
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
![Page 6: Typescript 101 introduction](https://reader033.vdocuments.net/reader033/viewer/2022061307/58a6bc461a28ab661f8b5f33/html5/thumbnails/6.jpg)
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
![Page 7: Typescript 101 introduction](https://reader033.vdocuments.net/reader033/viewer/2022061307/58a6bc461a28ab661f8b5f33/html5/thumbnails/7.jpg)
demo
Code Walk-through• Basics• Type Annotations• Classes• External Libraries
![Page 8: Typescript 101 introduction](https://reader033.vdocuments.net/reader033/viewer/2022061307/58a6bc461a28ab661f8b5f33/html5/thumbnails/8.jpg)
ResourcesTypeScript Playground• http://bit.ly/TSPlaygroundTypeScript this• http://bit.ly/TypeScriptThisCode Samples• http://bit.ly/LearnTypeScript
![Page 9: Typescript 101 introduction](https://reader033.vdocuments.net/reader033/viewer/2022061307/58a6bc461a28ab661f8b5f33/html5/thumbnails/9.jpg)
An Insight company
Thank you.