Scribd
Upload
14 views

Jesse_Liberty_TypeScriptForCSharpDevs

The document provides an overview of TypeScript, highlighting its key features such as static typing, classes, and interfaces, making it a suitable language for C# developers. It discusses the setup process using Visual Studio Code, user preferences, and various programming concepts including types, flow control, functions, and object-oriented programming. Additionally, it touches on advanced topics and resources for further learning about TypeScript.

Uploaded by

jcantosg
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Jesse_Liberty_TypeScriptForCSharpDevs

The document provides an overview of TypeScript, highlighting its key features such as static typing, classes, and interfaces, making it a suitable language for C# developers. It discusses the setup process using Visual Studio Code, user preferences, and various programming concepts including types, flow control, functions, and object-oriented programming. Additionally, it touches on advanced topics and resources for further learning about TypeScript.

Uploaded by

jcantosg
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 48

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

You might also like