TypeScript: Verbreitete Alternative zu JavaScript
Statische Typisierung → bessere Autovervollständigung und Fehlererkennung
Datentypen können explizit vom Entwickler angegeben werden oder von der Entwicklungsumgebung abgeleitet werden (engl. type inference)
Vortile:
online mit TypeScript experimentieren:
Beispiel:
let names: Array<string> = [];
names.push('Alice');
names.push('Bob');
console.log(names[0].toUpperCase());
online mit TypeScript experimentieren:
Datentypen und Deklarationen, die wir verwenden werden:
Variablentypen können beim Deklarieren von Variablen angegeben werden:
let age: number = 32;
let age: number;
age = 32;
age++;
in vielen Fällen kennt TypeScript den Typ automatisch (keine Annotation notwendig):
let age = 32;
const age: number = 32;
const name: string = 'Alice';
const loggedIn: boolean = true;
const names: Array<string> = [];
names.push('Alice');
alternative Schreibweise:
const names: string[] = [];
names.push('Alice');
Typendeklaration:
let todo: {
id: number;
title: string;
completed: boolean;
};
Zuweisung:
todo = { id: 1, title: 'foo', completed: false };
optionale Einträge werden mit ? gekennzeichnet
let todo: {
id: number;
title: string;
completed: boolean;
date?: string;
};
Manchmals möchten wir die Typenüberprüfung aufheben:
const nameInput: any = document.getElementById(
'name-input'
);
console.log(nameInput.value);
Deklarieren wir eine Variable asl any, können wir auf beliebige Properties zugreifen
Variablen, die mehrere Typen annehmen können:
let width: string | number | undefined;
width = '16px';
width = 16;
Mit Type Aliases oder Interfaces können wir eine Typendeklaration unter einem Namen speichern
Type Aliases können etwas einfacher und flexibler sein als Interfaces (Vergleich auf StackOverflow)
Type Aliases für Objekte:
type Todo = {
id: number;
title: string;
completed: boolean;
};
Interfaces für Objekte:
interface Todo {
id: number;
title: string;
completed: boolean;
}
const todos: Array<Todo> = [
{ id: 1, title: 'foo', completed: false },
{ id: 2, title: 'bar', completed: true },
];
type aliases and interfaces should be capitalized (e.g. Todo, not todo)
function shorten(text: string, maxLen: number): string {
// ...
}
const shorten = (text: string, maxLen: number): string => {
// ...
};
Funktionen ohne Rückgabewert: void
function logMessage(message: string): void {
console.log(message);
}
Speichern einer Funktionssignatur unter einem Type Alias:
// a validator is a function that receives a string
// and returns a boolean
type Validator = (s: string) => boolean;
Anwenden der Type Alias:
const validateEmail: Validator = (s) => s.includes('@');
const validateYear: Validator = (s) => {
return new RegExp('^d{4}$').test(s);
};
Type Assertions ermöglichen das Behandeln eines vorhandenen Objekts als bestimmter Typ
dies schlägt fehl:
// type: HTMLElement or null
const nameInput = document.getElementById('name-input');
console.log(nameInput.value);
dies klappt:
const nameInput = document.getElementById(
'name-input'
) as HTMLInputElement;
console.log(nameInput.value);
Type Assertions können auch mit any arbeiten:
const nameInput = document.getElementById(
'name-input'
) as any;
console.log(nameInput.value);
Generic: allgemeine Typendeklaration, zu der bei der Anwendung nähere Informationen spezifiziert werden können (via <...>)
Beispiel: Array ist ein Generic
const names: Array<string> = ['Alice', 'Bob', 'Charlie'];
Beispiel: Reacts useState kann als Generic verwendet werden
const [name, setName] = useState<string>('');
Beispiel: Reacts Eventtypen können als Generics verwendet werden:
function handleChange(
event: ChangeEvent<HTMLInputElement>
) {
const newValue = event.target.value;
// ...
}
Browser verstehen nur JavaScript, nicht TypeScript
Beim build: TypeScript wird in JavaScript übersetzt, alle Typeninformationen gehen dabei verloren
Manche JavaScript Libraries beinhalten TypeScript-Deklarationen - z.B. redux.
Andere verbreitete Libraries haben meist Typendeklarations-Pakete mit dem Präfix @types
z.B. für react: @types/react