TypeScript For C# Developers
Jesse Liberty
@Jesseliberty
http://jesseliberty.com
Getting Acquainted with TypeScript
Anders Hejlsberg
• Delphi
• Turbo Pascal
• C#
• TypeScript
Key Features
Constructors,
Static Typing Classes Properties,
Methods
Arrow Functions
Interfaces Encapsulation
(Lambdas)
Key Features
Supports Standard
JavaScript code Open Source Runs Anywhere
Excellent Tool
Intellisense Syntax Checking
Support
TypeScript is TypeScript is a typed
JavaScript superset of Javascript
TypeScript is a first TypeScript is a natural
class language for JavaScript and C#
programmers
Risks for C# Programmers
Syntax is similar but not the same
• Watch for subtle differences (e.g., = = vs. = = =)
Classes and Interfaces are similar but not the same
This is a scripting language
TypeScript is, ultimately JavaScript with
a C#-ish shell
What do you need to know?
C#
Why use TypeScript?
TypeScript Type Safety
• Variables can hold one type
• Variable types can not change during run-time
• Only explicit type conversion
• Easy to maintain
Setup
Tooling
Visual Studio Otherwise… Playground
It just works Any browser
Any editor
Any OS
http://typescriptlang.org
VS Code - Setup
• Download and install VS Code
(https://code.visualstudio.com/)
• Download and install Node (http://nodejs.org)
• Run VS Code from terminal by typing code
VS Code - Setup
• Add tsconfig.json file (http://jliberty.me/tsconfig)
• Open Command Palette (shift-command-p)
type in Configure Task Runner
• Click on TypeScript – tsconfig.json
User Preferences
• In VS Code, enter Shift-Command-P
• Type Pref and choose Open User Settings
• On left are the default settings
• On right are the user settings
User Preferences
"editor.fontFamily": "Calynda",
"editor.fontSize": 14,
"files.trimTrailingWhitespace": true,
"editor.formatOnType": true,
"editor.tabSize": 3,
"editor.wrappingColumn": 120,
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
User Preferences
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/*.js": {"when":"$(basename).ts"},
"**/*.js.map":true
},
Hello World Demo – note intellisense
Hello World
export class HelloWorld{
SayHi() {
console.log("hello world”)
}
}
var helloWorld = new HelloWorld();
Setup helloWorld.SayHi();
Classes, Properties and Methods; oh my!
Namespace
(Module)
Interfaces
Classes
Constructors
Properties
Fields
Methods (functions)
TypeScript and Types
TypeScript and Types
• Boolean ( true or false )
• Number ( 6, 5.3, 200.47 )
• String ( "Hello World" )
• Enum ( temperature.hot )
• Array ( myArray[4] )
TypeScript and Types
• Void ( function does not return a value )
• Any ( undermines type safety)
• Undefined ( much like null )
Hoisting
• Var - scoped to the function – or if no function: globally (yuck)
• Let – scoped to the block
• const – scoped to the block
Inferring and setting types
let age; // type: any
let age = 21; // type: number (inferred)
let age: number; // type: number (explicit)
let age: number = 21; // type: number
Arithmetic Operators
• +, -, *, /, %, ++, -- // just as in C#
• = // assignment
• == // values are equal
• === // values and types are equal
let a = 10;
a == 10 // true a == “10” // true
a === 10 // true a === “10” // false
Flow Control
• if, if…else
• ?: (ternary)
• switch
• while, while..do
• for
Flow Control – for..in
let myDictonary = { a: "value1", b: "value2", c: "value3" };
for (var key in myDictonary){
console.log(key + '=' + myDictonary[key]);}
a = value1
b = value2
c = value3
Functions
Optional & Default Parameters
• Optional parameters use ?
• Optional and default parameters must come after required
• Demo
Default Parameters
• Somewhat cleaner than optional parameters
• Assign a default value with the assignment operator (=)
• Demo
Rest Parameters
• Very much like “params”
• Precede with … and follow with [ ]
• Demo
Function Overloading
• Same name, different number of parameters
• Requires creating an implementation signature
• Demo
Arrow Functions
• Lambda Expressions
• Short form of functions
• Demo
Object-oriented TypeScript
Object Literals
var rectangle = {
height: 20,
width: 10,
area: function () { return this.height * this.width;}
}
console.log("rectangle area = " + rectangle.area());
Object Literals (Explicit)
var rectangle: Object = {
height: 20,
width: 10,
area: function () { return this.height * this.width;}
}
console.log("rectangle area = " + rectangle.area());
Classes
• Public by default
• Refer to properties and fields with this keyword
• Constructor parameters can automatically be properties or fields
• Demo
Inheritance
• Uses the keyword extends
• Base class is super
• Demo
Interfaces
• Uses the keyword implements
• Demo
Advanced Topics
• Modules
• Asynchronous programming
• Scale and Performance
• Testing
• Gulp, Grunt, etc.
Resources
• On-line courses
• Books & Articles
• Stack Overflow
• Blogs (http://jesseliberty.com)
• Twitter
Questions?
Thank you
Jesse liberty
@jesseliberty
jesseliberty.com
