This document summarizes an introduction to TypeScript presentation. It includes an agenda that covers what TypeScript is, why it should be used, code walkthroughs, an example, and debugging TypeScript. It also provides setup steps and resources for learning more about TypeScript.

1. Northeast JavaScript Conference #NEJSConference
Introduction to
TypeScript
@Bob1German

2. Bob German
Bob is a Principal Architect at BlueMetal, where he
leads Office 365 and SharePoint development for
enterprise customers.
Cloud & Services
Content & Collaboration
Data & Analytics
Devices & Mobility
Strategy & Design
An Insight company
#NEJSConf
@Bob1German

3. Agenda
– What is it, and why should I use it?
– Lots of code walkthroughs
– An example
– Debugging TypeScript

4. What is TypeScript?
• Strict superset of JavaScript
• Supports
– Static types
– Object classes, inheritance, interfaces
• Compiles into JavaScript (target ES5 or ES2015)
• From Microsoft; Google likes it too
(Angular 2.0 is written in it)
• Compiler is written in TypeScript, generally runs
under Node.js

5. Why Typescript?
1. Type checking catches errors earlier; avoids
interface mismatches in large projects
2. Greatly improved code completion (intellisense)
3. Use ES6 features in ES3, ES5 (or at least get
compatibility checking)
4. Class structure familiar to OO programmers
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 = 5;
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()); // 5

6. A Brief History of JavaScript
December
1995
JavaScript Netscape and Sun Microsystems announce JavaScript
June 1997 ES1 The European Computer Manufacturer’s Society (ECMA)
adopts a JavaScript standard
December
1999
ES3 Adds regular expressions, try/catch, number formatting, etc.
December
2009
ES5 (IE9+, Chrome 23+,
FF 21+)
Adds strict mode, library support for JSON, better object
reflection
June 2015 ES6 (Partial support in Edge
12+, Chrome 49+, FF44+)
Adds classes, modules, promises, arrow functions, and more
(work in
progress)
ES7 Proposed features include concurrency, zero copy binary
data transfer, observable streams
Prevails now
Emerging

7. Setup steps:
• Install your editor of choice (e.g.
Visual Studio Code)
• Install Node
(https://nodejs.org/en/downloa
d)
• npm install –g typescript
• Ensure no old versions of tsc
are on your path; VS adds:
C:Program Files (x86)Microsoft
SDKsTypeScript1.0
• Create tsconfig.json in the root of
your folder
{
"compilerOptions": {
"target": "es5“,
"sourceMap": true
}
}
• Set up task runner and http
server
In VS Code:
– 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/)
Dev Environment

8. demo
Code Walk-through
• Basics
• Type Annotations
• Classes
• External Libraries

9. demo
Example
• Angular 1.x widget
• Debugging TypeScript

10. Resources
Bob’s TS Examples
• http://bit.ly/LearnTypeScript
TypeScript Playground
• http://bit.ly/TSPlayground
this in TypeScript
• http://bit.ly/TypeScriptThis
Code Samples
• http://bit.ly/LearnTypeScript
• http://bit.ly/TSWeather
JSON to TS Definition
• http://json2ts.com

11. An Insight company
Thank you.