0% found this document useful (0 votes)
52 views23 pages

2013 1114 Typescript

This document discusses TypeScript, a superset of JavaScript that adds static typing and class-based object-oriented programming. It introduces TypeScript concepts like interfaces, classes, inheritance, and this keyword. It shows how TypeScript uses type declarations and type checking to catch errors at compile time rather than runtime. The document provides examples of TypeScript code and the corresponding JavaScript output.

Uploaded by

adriano70
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
52 views23 pages

2013 1114 Typescript

This document discusses TypeScript, a superset of JavaScript that adds static typing and class-based object-oriented programming. It introduces TypeScript concepts like interfaces, classes, inheritance, and this keyword. It shows how TypeScript uses type declarations and type checking to catch errors at compile time rather than runtime. The document provides examples of TypeScript code and the corresponding JavaScript output.

Uploaded by

adriano70
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

CSCI-GA.3033.

003
Scripting Languages
11/14/2013
TypeScript

CS 5142 Cornell University 1


11/14/13
Concepts

Typing
Strong typing = no implicit type conversion
Weak typing = implicit type conversion
Static typing = check for type errors at compile time
Dynamic typing = check for type errors at run time

CS 5142 Cornell University 2


11/14/13
Concepts

Weak/Strong, Static/Dynamic Typing


Strong typing
(explicit conversions)
ML Scheme
Java
VBA
PHP
JavaScript
C
Perl
Weak typing
(implicit conversions) assembler
Static typing Dynamic typing
(compile-time checks) (runtime checks)
CS 5142 Cornell University 3
11/14/13
JavaScript

Unexpected Behavior

$ node $ node
> '5' + 2 > '' == '0'
'52' false
> '5' - 2 > 0 == ''
3 true
> 0 == '0'
true

CS 5142 Cornell University 4


11/14/13
Concepts

Strong Typing
Makes intention explicit
Makes code easier to read/maintain
Can catch certain types of errors
Less likely to have unexpected behavior

CS 5142 Cornell University 5


11/14/13
TypeScript
About TypeScript
Superset of JavaScript
Static typing
Class-based object-oriented programming
Developed by Microsoft
Designed to make it easier to build large
JavaScript applications
Related languages:
CoffeeScript
Dart
Mascara

CS 5142 Cornell University 6


11/14/13
TypeScript
Types
any

primitive object

number string boolean trivial array named anonymous


enum null undefined

CS 5142 Cornell University 7


10/07/13
TypeScript
How to Write + Run Code
Install as a node.js package:
$ npm install -g typescript

Run the compiler:


$ tsc hello.ts

Output is JavaScript:
$ ls
hello.js hello.ts

CS 5142 Cornell University 8


11/14/13
TypeScript

Type Declarations
hello.ts hello.js

function printit(msg : string) { function printit(msg) {


console.log(msg); console.log(msg);
} }

var msg = "Hello World!"; var msg = "Hello World!";


printit(msg); printit(msg);

CS 5142 Cornell University 9


11/14/13
TypeScript

Type Declarations
hello.ts hello.js

function printit(msg : string) { function printit(msg) {


console.log(msg); console.log(msg);
} }

var msg = "Hello World!"; var msg = "Hello World!";


printit(msg); printit(msg);

CS 5142 Cornell University 10


11/14/13
TypeScript

Type Checking
hello.js output

function printit(msg : string) { $ node hello.js


console.log(msg); 5
}

var msg = 5;
printit(msg);

CS 5142 Cornell University 11


11/14/13
TypeScript

Type Checking
hello.js output

function printit(msg : string) { $ node hello.js


console.log(msg); 5
}

var msg = 5;
printit(msg);

CS 5142 Cornell University 12


11/14/13
TypeScript

Type Checking
hello.ts output

function printit(msg : string) { $ tsc hello.ts


console.log(msg); hello.ts(6,1): error TS2081:
} Supplied parameters do not
match any signature of call
target.
var msg = 5;
printit(msg);

CS 5142 Cornell University 13


11/14/13
TypeScript

Object Types
fruit.ts
interface Fruit { An interface gives a
weight: number; name to an object type
color: string; Purely compile-time
seed?: boolean; construct
} Checks structural
equality
function pluck(f : Fruit) { Fields with a ? Are
console.log(f.color + " fruit"); optional.
}

var x = {weight: 10, color: "red"};


pluck(x);

CS 5142 Cornell University 14


11/14/13
TypeScript

Object Types
fruit.ts
interface Fruit { An interface gives a
weight: number; name to an object type
color: string; Purely compile-time
seed?: boolean; construct
} Checks structural
equality
function pluck(f : Fruit) { Fields with a ? Are
console.log(f.color + " fruit"); optional.
}

var x = {weight: 10, color: "red"};


pluck(x);

CS 5142 Cornell University 15


11/14/13
TypeScript

Classes

class Apple { Introduces a named type


constructor(public weight, and a member
public color) { } A declaration includes a
public pluck() { type declaration and a
return this.color + " apple; constructor
}
}

CS 5142 Cornell University 16


11/14/13
TypeScript

Class Type

class Apple { Interface Apple {


constructor(public weight : number, weight : number;
public color : string) { } color : string;
public pluck() { pluck() : string;
return this.color + " apple; }
}
}

CS 5142 Cornell University 17


11/14/13
TypeScript

Class Member

var Apple: { This is the JavaScript


new(weight : number, constructor function
color : string) : Apple;
}

CS 5142 Cornell University 18


11/14/13
TypeScript

Class Inheritance

class A { A derived class inherits


a: number; all members from its
public f() {console.log("a"); } base class if it does not
public g() {console.log("a"); } override them
} Members with the same
name and type are
class B extends A { overridden
b: string;
public g() {console.log("b"); }
}

var b = new B();


b.f(); // a
CS 5142 Cornell University 19
11/14/13
TypeScript

this

class A { A derived class inherits


a: number; all members from its
public f() {console.log("a"); } base class if it does not
public g() {console.log(a"); } override them
} Members with the same
name and type are
class B extends A { overridden
b: string;
public g() {console.log("b"); }
}

var b = new B();


b.f(); // a
CS 5142 Cornell University 20
11/14/13
TypeScript

Modules

module M { Introduces namespaces


export function f() { return "f"; } Provide encapsulation
function g() { return "g"; } Implemented using the
} same pattern as node
M.f(); modules
M.g(); // Error, g is not exported

CS 5142 Cornell University 21


11/14/13
TypeScript

this
In a constructor, member function:
this is the class instance
In a static function:
this is constructor function
In a function declaration: this is Any
In the global module: this Any

CS 5142 Cornell University 22


11/14/13
Administrative

Last Slide
Next week: Security!

CS 5142 Cornell University 23


11/14/13

You might also like