slides.md

highlighter	lineNumbers	drawings	layout
shiki	true	persist	default

Typescript

---

https://www.typescriptlang.org/

---

Wer bin ich?

• Daniel Thoma
• Bachelor Student der TU Darmstadt
• Seit 01.06.2021 Werkstudent bei clickbar. GmbH
• Seit 2 Jahren in der Webentwicklung tätig

---

Warum Typescript?

---

Javascript Bytes

---

Was ist Typescript?

---

TypeScript is Javascript
with syntax for types.

---

const isDone: boolean = false

const decimal: number = 6
const hex: number = 0xf00d
const binary: number = 0b1010
const octal: number = 0o744
const big: bigint = 100n

const fullName: string = 'Daniel Thoma'

const version: '1.0' | '2.0' | '3.0' = '1.0'

const list: number[] = [2, 1, 0]

const tuple: [number, number, number] = [0, 1, 2]

const tuble01: [number, string, boolean] = [0, 'Hello!', false]

<button @click="$slidev.nav.openInEditor('./components/Slide01/TypescriptTypes.ts')" title="Open in Editor" class="text-xl icon-btn opacity-50 !border-none !hover:text-white ml-auto"> <carbon:edit />

---

const notSure: unknown = 20

const everything: any = 'hello'

const u: undefined = undefined

const n: null = null

function returnsVoid(): void {
  // Do stuff
}

function neverReturns(): never {
  throw new Error()
}

---

TypeScript ist ein
Superset von Javascript.

---

interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUserInTypescript(id: number, update: User): void {
  const user: User = getUser(id)
  const newUser: User = { ...user, ...update }  
  saveUser(id, newUser)
}

function updateUserInJavascript(id, update) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}

<button @click="$slidev.nav.openInEditor('./components/Slide02/TypescriptSuperset.ts')" title="Open in Editor" class="text-xl icon-btn opacity-50 !border-none !hover:text-white ml-auto"> <carbon:edit />

---

TypeScript existiert
nicht zur Laufzeit.

---

interface User {
  id: number
  firstName: string
  lastName: string
}

class Customer implements User {
  id: number
  firstName: string
  lastName: string
}

<button @click="$slidev.nav.openInEditor('./components/Slide03/TypescriptRuntime.ts')" title="Open in Editor" class="text-xl icon-btn opacity-50 !border-none !hover:text-white ml-auto"> <carbon:edit />

---

TypeScript nutzt
Structural Typing.

---

class User {
  firstName: string
  lastName: string
}

class Customer {
  id: number
  firstName: string
  lastName: string
  role: string
}

class Extern {
  id: number
  role: string
}

getFullName(new Customer())

getFullName(new Extern()) // Error

function getFullName(user: User): string {
  return user.firstName + user.lastName
}

<button @click="$slidev.nav.openInEditor('./components/Slide04/TypescriptStructuralTyping.ts')" title="Open in Editor" class="text-xl icon-btn opacity-50 !border-none !hover:text-white ml-auto"> <carbon:edit />

---

Wie hilft Typescript?