Transcript Document

TypeScript:
The Gateway Drug
Dealer: @Derik Whittaker
Why it’s a Gateway Drug
Definition:
a habit-forming drug that, while not itself
addictive, may lead to the use of other
addictive drugs.
What is TypeScript?
A JavaScript SuperSet
* Compiles down to pure JavaScript
All JavaScript is valid
TypeScript
Not another Language like
CoffeeScript || Dart
“What TypeScript does is, it basically formalizes a
static type system that describes JavaScripts
*
EcmaScript 4 & 6 Compliant
* Based on current proposals
Why use TypeScript?
Simpler Syntax
** Removes some fuggly from JavaScript **
*
Compile time Type Checking
* Type checking can be turned off
Compiles to compliant
JavaScript
Improved Tooling inside
VisualStudio
How to get TypeScript?
Install the Visual
Studio plugin
* Available at http://typescriptlang.org
Install the
Node.js
compiler
* Available at http://typescriptlang.org
Install Web
Essentials Plugin
Plugin
* Available at http://vswebessentials.com
Target Audience
Non-Traditional
JavaScript Developers
Enterprise Scale
Applications
Software Simplest
Language Features
Type Definition Files
interface KnockoutValidationRule {
rule: string;
params: any;
message?: string;
condition?: () => boolean;
}
* Similar to C++ header files
Github
Repository of
Type
Definitions
* Available at http://github.com/borisyankov/DefinitelyTyped
Source Dependencies
/// <reference path="../Models/CurrentUserModel.ts" />
/// <reference path="../Scripts/typings/References.ts" />
Type Checking
filtered = _.filter(filtered, (item: Models.UpcomingReminderModel) => {
var forcastMatch = _.any(item.ForcastTypes(), (type: number) => {
var typeMatch = type == rangeFilterKey;
return typeMatch;
});
return forcastMatch;
});
private pageSize: number = 8;
private activePage: number = 1;
Lambda Syntax
$.get(route)
.done((results) => {
var convertedResults = [];
});
* Also called Arrow Syntax
Inheritance
export class NewReminderViewModel extends _baseVM {
constructor(){}
//class body here
}
export interface IBaseViewModel{
}
Interfaces
export class MainViewModel implements IBaseViewModel{
constructor() {
}
}
* Design time only constructs
export class Greeter<T> {
greeting: T;
constructor(message: T) {
this.greeting = message;
}
greet() {
return this.greeting;
}
}
Generics
var greeter = new Greeter<string>("Hello, world");
* Design time only constructs
Modules and Classes
module Demo {
export class Greeter {
// Class body here
}
}
Demo Time
Wrap Up
Thank you!
@derikwhittaker
http://devlicio.us/blogs/derik_whittaker
http://www.linkedin.com/in/derikwhittaker
http://bit.ly/DerikWhittaker_PS
Hope you enjoyed the session!