3 Typescrypt

Przykłady definiowania zmiennych , metod i funkcji anonimowych

class btypes{

    //zmienne
    name: string = "pies";
    age: number = 5;
    colors: string[] = ['czarny','bialy' ];
    dates: Array<Date> = [new Date(), new Date()];
    pair: [string, number] = ['poniedzialek',1];
    xyz: any = 222;
    
    //podstawowa metoda
    showMsg(){
        console.log(this.name);
    }

    //metoda z okreslonym typem do zwrotu
    hello(): string{

        return 'witaj';
    }

    //metoda przyjmujaca argument typu string
    hello1(message: string){
        console.log(message)
    }

    //metoda przyjmujaca 2 argumenty, drugi nieobowiazkowy
    hello2(message: string, message2?: string){
        console.log(message + " " + message2)
    }

    //metoda przyjmujaca 2 argumenty, drugi jesli nie podany przyjmuje "hello3"
    hello3(message: string, message2 = 'hello3'){
        console.log(message + " " + message2)
    }

    //funkcja anonimowa (fat arrow) z argumentem
    hello4 = message => console.log ('funkcja anonimowa hello4 ' + message)

    //funkcja anonimowa bez argumentu ()
    hello5 = () => console.log ('funkcja anonimowa hello5')

    //funkcja anonimowa z argumentem i zwracajaca typ string
    hello6 = (message: string): string => {return 'funkcja anonimowa hello6 ' + message};
}

var example = new btypes();
example.showMsg();
example.hello1("czesc");
example.hello2("co tam","jest");
example.hello3("co tam");
example.hello4('wywolana');
example.hello5();
console.log(example.hello6("funkcja "));

Problem z THIS i przekazywaniem funkcji przez return

class ThisProblem{
    
    //pole msg
    msg: string = "tekst msg";

    //funkcja zwraca funkcje, ktora posluguje się this
    printFunction1(){
        return function(){
            console.log(this.msg);
        }
    }

    //funkcja zwraca funkcje anonimowa ktora tez posluguje sie this
    printFunction2(){
        return () => {
            console.log(this.msg);
        }
    }

}

var example = new ThisProblem();

//wywolanie funkcji1 spowoduje, ze przekazywana do fun() funkcja function straci this
//i w konsoli wyswietli   UNDEFINED

//wywolanie funkcji2 i przekazanie zwrotu tego do funkcji fun dziala poprawnie
var fun = example.printFunction1();
fun();

Rozwiązanie, zastosowanie funkcji anonimowej



Definiowanie zmiennych var,let,const:

var - z JavaScryptu, szeroki zakres, widoczne nawet poza klamrami (mylące)
let - z TypeScryptu

var ma bardzo szeroki zakres, w poniższym przykładzie pomimo, ze wyszliśmy z zakresu pętli for, dalej wypisze nam  3 a nie 99

class LetConstVar{

    printNumber(){
        var i = 99;
       
        for (var i=0; i<3; i++){
            console.log(i)
        }
        console.log('wypisz ' + i)
    }
}

let example = new LetConstVar();
example.printNumber()

.
zamiana na let:

class LetConstVar{

    printNumber(){
        let i = 99;
       
        for (let i=0; i<3; i++){
            console.log(i)
        }
        console.log('wypisz ' + i)
    }
}

let example = new LetConstVar();
example.printNumber()

tu wyświetli 99


const - zwykla stała

Interfejsy 

class ClassInterface{

    msg: string = 'hej'

    constructor(msg?:string){
        this.msg=msg
    }


    printMsg(){
        
        console.log(this.msg)
    }
}

let example = new ClassInterface("siup");
example.printMsg()

//interfejs
interface Dog {
    name: string ;
    age: number ;
    color: string;
    date?: Date;
}

//niepoprawna implementacja interfejsu 
//let dog2 = new Dog();

//poprawna implementacja interfejsu, do mapowania JSON
let dog: Dog =({
    name: "reks", 
    age: 3, 
    color: "czarny"
})

console.log(dog)
console.log(dog.name)

//przykladowy json
let mojjson = '{ "name": "Max", "age": 4, "color": "blue","date": "2018-01-02"}';

//mapowanie jsona na interfejs Dog za pomoca objektu JSON i jego metody parse
let myDog: Dog = JSON.parse(mojjson);

//wyswietlanie imienia ze zmapowanego myDog
console.log('z jesona: ' + myDog.name)

Moduły i Import

plik model.ts

export class One {
    constructor(){
        console.log("clas one");
    }

}

export class Two {
    constructor() {
        console.log("Class two");
    }

}

export const PI = 3.14;

i importowanie go w innym pliku

import {One} from "./models";
import * as models from "./models";

let one = new One();
let two = new models.Two();
let pi= models.PI;
console.log(pi);

importujemy albo jedną klasę albo wszystko * jako models i wtedy odwołujemy się przez models.