5 praktische TypeScript-Operatoren, die Ihnen helfen, Ihre Entwicklungsfähigkeiten zu verbessern!

In diesem Artikel zeige ich Ihnen, wie ich meine Fähigkeiten in TypeScript verbessert habe. Ich stelle Ihnen 5 zufriedenstellende Operatoren vor, die Ihnen helfen, TypeScript und seine Verwendung besser zu verstehen. Hier sind die Operatoren, die ich behandeln werde:

• Nicht-Null-Assertionsoperator

• Optionaler Verkettungsoperator

• Null-Koaleszenzoperator

• Explizite Typ-Assertion

• Explizite Typkonvertierung

1. Nicht-Null-Behauptungsoperator

Der Nicht-Null-Behauptungsoperator ist ein nachgestelltes Ausrufezeichen (!), das TypeScript mitteilt, dass der Wert des Ausdrucks nicht null sein wird. code> oder <code>undefiniert. Dadurch werden Typfehler aufgrund möglicher null- oder undefinierter-Werte vermieden. [Empfohlenes Lernen: Javascript-Video-Tutorial!），它告诉 TypeScript，表达式的值不会是 null 或 undefined。这可以避免因为可能的 null 或 undefined 值而导致的类型错误。【推荐学习：javascript视频教程】

示例：

const element: HTMLElement | null = document.getElementById("my-element");
const width: number = element!.offsetWidth;

在这里，element 可能为 null，但是我们使用非空断言操作符告诉 TypeScript 我们知道 element 的值不是 null，所以不会出现类型错误。

2. 可选链操作符

可选链操作符（?.）允许您在访问对象属性时不必担心属性是否存在。如果属性不存在，则返回 undefined。

示例：

interface Person {
  name: string;
  address?: {
    city: string;
  };
}

const person: Person = {
  name: "John",
};

const city = person.address?.city;

在这里，address 属性是可选的，所以我们使用可选链操作符来安全地访问 city 属性，而不会抛出错误。

3. 空合并操作符

空合并操作符（??）是一种简洁的方式来提供默认值，当一个表达式的值为 null 或 undefined 时使用。

示例：

const value: number | null = null;
const defaultValue = 42;

const result = value ?? defaultValue;

在这里，当 value 为 null 时，result 的值将是 defaultValue。

4. 明确类型断言

有时，您可能希望将一个类型明确地断言为另一个类型。您可以使用 <Type> 语法或 as Type 语法来实现这一点。

示例：

const input: unknown = "42";
const value: number = <number>(<string>input).length;

或者：

const input: unknown = "42";
const value: number = (input as string).length;

在这里，我们将 unknown 类型的 input 断言为 string，然后将其长度断言为 number。

5. 明确类型转换

在某些情况下，您可能希望将一个值从一种类型转换为另一种类型。要执行此操作，您可以使用类型的构造函数。

示例：

const value: string = "42";
const numberValue: number = Number(value);

在这里，我们将 string 类型的 value 转换为 number 类型的 numberValue]

Beispiel:

Hier könnte element null sein, aber wir verwenden den Nicht-Null-Behauptungsoperator, um TypeScript mitzuteilen, dass wir wissen, dass der Wert von element nicht null ist. code>, sodass keine Typfehler auftreten. <p></p> <h2 data-id="heading-1">2. Optionaler Verkettungsoperator</h2>

Der optionale Verkettungsoperator (?.) ermöglicht Ihnen den Zugriff auf Objekteigenschaften, ohne sich um die Existenz von Eigenschaften kümmern zu müssen . Wenn die Eigenschaft nicht vorhanden ist, wird undefiniert zurückgegeben.

🎜3. Null-Merge-Operator🎜🎜🎜Der Null-Merge-Operator (??) ist eine prägnante Möglichkeit, einen Standardwert bereitzustellen, wenn er verwendet wird Der Wert eines Ausdrucks ist null oder undefiniert. 🎜🎜Beispiel: 🎜rrreee🎜Wenn hier value null ist, ist der Wert von result defaultValue . 🎜

🎜4. Explizite Typzusicherung🎜🎜🎜Manchmal möchten Sie möglicherweise einen Typ explizit einem anderen Typ zuordnen. Sie können dies mit der Syntax <Type> oder der Syntax as Type tun. 🎜🎜Beispiel: 🎜rrreee🎜oder: 🎜rrreee🎜Hier behaupten wir den input vom Typ unknown an string und dann seine Länge. Die Behauptung ist Nummer. 🎜

🎜5. Explizite Typkonvertierung🎜🎜🎜In manchen Fällen möchten Sie möglicherweise einen Wert von einem Typ in einen anderen konvertieren. Dazu verwenden Sie den Konstruktor des Typs. 🎜🎜Beispiel: 🎜rrreee🎜Hier konvertieren wir value vom Typ string in numberValue vom Typ number . 🎜🎜Das Verständnis dieser Operatoren wird Ihnen helfen, TypeScript besser zu verstehen und Ihre Fähigkeiten zu verbessern. Ich hoffe, dass Sie diese Operatoren nutzen werden, um Ihre TypeScript-Programmierung zu verbessern! 🎜🎜🎜Originallink: https://dev.to/codeoz/how-i-improve-my-skills-in-typescript-5-satisfies-operator-2312🎜🎜🎜Weitere programmierbezogene Kenntnisse finden Sie unter: 🎜 Programmierunterricht🎜! ! 🎜

Das obige ist der detaillierte Inhalt von5 praktische TypeScript-Operatoren, die Ihnen helfen, Ihre Entwicklungsfähigkeiten zu verbessern!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!