Heim > Web-Frontend > js-Tutorial > Hauptteil

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

青灯夜游
Freigeben: 2023-03-15 20:27:33
nach vorne
1836 Leute haben es durchsucht

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;
Nach dem Login kopieren

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

2. 可选链操作符

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

示例:

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

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

const city = person.address?.city;
Nach dem Login kopieren

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

3. 空合并操作符

空合并操作符(??)是一种简洁的方式来提供默认值,当一个表达式的值为 nullundefined 时使用。

示例:

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

const result = value ?? defaultValue;
Nach dem Login kopieren

在这里,当 valuenull 时,result 的值将是 defaultValue

4. 明确类型断言

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

示例:

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

或者:

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

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

5. 明确类型转换

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

示例:

const value: string = "42";
const numberValue: number = Number(value);
Nach dem Login kopieren

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

Beispiel:

rrreee
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.

Beispiel: 🎜rrreee🎜Hier ist das Attribut address optional, daher verwenden wir den optionalen Verkettungsoperator, um sicher auf das Attribut city zuzugreifen, ohne einen Fehler auszulösen. 🎜

🎜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!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage