IDEs<\/a> erm\u00f6glichen.<\/p>\nHier ist ein Beispiel f\u00fcr eine Schnittstelle in TypeScript:<\/p>\n
interface Person {\n firstName: string;\n lastName: string;\n age: number;\n}<\/code><\/pre>\nIn diesem Beispiel definieren wir eine Schnittstelle Person<\/code>, die drei Eigenschaften festlegt: firstName<\/code> vom Typ string<\/code>, lastName<\/code> vom Typ string<\/code> und age<\/code> vom Typ number<\/code>.<\/p>\nJedes Objekt, das diese drei Eigenschaften mit den angegebenen Typen hat, wird als kompatibel mit der Schnittstelle Person<\/code> angesehen. Definieren wir nun Objekte, die der Schnittstelle Person<\/code> entsprechen:<\/p>\nlet person1: Person = {\n firstName: \"John\",\n lastName: \"Doe\",\n age: 30\n};\n\nlet person2: Person = {\n firstName: \"Jane\",\n lastName: \"Doe\",\n age: 25\n};<\/code><\/pre>\nIn diesem Beispiel erstellen wir zwei Objekte person1<\/code> und person2<\/code>, die mit der Schnittstelle Person<\/code> kompatibel sind. Beide Objekte haben die erforderlichen Eigenschaften firstName<\/code>, lastName<\/code> und age<\/code> mit den angegebenen Typen, so dass sie mit der Schnittstelle Person<\/code> kompatibel sind.<\/p>\nErweitern von Schnittstellen<\/h3>\n
Schnittstellen k\u00f6nnen auch erweitert werden, um neue Schnittstellen zu erstellen, die Eigenschaften von bestehenden Schnittstellen erben.<\/p>\n
Zum Beispiel:<\/p>\n
interface Animal {\n name: string;\n sound: string;\n}\n\ninterface Dog extends Animal {\n breed: string;\n}\n\nlet dog: Dog = {\n name: \"Buddy\",\n sound: \"Woof\",\n breed: \"Labrador\"\n};<\/code><\/pre>\nIn diesem Beispiel definieren wir eine Schnittstelle Animal<\/code> mit den Eigenschaften name<\/code> und sound<\/code>, und dann definieren wir eine neue Schnittstelle „Dog“, die die Schnittstelle Animal<\/code> erweitert und eine neue Eigenschaftbreed<\/code> hinzuf\u00fcgt. Die Schnittstelle Dog<\/code> erbt die Eigenschaften von der Schnittstelle Animal<\/code>. Jedes Objekt, das der Schnittstelle Dog<\/code> entspricht, muss also auch die Eigenschaften name<\/code> und sound<\/code> haben.<\/p>\nOptionale Eigenschaften<\/h3>\n
Schnittstellen k\u00f6nnen auch optionale Eigenschaften haben, die durch ein ?<\/code> nach dem Eigenschaftsnamen gekennzeichnet sind.<\/p>\nHier ist ein Beispiel:<\/p>\n
interface Car {\n make: string;\n model: string;\n year?: number;\n}\n\nlet car1: Car = {\n make: \"Toyota\",\n model: \"Camry\"\n};\n\nlet car2: Car = {\n make: \"Honda\",\n model: \"Accord\",\n year: 2020\n};<\/code><\/pre>\nIn diesem Beispiel definieren wir eine Schnittstelle Car<\/code> mit den Eigenschaften make<\/code> und model<\/code> und einer optionalen Eigenschaft year<\/code>. Die Eigenschaft year<\/code> ist nicht erforderlich, so dass Objekte, die der Schnittstelle Car<\/code> entsprechen, sie haben k\u00f6nnen oder nicht.<\/p>\nErweiterte Typpr\u00fcfung<\/h2>\n
TypeScript bietet auch erweiterte Optionen f\u00fcr die Typ\u00fcberpr\u00fcfung in tsconfig.json<\/strong>. Diese Optionen k\u00f6nnen die Typpr\u00fcfung deines TypeScript-Projekts verbessern und potenzielle Fehler zur Kompilierungszeit abfangen, was zu einem robusteren und zuverl\u00e4ssigeren Code f\u00fchrt.<\/p>\n1. strictNullChecks<\/h3>\n
Wenn diese Option auf true<\/code> gesetzt ist, erzwingt TypeScript strikte Nullpr\u00fcfungen, d.h. Variablen k\u00f6nnen nicht den Wert null<\/code> oder undefined<\/code> haben, es sei denn, sie sind explizit mit dem Union-Typ null<\/code> oder undefined<\/code> angegeben.<\/p>\nEin Beispiel:<\/p>\n
{\n \"compilerOptions\": {\n \"strictNullChecks\": true\n }\n}<\/code><\/pre>\nWenn diese Option aktiviert ist, f\u00e4ngt TypeScript potenzielle null<\/code> oder undefined<\/code> Werte zur Kompilierungszeit ab und hilft so, Laufzeitfehler zu vermeiden, die durch den Zugriff auf Eigenschaften oder Methoden von null<\/code> oder undefined<\/code> Variablen verursacht werden.<\/p>\n\/\/ Example 1: Error - Object is possibly 'null'\nlet obj1: { prop: string } = null;\nconsole.log(obj1.prop);\n\n\/\/ Example 2: Error - Object is possibly 'undefined'\nlet obj2: { prop: string } = undefined;\nconsole.log(obj2.prop);<\/code><\/pre>\n2. strictFunctionTypes<\/h3>\n
Wenn diese Option auf true<\/code> gesetzt ist, aktiviert TypeScript die strenge \u00dcberpr\u00fcfung von Funktionstypen, einschlie\u00dflich der Bi-Varianz von Funktionsparametern, wodurch sichergestellt wird, dass Funktionsargumente streng auf Typkompatibilit\u00e4t \u00fcberpr\u00fcft werden.<\/p>\nZum Beispiel:<\/p>\n
{\n \"compilerOptions\": {\n \"strictFunctionTypes\": true\n }\n}<\/code><\/pre>\nWenn diese Option aktiviert ist, erkennt TypeScript potenzielle Unstimmigkeiten zwischen Funktionsparametern zur Kompilierungszeit und hilft so, Laufzeitfehler durch die \u00dcbergabe falscher Argumente an Funktionen zu vermeiden.<\/p>\n
\/\/ Example: Error - Argument of type 'number' is not assignable to parameter of type 'string'\nfunction greet(name: string) {\n console.log(`Hello, ${name}!`);\n}\n\ngreet(123);<\/code><\/pre>\n3. noImplicitThis<\/h3>\n
Wenn diese Option auf true<\/code> gesetzt ist, verbietet TypeScript die Verwendung von this<\/code> mit einem impliziten Typ any<\/code>. Dies hilft, m\u00f6gliche Fehler bei der Verwendung von this<\/code> in Klassenmethoden zu erkennen.<\/p>\nZum Beispiel:<\/p>\n
{\n \"compilerOptions\": {\n \"noImplicitThis\": true\n }\n}<\/code><\/pre>\nWenn diese Option aktiviert ist, f\u00e4ngt TypeScript potenzielle Fehler ab, die durch die Verwendung von this<\/code> ohne korrekte Typ-Annotationen oder Bindung in Klassenmethoden verursacht werden.<\/p>\n\/\/ Example: Error - The 'this' context of type 'void' is not assignable to method's 'this' of type 'MyClass'\nclass MyClass {\n private prop: string;\n\n constructor(prop: string) {\n this.prop = prop;\n }\n\n printProp() {\n console.log(this.prop);\n }\n}\n\nlet obj = new MyClass(\"Hello\");\nsetTimeout(obj.printProp, 1000); \/\/ 'this' context is lost, potential error<\/code><\/pre>\n4. Ziel<\/h3>\n
Die Option target<\/code> gibt die ECMAScript-Zielversion f\u00fcr deinen TypeScript-Code an. Sie bestimmt die Version von JavaScript, die der TypeScript-Compiler als Ausgabe erzeugen soll.<\/p>\nZum Beispiel:<\/p>\n
{\n \"compilerOptions\": {\n \"target\": \"ES2018\"\n }\n}<\/code><\/pre>\nWenn diese Option auf „ES2018<\/strong>“ gesetzt ist, erzeugt TypeScript JavaScript-Code, der dem ECMAScript 2018 Standard entspricht.<\/p>\nDas kann n\u00fctzlich sein, wenn du die neuesten JavaScript-Funktionen und -Syntax nutzen willst, aber auch die Abw\u00e4rtskompatibilit\u00e4t mit \u00e4lteren JavaScript-Umgebungen sicherstellen musst.<\/p>\n
5. Modul<\/h3>\n
Die Option module<\/code> gibt das Modulsystem an, das in deinem TypeScript-Code verwendet werden soll. G\u00e4ngige Optionen sind „CommonJS<\/strong>„, „AMD<\/strong>„, „ES6<\/strong>„, „ES2015<\/strong>„, usw. Damit wird festgelegt, wie deine TypeScript-Module in JavaScript-Module kompiliert werden.<\/p>\nZum Beispiel:<\/p>\n
{\n \"compilerOptions\": {\n \"module\": \"ES6\"\n }\n}<\/code><\/pre>\nWenn diese Option auf „ES6<\/strong>“ gesetzt ist, erzeugt TypeScript JavaScript-Code, der die ECMAScript 6 Modul-Syntax verwendet.<\/p>\nDas kann n\u00fctzlich sein, wenn du mit einer modernen JavaScript-Umgebung arbeitest, die ECMAScript 6-Module unterst\u00fctzt, z. B. in einer Frontend-Anwendung, die einen Modul-Bundler wie Webpack oder Rollup verwendet.<\/p>\n
6. noUnusedLocals und noUnusedParameters<\/h3>\n
Diese Optionen erm\u00f6glichen es TypeScript, unbenutzte lokale Variablen bzw. Funktionsparameter abzufangen.<\/p>\n
Wenn sie auf true<\/code> gesetzt sind, gibt TypeScript Kompilierungsfehler f\u00fcr alle lokalen Variablen oder Funktionsparameter aus, die zwar deklariert, aber nicht im Code verwendet werden.<\/p>\nEin Beispiel:<\/p>\n
{\n \"compilerOptions\": {\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true\n }\n}<\/code><\/pre>\nDies sind nur einige weitere Beispiele f\u00fcr erweiterte Optionen zur Typ\u00fcberpr\u00fcfung in der tsconfig.json<\/strong>-Datei von TypeScript. In der offiziellen Dokumentation findest du noch mehr<\/a>.<\/p>\nBest Practices und Tipps f\u00fcr die Verwendung von TypeScript<\/h2>\n1. Typen f\u00fcr Variablen, Funktionsparameter und R\u00fcckgabewerte richtig annotieren<\/h3>\n
Einer der Hauptvorteile von TypeScript ist sein starkes Typisierungssystem, mit dem du die Typen von Variablen, Funktionsparametern und R\u00fcckgabewerten explizit angeben kannst.<\/p>\n
Das verbessert die Lesbarkeit des Codes, f\u00e4ngt potenzielle typbezogene Fehler fr\u00fchzeitig ab und erm\u00f6glicht eine intelligente Codevervollst\u00e4ndigung in IDEs.<\/p>\n
Hier ist ein Beispiel:<\/p>\n
\/\/ Properly annotating variable types\nlet age: number = 25;\nlet name: string = \"John\";\nlet isStudent: boolean = false;\nlet scores: number[] = [98, 76, 89];\nlet person: { name: string, age: number } = { name: \"John\", age: 25 };\n\n\/\/ Properly annotating function parameter and return types\nfunction greet(name: string): string {\n return \"Hello, \" + name;\n}\n\nfunction add(a: number, b: number): number {\n return a + b;\n}<\/code><\/pre>\n2. TypeScripts erweiterte Typfunktionen effektiv nutzen<\/h3>\n
TypeScript verf\u00fcgt \u00fcber eine Vielzahl von fortgeschrittenen Typfunktionen wie Generics, Unions, \u00dcberschneidungen, bedingte Typen und gemappte Typen. Diese Funktionen k\u00f6nnen dir helfen, flexibleren und wiederverwendbaren Code zu schreiben.<\/p>\n
Hier ist ein Beispiel:<\/p>\n
\/\/ Using generics to create a reusable function\nfunction identity(value: T): T {\n return value;\n}\n\nlet num: number = identity(42); \/\/ inferred type: number\nlet str: string = identity(\"hello\"); \/\/ inferred type: string\n\n\/\/ Using union types to allow multiple types\nfunction display(value: number | string): void {\n console.log(value);\n}\n\ndisplay(42); \/\/ valid\ndisplay(\"hello\"); \/\/ valid\ndisplay(true); \/\/ error<\/code><\/pre>\n3. Wartbaren und skalierbaren Code mit TypeScript schreiben<\/h3>\n
TypeScript f\u00f6rdert das Schreiben von wartbaren und skalierbarerem Code, indem es Funktionen wie Schnittstellen, Klassen und Module bereitstellt.<\/p>\n
Hier ist ein Beispiel:<\/p>\n
\/\/ Using interfaces for defining contracts\ninterface Person {\n name: string;\n age: number;\n}\n\nfunction greet(person: Person): string {\n return \"Hello, \" + person.name;\n}\n\nlet john: Person = { name: \"John\", age: 25 };\nconsole.log(greet(john)); \/\/ \"Hello, John\"\n\n\/\/ Using classes for encapsulation and abstraction\nclass Animal {\n constructor(private name: string, private species: string) {}\n\n public makeSound(): void {\n console.log(\"Animal is making a sound\");\n }\n}\n\nclass Dog extends Animal {\n constructor(name: string, breed: string) {\n super(name, \"Dog\");\n this.breed = breed;\n }\n\n public makeSound(): void {\n console.log(\"Dog is barking\");\n }\n}\n\nlet myDog: Dog = new Dog(\"Buddy\", \"Labrador\");\nmyDog.makeSound(); \/\/ \"Dog is barking\"<\/code><\/pre>\n4. Nutzung von TypeScripts Tooling und IDE-Unterst\u00fctzung<\/h3>\n
TypeScript verf\u00fcgt \u00fcber eine hervorragende Tooling- und IDE-Unterst\u00fctzung mit Funktionen wie Autovervollst\u00e4ndigung, Typinferenz, Refactoring und Fehlerpr\u00fcfung.<\/p>\n
Nutze diese Funktionen, um deine Produktivit\u00e4t zu steigern und potenzielle Fehler fr\u00fchzeitig im Entwicklungsprozess zu erkennen. Achte darauf, dass du eine TypeScript-f\u00e4hige IDE wie Visual Studio Code verwendest und das TypeScript-Plugin<\/a> installierst, um den Code besser bearbeiten zu k\u00f6nnen.<\/p>\n