5 opérateurs TypeScript pratiques pour vous aider à améliorer vos capacités de développement !-js tutoriel-php.cn

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

青灯夜游

Libérer： 2023-03-15 20:27:33

avant

1850 Les gens l'ont consulté

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;

Copier après la connexion

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

2. 可选链操作符

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

示例：

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

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

const city = person.address?.city;

Copier après la connexion

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

3. 空合并操作符

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

示例：

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

const result = value ?? defaultValue;

Copier après la connexion

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

4. 明确类型断言

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

示例：

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

Copier après la connexion

或者：

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

Copier après la connexion

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

5. 明确类型转换

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

示例：

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

Copier après la connexion

在这里，我们将 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. 🎜