TypeScript Tipp-Tipps: Meistere die TypeScript-Syntax für schnelleres Coding
Lerne wichtige Tipps, um TypeScript-Code schneller zu tippen. Von Typ-Annotationen, Generics und Interfaces bis zu Utility Types und fortgeschrittenen Mustern - verbessere deine TypeScript-Tippgeschwindigkeit und Genauigkeit.
TypeScript ist zum Standard für den Aufbau skalierbarer JavaScript-Anwendungen geworden. Sein leistungsstarkes Typsystem fängt Fehler zur Kompilierzeit ab, aber das effiziente Tippen von TypeScript-Code erfordert das Beherrschen seiner einzigartigen Syntaxmuster. Dieser umfassende Leitfaden hilft dir, TypeScript schneller und mit weniger Fehlern zu tippen.
Warum TypeScript-Tippfähigkeiten wichtig sind
TypeScript fügt Typ-Annotationen über JavaScript hinzu, was mehr Zeichen zum Tippen bedeutet. Die Produktivitätsgewinne durch frühzeitiges Erkennen von Fehlern überwiegen jedoch die zusätzlichen Tastenanschläge bei weitem. Entwickler, die TypeScript fließend tippen können, verbringen weniger Zeit mit Debugging und mehr Zeit mit dem Erstellen von Features.
Wesentliche TypeScript-Symbole zum Beherrschen
Doppelpunkt (:)
Wird für Typ-Annotationen nach Variablen, Parametern und Rückgabetypen verwendet.
Spitze Klammern (<>)
Unverzichtbar für Generics, Type Assertions und JSX-Elemente.
Pipe (|)
Union Types, die mehrere Typen kombinieren.
Kaufmännisches Und (&)
Intersection Types, die mehrere Typen kombinieren.
Fragezeichen (?)
Optionale Eigenschaften und Optional Chaining.
Grundlegende Typ-Annotationsmuster
Typ-Annotationen sind die Grundlage von TypeScript. Übe, bis sie automatisch werden:
const name: string = 'Alice';
const age: number = 30;
const isActive: boolean = true;const items: string[] = ['a', 'b', 'c'];
const numbers: Array<number> = [1, 2, 3];const user: { name: string; age: number } = {
name: 'Bob',
age: 25,
};Funktionstyp-Muster
Funktionen in TypeScript erfordern Parameter- und Rückgabetyp-Annotationen:
function greet(name: string): string {
return `Hello, ${name}!`;
}const add = (a: number, b: number): number => {
return a + b;
};function fetchUser(id: number): Promise<User> {
return api.get(`/users/${id}`);
}function process(data: string, callback: (result: string) => void): void {
callback(data.toUpperCase());
}Interface-Muster
Interfaces definieren die Form von Objekten und sind fundamental für TypeScript:
interface User {
id: number;
name: string;
email: string;
}interface Config {
readonly apiUrl: string;
timeout?: number;
retries: number;
}interface Repository<T> {
find(id: number): Promise<T>;
save(item: T): Promise<void>;
delete(id: number): Promise<boolean>;
}interface ApiResponse<T> {
data: T;
status: number;
message: string;
}Type Alias Muster
Type Aliases erstellen benutzerdefinierte Typnamen:
type ID = string | number;type Status = 'pending' | 'active' | 'completed';type Point = {
x: number;
y: number;
};type Callback<T> = (data: T) => void;type Nullable<T> = T | null | undefined;Generic-Muster
Generics ermöglichen wiederverwendbaren, typsicheren Code:
function identity<T>(value: T): T {
return value;
}function map<T, U>(items: T[], fn: (item: T) => U): U[] {
return items.map(fn);
}class Container<T> {
constructor(private value: T) {}
getValue(): T {
return this.value;
}
}interface State<T> {
data: T;
loading: boolean;
error: Error | null;
}Union und Intersection Types
Kombiniere Typen für Flexibilität:
type StringOrNumber = string | number;type Result<T> = { success: true; data: T } | { success: false; error: string };type Named = { name: string };
type Aged = { age: number };
type Person = Named & Aged;function handle(value: string | number | boolean): void {
if (typeof value === 'string') {
console.log(value.toUpperCase());
}
}Utility Type Muster
TypeScript bietet eingebaute Utility Types:
type PartialUser = Partial<User>;type RequiredConfig = Required<Config>;type ReadonlyUser = Readonly<User>;type UserKeys = keyof User;type NameType = User['name'];type UserWithoutId = Omit<User, 'id'>;type UserIdAndName = Pick<User, 'id' | 'name'>;Klassen-Muster
TypeScript-Klassen unterstützen Zugriffsmodifikatoren und Interfaces:
class User {
constructor(
public name: string,
private age: number,
readonly id: string
) {}
}class Service implements IService {
private cache: Map<string, Data> = new Map();
async fetch(id: string): Promise<Data> {
return this.cache.get(id) ?? await this.load(id);
}
}abstract class BaseRepository<T> {
abstract find(id: number): Promise<T>;
abstract save(item: T): Promise<void>;
}Type Guard Muster
Type Guards grenzen Typen zur Laufzeit ein:
function isString(value: unknown): value is string {
return typeof value === 'string';
}function isUser(obj: unknown): obj is User {
return typeof obj === 'object' && obj !== null && 'name' in obj;
}if (value instanceof Date) {
console.log(value.toISOString());
}Async-Muster
Asynchronen Code richtig typisieren:
async function fetchData(): Promise<Data[]> {
const response = await fetch(url);
return response.json();
}const getData = async (): Promise<Result<User>> => {
try {
const user = await api.getUser();
return { success: true, data: user };
} catch (error) {
return { success: false, error: String(error) };
}
};React mit TypeScript Muster
Häufige Muster für React-Anwendungen:
interface Props {
title: string;
onClick: () => void;
children?: React.ReactNode;
}const Button: React.FC<Props> = ({ title, onClick }) => {
return <button onClick={onClick}>{title}</button>;
};const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};Modul- und Import-Muster
TypeScript-Code organisieren:
import type { User, Config } from './types';
import { fetchUser, saveUser } from './api';export interface ApiResponse<T> {
data: T;
status: number;
}export type { User, Config };
export { UserService, ConfigService };Übungstipps für TypeScript
Konzentriere dich auf spitze Klammern <> - sie erscheinen ständig bei Generics
Übe die Platzierung des Doppelpunkts : nach dem Variablennamen und vor dem Typ
Meistere das Pipe | für Union Types und das kaufmännische Und & für Intersections
Werde vertraut mit dem extends Schlüsselwort für Generic-Constraints
Übe keyof, typeof und Indexed Access Types
Put these tips into practice!
Use DevType to type real code and improve your typing skills.
Start Practicing