关于前端:译如何提高我的-TypeScript-技能

在这篇文章中，我将向您展现我如何在 TypeScript 中进步本人的技能。我会向您介绍 5 个令人满意的操作符，这将帮忙您更好地了解 TypeScript 和如何应用它。以下是我将要介绍的操作符：

1. 非空断言操作符
2. 可选链操作符
3. 空合并操作符
4. 明确类型断言
5. 明确类型转换

1. 非空断言操作符

非空断言操作符是一个后置感叹号（!），它通知 TypeScript，表达式的值不会是 null 或 undefined。这能够防止因为可能的 null 或 undefined 值而导致的类型谬误。

示例：

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。

理解这些操作符将帮忙您更好地了解 TypeScript，并进步您的技能。心愿您能善加利用这些操作符来进步您的 TypeScript 编程程度！

原文链接：https://dev.to/codeoz/how-i-improve-my-skills-in-typescript-5-satisfies-operator-2312