Webentwicklung
TypeScript für Anfänger – Sicher typisierter JavaScript
Nico FreitagWebentwicklung
TypeScript ist JavaScript mit Type-Checking. Statt `let x = 5` kannst du `let x: number = 5` schreiben. Der Compiler überprüft dann, dass du x nur als Zahl nutzen kannst. Das klingt nach Overkill – ist aber super wertvoll.
Das Problem mit JavaScript
JavaScript ist dynamisch typisiert. Das ist flexibel – aber auch error-anfällig:
```javascript
function add(a, b) {
return a + b;
}
add(5, 10) // 15, okay
add("5", 10) // "510", oops!
add({}, []) // "[object Object]", oops!
```
Der Code läuft, aber die Ergebnisse sind falsch. Das ist ein großes Problem in großen Applikationen.
TypeScript's Lösung
```typescript
function add(a: number, b: number): number {
return a + b;
}
add(5, 10) // 15, okay
add("5", 10) // ERROR: Argument of type 'string' is not assignable to parameter of type 'number'
add({}, []) // ERROR
```
TypeScript prüft die Typen bevor dein Code läuft. Du findest Fehler early.
Basic TypeScript Syntax
Primitive Types:
```typescript
let name: string = "Alice";
let age: number = 25;
let active: boolean = true;
```
Arrays:
```typescript
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"];
```
Objects:
```typescript
interface User {
name: string;
age: number;
email?: string; // Optional
}
let user: User = {
name: "Alice",
age: 25
};
```
Functions:
```typescript
function greet(name: string, age: number): string {
return `Hello ${name}, you are ${age}`;
}
```
Warum TypeScript nutzen?
1. Weniger Bugs: Typo wird sofort gecatched
2. Bessere IDE-Support: Autocomplete funktioniert besser
3. Self-Documentation: Der Code ist selbst-dokumentierend
4. Refactoring: Änderungen sind sicherer
5. Team Communication: Weniger Missverständnisse
Der Trade-off
Nachteile von TypeScript:
- Setup ist komplizierter
- Learning Curve
- Mehr zu schreiben (Boilerplate)
- Braucht einen Build-Schritt
Aber für mittlere bis große Projekte: Der Vorteil überwiegt den Nachteil.
Wie du startest
1. Installie TypeScript:
```bash
npm install -g typescript
```
2. Erstelle eine tsconfig.json:
```bash
tsc --init
```
3. Schreib deine erste .ts Datei:
```typescript
const message: string = "Hello TypeScript";
console.log(message);
```
4. Compiliere zu JavaScript:
```bash
tsc
```
Das erzeugt eine .js Datei, die dein Browser/Node laufen kann.
Mit Frameworks
Wenn du React oder Vue nutzt, ist TypeScript schon integriert:
```bash
# React mit TypeScript:
npx create-react-app my-app --template typescript
# Vue mit TypeScript:
npm create vite@latest my-app -- --template vue-ts
```
Häufige Fehler als Anfänger
1. `any` overutzen: `let x: any` ist einfach aber sinnlos. Nutze Specific Types.
2. zu viel typen: Du brauchst nicht alles zu typen. TypeScript hat Type Inference.
3. komplexe Types bauen: Fang mit einfachen Types an, komplexe kommen später.
Fazit
TypeScript ist nicht für alle notwendig – kleine Scripts brauchen es nicht. Aber für mittlere bis große Projekte: Es ist super wertvoll.