Hallo zusammen, ich habe vor kurzem meine TypeScript-Reise begonnen und habe durch den Webentwicklungskurs für Fortgeschrittene von Programming Hero Fortschritte gemacht. Ich verfügte über einige Grundkenntnisse von TypeScript, hatte mich aber noch nicht eingehend damit beschäftigt. Mein Kurs begann mit einem tiefen Einblick in TypeScript. Eine Woche ist vergangen und ich habe erhebliche Lernfortschritte gemacht. Hier ist ein vereinfachter Überblick über die Schlüsselkonzepte, die ich verstanden habe.
TypeScript ist eine Obermenge von JavaScript, die der Sprache optionale statische Typisierung hinzufügt. Das bedeutet, dass Sie die Typen von Variablen, Funktionsparametern und Rückgabewerten deklarieren können, was dazu beitragen kann, potenzielle Fehler frühzeitig im Entwicklungsprozess zu erkennen.
Vorteile der Verwendung von TypeScript
Primitive Datentypen stellen einzelne Werte dar und werden direkt im Speicher gespeichert. Hier sind einige der primitiven Datentypen, die in TypeScript verwendet werden
let name : string = "Kishor"; let age : number = 27; let isDeveloper: boolen = true; let x : null = null; let y: undefined = undefined;
Wie Sie im Beispiel sehen können, müssen Sie zum Zuweisen eines Typs zu einer Variablen das Doppelpunktsymbol ( : ) verwenden, nachdem Sie den Variablennamen und dann den Typ definiert haben.
Nicht-primitive Datentypen, auch Referenztypen genannt, stellen komplexe Datenstrukturen dar und werden als Referenzen auf Speicherorte gespeichert. TypeScript unterstützt die folgenden nicht-primitiven Datentypen:
let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
return `hello ${name}`
}
Ein Typalias in TypeScript ist eine Möglichkeit, einem vorhandenen Typ einen neuen Namen zu geben. Dadurch kann Ihr Code besser lesbar und wartbar werden, insbesondere wenn es um komplexe Typen geht.
// Defining a type alias for a person object
type Person = {
name: string;
age: number;
};
// Using the type alias
const person1: Person = {
name: "Alice",
age: 30
};
In diesem Beispiel ist Person ein Typalias, der ein Objekt mit Namens- und Alterseigenschaften darstellt.
Union- und Intersection-Typen in TypeScript
Ein Union-Typ stellt einen Wert dar, der einer von mehreren Typen sein kann. Es wird mit | definiert Betreiber.
Ein Schnittpunkttyp kombiniert mehrere Typen zu einem einzigen Typ. Es wird mit dem &-Operator definiert.
type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
name: string;
age: number;
};
type Address = {
street: string;
city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
name: "Alice",
age: 30,
street: "123 Main St",
city: "Anytown"
};
Der Typ „Never“ stellt Werte dar, die niemals auftreten.
Der unbekannte Typ stellt einen beliebigen Wert dar. Dies ist sicherer als der Typ „any“, da Sie Typprüfungen oder Zusicherungen durchführen müssen, bevor Sie einen Wert vom Typ „unknown“ verwenden.
let name : string = "Kishor"; let age : number = 27; let isDeveloper: boolen = true; let x : null = null; let y: undefined = undefined;
Typassertion ist eine Möglichkeit, dem TypeScript-Compiler mitzuteilen, dass Sie mehr über einen Typ wissen als dieser. Es ist eine Möglichkeit, den Typ einer Variablen explizit anzugeben
let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
return `hello ${name}`
}
Typwächter ermöglichen es Ihnen, den Typ einer Variablen basierend auf bestimmten Bedingungen einzugrenzen. Indem Sie den Typ einer Variablen überprüfen, bevor Sie auf ihre Eigenschaften oder Methoden zugreifen, können Sie potenzielle Laufzeitfehler vermeiden.
// Defining a type alias for a person object
type Person = {
name: string;
age: number;
};
// Using the type alias
const person1: Person = {
name: "Alice",
age: 30
};
Eine Schnittstelle in TypeScript ist eine Blaupause zum Erstellen von Objekten mit bestimmten Eigenschaften.
type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
name: string;
age: number;
};
type Address = {
street: string;
city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
name: "Alice",
age: 30,
street: "123 Main St",
city: "Anytown"
};
In diesem Beispiel definiert die Person-Schnittstelle, dass ein Personenobjekt die Eigenschaften „firstName“, „lastName“ und „age“ haben muss. Beim Erstellen eines Person1-Objekts
Generika sind eine leistungsstarke Funktion in TypeScript, mit der Sie wiederverwendbare Komponenten erstellen können, die mit verschiedenen Datentypen arbeiten können.
function error(message: string): never {
throw new Error(message);
} //the return type is never because there is no data returned.
let value: unknown = "hello";
if (typeof value === "string") {
let strLength: number = value.length;
}
In diesem Beispiel ist T ein Typparameter. Es stellt einen Platzhalter für jeden Typ dar. Wenn Sie die Identitätsfunktion aufrufen, können Sie einen beliebigen Argumenttyp übergeben und die Funktion gibt denselben Typ zurück.
In TypeScript können Sie mit generischen Einschränkungen Beschränkungen auf die Typen anwenden, die als Argumente an eine generische Funktion übergeben oder als Typparameter in einer generischen Klasse oder Schnittstelle verwendet werden können.
let value: unknown = "hello"; let strLength: number = (value as string).length;
hier wird das Schlüsselwort „extends“ verwendet, um die Daten einzuschränken
Der Keyof-Operator in TypeScript wird verwendet, um einen Vereinigungstyp aller Eigenschaftsnamen eines Objekttyps abzurufen. Dies ist besonders nützlich, wenn Sie mit generischen Typen und zugeordneten Typen arbeiten.
//typeof
function printValue(value: unknown) {
if (typeof value === "string") {
console.log(value.toUpperCase());
} else if (typeof value === "number") {
console.log(value.toFixed(2));
}
}
//instanceof
function printDate(date: unknown) {
if (date instanceof Date) {
console.log(date.toISOString());
}
}
Pick
interface Person {
firstName: string;
lastName: string;
age: number;
}
const person1: Person = {
firstName: "Alice",
lastName: "Johnson",
age: 30
};
Omit
function identity<T>(arg: T): T {
return arg;
}
identity<string>(string);
Partial
interface Person {
name: string;
age: number;
}
function identity<T extends Person>(arg: T): T {
return arg;
}
const result = identity<Person>({
name: "aa";
age: 12;
});
Andere mögen,
Erforderlich
Schreibgeschützt
Aufzeichnen
In TypeScript werden Klassen mit dem Schlüsselwort class definiert.
interface Person {
name: string;
age: number;
}
type PersonKeys = keyof Person; // Type: "name" | "age"
public Die Standardsichtbarkeit von Klassenmitgliedern ist öffentlich. Auf ein öffentliches Mitglied kann überall zugegriffen werden
Geschützte Mitglieder sind nur für Unterklassen der Klasse sichtbar, in der sie deklariert sind.
Private Mitglieder sind nur innerhalb der Klasse zugänglich.
Statische Mitglieder in TypeScript sind Mitglieder (Eigenschaften und Methoden), die zur Klasse selbst gehören und nicht zu einzelnen Instanzen der Klasse.
let name : string = "Kishor"; let age : number = 27; let isDeveloper: boolen = true; let x : null = null; let y: undefined = undefined;
In TypeScript definieren Schnittstellen einen Vertrag für die Implementierung von Klassen. Eine Klasse, die eine Schnittstelle implementiert, muss über alle in der Schnittstelle deklarierten Eigenschaften und Methoden verfügen. Es wird das Schlüsselwort „implements“ verwendet
let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
return `hello ${name}`
}
Das sind einige der grundlegenden Anwendungsfälle von Typescript, die ich diese Woche gelernt habe. Ich habe eine Menge cooler Sachen gelernt, aber es gibt noch so viel mehr zu entdecken. TypeScript entwickelt sich ständig weiter, daher versuche ich, über die neuesten Versionen und Funktionen auf dem Laufenden zu bleiben und die offizielle Dokumentation und den Blog von TypeScript zu verfolgen, um die neuesten Nachrichten und Best Practices zu erhalten.
Danke, dass du mich auf meiner Reise begleitet hast.
Das obige ist der detaillierte Inhalt vonEine Reise zum Erlernen von Typoskript.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was passiert, wenn die IP-Adresse nicht verfügbar ist?
Wie man Go-Sprache von Grund auf lernt
cad2012 Seriennummer und Schlüssel
Der Unterschied zwischen currentregion und usedrange
Was ist der Unterschied zwischen einer Demomaschine und einer echten Maschine?
Welche Software ist Premiere?
Mom.exe-Initialisierungsfehler
Was ist der Leerzeichencode in HTML?
