乐趣区

关于前端:译如何提高我的-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

退出移动版