개발 능력을 향상시키는 데 도움이 되는 5가지 실용적인 TypeScript 연산자!-JS 튜토리얼-php.cn

개발 능력을 향상시키는 데 도움이 되는 5가지 실용적인 TypeScript 연산자!

青灯夜游

풀어 주다： 2023-03-15 20:27:33

앞으로

1812명이 탐색했습니다.

개발 능력을 향상시키는 데 도움이 되는 5가지 실용적인 TypeScript 연산자!

이 기사에서는 TypeScript 기술이 어떻게 향상되었는지 보여 드리겠습니다. TypeScript와 사용 방법을 더 잘 이해하는 데 도움이 되는 5가지 만족스러운 연산자를 소개하겠습니다. 제가 다룰 연산자는 다음과 같습니다.

Null이 아닌 어설션 연산자
선택적 연결 연산자
Null 병합 연산자
명시적 유형 어설션
명시적 유형 변환

1. null이 아닌 어설션 연산자

null이 아닌 어설션 연산자는 뒤에 오는 느낌표(!)로, 이는 TypeScript에 표현식의 값이 null가 되지 않음을 알려줍니다. 코드> 또는 정의되지 않음. 이렇게 하면 null 또는 정의되지 않은 값으로 인한 유형 오류를 방지할 수 있습니다. [추천 학습: 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]

예:

rrreee

여기에서 element는 null일 수 있지만 null이 아닌 어설션 연산자를 사용하여 요소의 값이 null이 아니라는 것을 TypeScript에 알립니다. code>이므로 유형 오류가 발생하지 않습니다. <p></p> <h2 data-id="heading-1">2. 선택적 연결 연산자</h2>

선택적 연결 연산자(?.)를 사용하면 속성이 존재하는지 걱정할 필요 없이 객체 속성에 액세스할 수 있습니다. . 속성이 존재하지 않으면 정의되지 않음이 반환됩니다.

예: 🎜rrreee🎜여기서 address 속성은 선택 사항이므로 선택적 연결 연산자를 사용하여 예외 없이 city 속성에 안전하게 액세스하는 오류가 발생했습니다. 🎜