Anwendungsbeispiel
------------------

Allgemeine Syntax-Beispiele
~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. index:: Tupel, Optionale Parameter, Generische Programmierung, Fallback, Interface, Vererbung, Typisierung, Typecasting, Klassen, Datenkapselung, Promise, import, export, async, await

.. code-block:: javascript
  :linenos:

  // TS unterstützt Tupel und optionale parameter
  type ExampleT = [Number, String, boolean?]

  const array: ExampleT = [1, "test", true]

  // TS Generics können mehrere Typen beinhalten
  const exampleArray: Array<string | Number[]> = []

  array.push(10)
  array.push("string")
  array.push(false)

  // TS unterstützt Fallbacks
  const ex = [] ?? "empty array"

  // TS unterstützt Interfaces
  interface ExampleI {
      propertyOne: boolean
      propertyTwo: String
      proptertyThree?: ExampleT
      propertyFour?: () => void
  }

  // TS unterstützt Vererbung
  interface ExampleITwo extends ExampleI {
      additionnalProperty: Array<String>
  }

  // TS unterstützt neben Interfaces auch Typen
  type typeA = {
      prop1: boolean
  }

  type typeB = {
      prop1: boolean
  }

  // TS unterstützt das casten von Typen nach truthy/falsy Prinzip
  const blncast: typeA = {prop1: !![]}

  // TS unterstützt das Casten von Typen
  const cast: typeB = blncast as typeB

  // TS unterstützt Klassen sowie das Implementieren von Interfaces
  // TS unterstützt Datenkapselung wie private, public, readonly
  // Funktionen und Typen können auch Datentypen in Klassen sein
  class ExampleClass implements ExampleI {
      constructor(string: String){ this.string = string }
      private readonly string: string

      propertyOne: boolean = false
      propertyTwo: String = "string"
      proptertyThree: ExampleT = [1, "string", true]
      propertyFour: () => void = () => {}

      public getString() {
          return this.string
      }
  }

  // erstellen einer Instanz mit Constructorparametern
  const ECC = new ExampleClass("parameter for constructor")

  // normale Promise variante via Fetch
  fetch("facebook.com/getUser?id=12345").then(res => console.log(res)).catch(e => console.log(e))

  // TS unterstützt import/export syntax
  export type AFType = {
      url: String
  }
  import { AFTType } from 'example.ts'

  // TS empfielt Typisierung von Parametern
  // TS unterstützt async - await um asynchronen Code wie Synchronen zu behandeln
  async function asyncFunction(params: AFType) {

      return await fetch(params.url)
  }

  console.log(asyncFunction({url: "facebook.com/getUser?id=12345"}))

Beispielklasse anhand eines Websocket Service
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. code-block:: javascript
  :linenos:

  // Beispielklasse aus tatsächlich verwendeten Websocket Service
  import { EMPTY, Subject } from 'rxjs'
  import { catchError, switchAll, tap } from 'rxjs/operators'
  import { WebSocketSubject } from 'rxjs/webSocket'
  import { WebSocketFactory } from 'wsFactory'

  export class WebsocketService {
    private socket$!: WebSocketSubject<string | unknown>

    private messagesSubject$ = new Subject()

    public messages$ = this.messagesSubject$.pipe(
      switchAll<unknown | any>(),
      catchError((e) => {
        throw e
      })
    )

    public connect(path: string): void {
      if (!this.socket$ || this.socket$.closed) {
        this.socket$ = WebSocketFactory(WSconfig(path))
        this.socket$.subscribe()
        const messages = this.socket$.pipe(
          tap({
            error: (error: any) => console.log(error),
          }),
          catchError((_) => EMPTY)
        )
        this.messagesSubject$.next(messages)
      }
    }

    sendMessage(message: string): void {
      this.socket$.next(JSON.stringify(message))
    }

    close(): void {
      this.socket$.unsubscribe()
      this.socket$.complete()
    }
  }