Webinar język TypeScript w Angular.

Czy jesteś gotowy na warsztaty programowania w ramach inicjatywy „Koduj w Płocku”? Proponuję krótkie wprowadzenie do języka TypeScript.

Oprócz cyklicznych spotkań programistów planuję organizację warsztatów dla zainteresowanych tematem kodowania. Odbędą się one już niedługo. Przez całą sobotę będziemy tworzyli twoją pierwszą aplikację mobilną. Przyjdziesz ze swoim komputerem a wyjdziesz z działającą apką.

Rejestracja

Webinarium będę prowadził za pomocą oprogramowania zoom.us. W celu uczestnictwa w spotkaniu musisz się zarejestrować. Zalecam też instalację klienta zoom.us ze strony https://zoom.us/download. Prezentację możesz oglądać również za pomocą Androida lub iPhona.

Przed webinarium

Zapoznaj się z edytorem kodu on-line Stack Blitz => https://stackblitz.com/edit/typescript

Jest to właściwie internetowa wersja Visual Studio Code który instalowaliśmy podczas pierwszego webinaru.

Podczas webinarium

Funkcje

function pozdrowienia(osoba) {
    return "Witaj, " + osoba;
}

let michal = "Michał Szafrański";

appDiv.innerHTML = pozdrowienia(michal);

Typowanie

function pozdrowienia(osoba: string) {
    return "Witaj, " + osoba;
}

let michal = "Michał Szafrański";

appDiv.innerHTML = pozdrowienia(michal);

// Boolean
let czyWyswietlac: boolean = true;

// Zmienne liczbowe 
let liczba: number = 11;
liczba = 22;

let kolor: string = "zielony";
kolor = 'niebieski';

// String
let samochod: string = `Toyota`;
let pojemnosc: number = 2;
let spalanie: string = `${ samochod } spala ${ pojemnosc * 4 } litrów.`;

appDiv.innerHTML = spalanie;

// Tablice
let lista: number[] = [1, 2, 3];

let lista: Array<number> = [1, 2, 3];

// Tuple 
let adres: [string, number, number];

adres = ["Wyszogrodzka", 10, 4]; // ok

adres = [20, "Wyszogrodzka", 5]; // Błąd

appDiv.innerHTML = `ul. ${ adres[0] } ${ adres[1] } m. ${ adres[2] }`;

// Enum
enum Samochod {Opel, BMW, Fiat}
let mojaMarka: Samochod = Samochod.Opel;

if(mojaMarka == Samochod.Opel) {
  appDiv.innerHTML = "Marka to opel";
} else {
  appDiv.innerHTML = "Inna marka";
}

// Any
let pomysleKiedys: any = "Jakiś string";
pomysleKiedys = 22;
pomysleKiedys = true; 

let lista: any[] = ["Wyraz", 123, false];
lista[2] = "Prawda";

appDiv.innerHTML = pomysleKiedys + " " + lista[2];

Rzutowanie

let jakasWartosc: any = "To jest string";

let dlugoscStringu: number = (<string>jakasWartosc).length;
let dlugoscStringu2: number = (jakasWartosc as string).length;

appDiv.innerHTML = dlugoscStringu + " = " + dlugoscStringu2;

Silne typowanie

function pozdrowienia(osoba: string) {
    return "Witaj, " + osoba + "<br>";
}

let michal = "Michał Szafrański";
let cyfra = 7;
let tablica = [1, 2, 4];

appDiv.innerHTML = pozdrowienia(cyfra) +  pozdrowienia(tablica);

Klasy

class Figura {
  pole: number;

  constructor(public bokA: number, public bokB: number) {
    this.pole = bokA * bokB;
  }
}

let prostokat = new Figura(5, 10);

appDiv.innerHTML = "Pole figury = " + prostokat.pole;

Dziedziczenie

class Figura {
  pole: number;

  constructor(public bokA: number, public bokB: number) {
    this.pole = bokA * bokB;
  }
}

class Prostokat extends Figura {
  obwod: number 

  constructor(public bokA: number, public bokB: number) {
    super(bokA, bokB);
    this.obwod = (2* bokA) + (2 * bokB);
  }
}

let prostokat = new Prostokat(5, 10);

appDiv.innerHTML = `Pole figury = ${ prostokat.pole } a obwód ${ prostokat.obwod }`;

Metody klasy

class Figura {
  private pole: number;

  constructor(private bokA: number, private bokB: number) {    
  }

  obliczPole(): number {
    this.pole = this.bokA * this.bokB;
     return this.pole;
  }
}

let prostokat = new Figura(4, 8);

appDiv.innerHTML = `Pole figury = ${ prostokat.obliczPole() }`;

Pętle

let tablica = [10, 20, 30];

for (let el in tablica) {
   appDiv.innerHTML += `${ el } <br>`;
}

for (let el of tablica) {
   appDiv.innerHTML += `${ el } <br>`;
}

let wyraz = 'wyraz';

for (let literka of wyraz ) {
  appDiv.innerHTML += `${ literka } <br>`;
}

for (let i = 0; i <= 10; i++) {
  appDiv.innerHTML += `${ i } <br>`;
}

let i: number = 3;

while (i < 9) {
  appDiv.innerHTML += `${ i } <br>`;
  i++;
}

let i: number = 3;

do {
  appDiv.innerHTML += `${ i } <br>`;
  i++;
}
while (i <= 9)

let i: number = 123;

do {
  appDiv.innerHTML += `${ i } <br>`;
  i++;
}
while (i <= 9)

let dzienTygodnia : number = 4;

switch (dzienTygodnia) {
    case 1:
        appDiv.innerHTML = "Dzisiaj jest poniedziałek";
        break;
    case 2:
        appDiv.innerHTML = "Dzisiaj jest wtorek";
        break;
    case 3:
        appDiv.innerHTML = "Dzisiaj jest środa";
        break;
    case 4:
        appDiv.innerHTML = "Dzisiaj jest czwartek";
        break;
    case 5:
        appDiv.innerHTML = "Dzisiaj jest piątek";
        break;
    case 6:
        appDiv.innerHTML = "Dzisiaj jest sobota";
        break;
    case 7:
        appDiv.innerHTML = "Dzisiaj jest niedziela";
        break;
    default:
        appDiv.innerHTML = "Nieznany dzień tygodnia";
        break;
}

Po webinarium

Jeśli spodobała ci się taka forma zdobywania wiedzy, to zostaw komentarz lub napisz do mnie czy chciałbyś, żeby organizować więcej takich internetowych prelekcji. Wspomnij też co chciałbyś zobaczyć na kolejnym webinarium.

Tak jak po poprzednim spotkaniu, do osób zarejestrowanych wyślę nagranie video.