5 opérateurs TypeScript pratiques pour vous aider à améliorer vos capacités de développement !

Dans cet article, je vais vous montrer comment j'ai amélioré mes compétences en TypeScript. Je vais vous présenter 5 opérateurs satisfaisants qui vous aideront à mieux comprendre TypeScript et comment l'utiliser. Voici les opérateurs que je couvrirai :

• Opérateur d'assertion non nulle

• Opérateur de chaînage facultatif

• Opérateur de fusion nulle

• Assertion de type explicite

• Conversion de type explicite

1. Opérateur d'assertion non nulle

L'opérateur d'assertion non nulle est un point d'exclamation final (!), qui indique à TypeScript que la valeur de l'expression ne sera pas null code> ou <code>non défini. Cela évite les erreurs de type dues à d'éventuelles valeurs null ou undefined. [Apprentissage recommandé : tutoriel vidéo javascript!），它告诉 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]

Exemple :

rrreee

Ici, element pourrait être null, mais nous utilisons l'opérateur d'assertion non nul pour indiquer à TypeScript que nous savons que la valeur de l'élément n'est pas null code>, donc aucune erreur de type ne se produira. <p></p> <h2 data-id="heading-1">2. Opérateur de chaînage facultatif</h2>

L'opérateur de chaînage facultatif (?.) vous permet d'accéder aux propriétés de l'objet sans avoir à vous soucier de l'existence des propriétés. . Si la propriété n'existe pas, undefined est renvoyé.

Exemple : 🎜rrreee🎜Ici, l'attribut address est facultatif, nous utilisons donc l'opérateur de chaînage facultatif pour accéder en toute sécurité à l'attribut city sans lancer une erreur. 🎜

🎜3. Opérateur de fusion nul🎜🎜🎜L'opérateur de fusion nul (??) est un moyen concis de fournir une valeur par défaut lorsqu'il est utilisé lorsque le la valeur d'une expression est null ou undefined. 🎜🎜Exemple : 🎜rrreee🎜Ici, lorsque value est null , la valeur de result sera defaultValue . 🎜

🎜4. Assertion de type explicite🎜🎜🎜Parfois, vous souhaiterez peut-être affirmer explicitement un type à un autre type. Vous pouvez le faire en utilisant la syntaxe <Type> ou la syntaxe as Type. 🎜🎜Exemple : 🎜rrreee🎜ou : 🎜rrreee🎜Ici, on affirme l'input de type inconnu à string puis sa longueur L'assertion est le numéro. 🎜

🎜5. Conversion de type explicite🎜🎜🎜Dans certains cas, vous souhaiterez peut-être convertir une valeur d'un type à un autre. Pour ce faire, vous utilisez le constructeur du type. 🎜🎜Exemple : 🎜rrreee🎜Ici, nous convertissons value de type string en numberValue de type number . 🎜🎜Comprendre ces opérateurs vous aidera à mieux comprendre TypeScript et à améliorer vos compétences. J'espère que vous profiterez de ces opérateurs pour améliorer votre programmation TypeScript ! 🎜🎜🎜Lien original : https://dev.to/codeoz/how-i-improve-my-skills-in-typescript-5-satisfies-operator-2312🎜🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Enseignement de la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!