TypeScript

Description

Information Technology Slide Set on TypeScript, created by Levon Badalian on 19/04/2017.
Levon Badalian
Slide Set by Levon Badalian, updated more than 1 year ago
Levon Badalian
Created by Levon Badalian about 7 years ago
3
0

Resource summary

Slide 1

    Basic Types: boolean and number
    boolean:let isMonday: boolean = true; //default is falsenumber:let thousand = 1000; //decimallet ninehundred = 0x384; // hexlet sixty = 0o74; // octallet seven = 0b111; // binarylet year = thousand  + ninehundred + sixty + seven;alert(year);

Slide 2

    Basic Types: string and Template strings
    string:let car: string = "ford";car = "citroen";Template strings: span multiple lines surrounded by backquote characters ` can embed exressions into it let car: string = "Veyron Super Sport";let speed: number = 268;let phrase = `${car} is recognized as the world’s fastest production car by Guinness.            It's top speed is ${speed} mph.            Would you like to drive it?`;alert(phrase);

Slide 3

    Basic Types: Arrays and Tuples
    Arrays:let languages: string[] = ["english", "german", "french", "italian", "spanish"];let squares: Array<number> = [0, 1, 4, 9, 16, 25, 36, 49];Tuples:let z : [number, string];z = [1, "Apple"];alert(z[0]);  // 1alert(z[1]);  // Applez[2] = "Pear";z[3] = 2;z[4] = true; // Compiler error

Slide 4

    Basic Types: enums and any
    enums:enum make { Audi, AlphaRomeo, BMW, Citroen, Ford, Holden, Hyundai, Jaguar, Kia };let myCarMake = make.Ford;alert(myCarMake);any:let age: any =  "five";age = 5; 

Slide 5

    Basic Types: void, null, undefined, never
    void: no type at all used in functions that do not return value if variable is declared of type void, can only assign null or undefined null and undefined: they are subtypes of all other types if --strictNullChecks is on, can only assign null and undefined to void never: type that never occurs return type of the function that never returns (unreachable end point)

Slide 6

    Basic Types: Type Assertions
    Type Assertions:let someonesName: any = "John";// Angle Bracket syntaxlet nameLength: number = (<string> someonesName).length;//"as" syntax let nameLength2: number = (someonesName as string).length;

Slide 7

    Variable Declarations
    var a = 25;let b: string = "1 May";const christmasDay: string = "25 December";Array destructuring:let languages: string[] = ["english", "german", "french", "italian", "spanish"];let [english, german, french, italian, spanish] = languages;let [main, ... others] = languages;

Slide 8

    Object destructuring:let myCar = {    make: "Ford",    model: "Falcon",    variant: "XR6",    year: 2007}let { make, model } = myCar;
    Variable Declarations

Slide 9

    Interfaces
    not as strict as in c# structural subtyping object has to have all the same properties as interface does not have to be derived or created as the same interface

Slide 10

    interface Car {    make: string;    model: string;}interface CarExtended {    make: string;    model: string;    variant?: string;    readonly year: number;}interface CarShort {    make: string;}
    function getCarMake(theCar: Car): string{    return theCar.make;}let myCar1: Car = { make: "Ford", model: "Falcon" }; let myCarMake1 = getCarMake(myCar1); //OKlet myCar2: CarExtended = { make: "Ford", model: "Falcon", year: 2007 };let myCarMake2 = getCarMake(myCar2); //OKlet myCar3 = { make: "Ford", model: "Falcon", year: 2007 };let myCarMake3 = getCarMake(myCar3); //OKlet myCar4: CarShort = { make: "Ford" };let myCarMake4 = getCarMake(myCar4); //Error
    Interfaces

Slide 11

    Function Types
    interface Car {    make: string;    model: string;}interface GetMake {    (car: Car): string;} let myGetMakeFunction: GetMake;myGetMakeFunction = function getCarMake(theCar: Car): string {    return theCar.make;};let myCar1: Car = { make: "Ford", model: "Falcon" }; let myCarMake1 = myGetMakeFunction(myCar1);

Slide 12

    Function Types
    let myGetMakeFunctionV2: GetMake;myGetMakeFunctionV2 = function getCarMake(theCar: { make: string, model: string } ): string {    return theCar.make;}; let myCarMake2 = myGetMakeFunctionV2(myCar1);

Slide 13

    Indexable Types
    interface Car {    make: string;    model: string;}interface CarMap {   [index: number]: Car;}  let firstCar: Car = { make: "Ford", model: "Falcon" };  let secondCar: Car = { make: "Holden", model: "Commodore" };let map: CarMap = [firstCar, secondCar];let car1 = map[0];alert(car1.model);let car2 = map[1];alert(car2.model);

Slide 14

    Extending Interfaces
    interface Shape {    color: string;    name: string; }interface Polygon extends Shape {    sides: number;} let triangle: Polygon = { color: "red", name: "triangle", sides: 3 };let rectangle = {} as Polygon;rectangle.sides = 4;rectangle.name = "rectangle";let circle: Shape = { color: "black" };let triangleShape = triangle as Shape;alert(triangleShape.color);

Slide 15

    Classes
    class Shape {    color: string;    constructor(color: string) {        this.color = color;    }    }let circle = new Shape("red");alert(circle.getColor());

Slide 16

    Classes, implementing interface
    interface ICar {    make: string;    model: string;}class Car implements ICar {    make: string;    model: string;    constructor(make: string, model: string) {         this.make = make;        this.model = model;    }}

Slide 17

    Class Inheritance
    Extend Shape Class:class Polygon extends Shape {    sides: number;    constructor(color: string, sides: number) {        let polygonName: string;         switch (sides) {            case 3:                polygonName = "triangle";                break;            case 4:                polygonName = "rectangle";                break;            case 5:                polygonName = "pentagon";                break;            default:                polygonName = `${sides} sided polygon`;        }
    super(color, polygonName);        this.sides = sides;    }    }let threeSidedPolygon = new Polygon("red", 3);alert(threeSidedPolygon.name);

Slide 18

    Class modifiers
    public name: string;private dateOfBirth: Date;protected name: string;readonly name: string;

Slide 19

    Class Accessors
    class Shape {    private _color: string;    name: string;    constructor(color: string, name: string) {        this._color = color;        this.name = name;    }     get color(): string {         return this._color;    }    set color(newColor: string) {        this._color = newColor;    }}
    let circle = new Shape("red", "circle");alert(circle.color);

Slide 20

    Abstract classes
    abstract class Shape {    abstract getColor(): string;    color: string;}

Slide 21

    Functions
    function multiply(x: number, y: number) :number {    return x * y;}// Anonymous functionlet times = function (x: number, y: number): number{ return x * y; };let times2: (x: number, y: number)=>number =    function(x: number, z: number): number { return x * z; };
    function multiply3(x: number, y: number, z?: number): number {    if (z !== null && z !== undefined)    {        return x * y * z;    }    else    {        return x * y;    }    }function multiply4(x: number, y: number, z: number = 1): number {    return x * y * z;}

Slide 22

    Functions
    function multiply(a: number, b: number, ...xyz: number[]){    let product = a * b;    for (let c of xyz) {        product = product * c;    }    return product;}

Slide 23

    Functions: this keyword
    let multiplier = {    x: 1,    y: 1,    times: function() {        return function() {                        return  this.x * this.y;        }    }}let times2 = multiplier.times();let product = times2(); alert(product);

Slide 24

    Generic Functions:
    interface SwopFn<T> {    ( x: T, y: T ): {x:T, y:T};}function Swop<T>(x: T, y: T): { x: T, y: T } {    let temp: T = x;    x = y;    y = temp;    return {x, y};}let mySwopFn : SwopFn<number> = Swop;let swoppedValues = mySwopFn(1, 2);alert(swoppedValues.x + " - " + swoppedValues.y);
    interface Shape {    color: string;    name: string;}interface SwopFn<T extends Shape> {     ( x: T, y: T ): {x:T, y:T};}function Swop<T>(x: T, y: T): { x: T, y: T } {     let temp: T = x;    x = y;    y = temp;    return {x, y};}let circle: Shape = { color: "red", name: "circle" }; let square: Shape = { color: "green", name: "square" };let mySwopFn : SwopFn<Shape> = Swop; let swoppedValues = mySwopFn(circle, square); alert(swoppedValues.x.name + " - " + swoppedValues.y.name);

Slide 25

    Generic Classes
    interface Shape {    color: string;    name: string;}class GenericSwapper<T>{    x: T;    y: T;    swop(): void {        let temp: T = this.x;        this.x = this.y;        this.y = temp;    } }
    let circle: Shape = { color: "red", name: "circle" };let square: Shape = { color: "green", name: "square" };let mySwopper = new GenericSwapper<Shape>();mySwopper.x = circle;mySwopper.y = square;alert(mySwopper.x.name + " - " + mySwopper.y.name);mySwopper.swop();alert(mySwopper.x.name + " - " + mySwopper.y.name);mySwopper.swop();alert(mySwopper.x.name + " - " + mySwopper.y.name);

Slide 26

    Intersection and Union Types
    Intersection: T & UUnion: T | U

Slide 27

    Iterators:
    let someArray = ["Ford", "Holden", "Toyota"];//Iterate valuesfor (let entry of someArray) {    alert(entry); // "Ford", "Holden", "Toyota"}//Iterate keysfor (let entry in someArray) {    alert(entry); // "0", "1", "2"}
Show full summary Hide full summary

Similar

CCNA Security 210-260 IINS - Exam 3
Mike M
Application of technology in learning
Jeff Wall
Innovative Uses of Technology
John Marttila
Ch1 - The nature of IT Projects
mauricio5509
The Internet
Gee_0599
SQL Quiz
R M
CCNA Answers – CCNA Exam
Abdul Demir
Professional, Legal, and Ethical Issues in Information Security
mfundo.falteni
System Analysis
R A
Flash Cards Networks
JJ Pro Wrestler
EDUC260- Multimodal Literacies for a Digital Age
angelwoo2002