개발 능력을 향상시키는 데 도움이 되는 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. 明确类型断言

有时，您可能希望将一个类型明确地断言为另一个类型。您可以使用 30690cee1a11d5dfbdced93b89f678ee 语法或 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 속성에 안전하게 액세스하는 오류가 발생했습니다. 🎜

🎜3. Null 병합 연산자🎜🎜🎜Null 병합 연산자(??)는 다음과 같은 경우에 기본값을 제공하는 간결한 방법입니다. 표현식의 값이 null이거나 정의되지 않음입니다. 🎜🎜예: 🎜rrreee🎜여기에서 value가 null인 경우 result의 값은 defaultValue가 됩니다. 🎜

🎜4. 명시적 유형 주장🎜🎜🎜때로는 한 유형을 다른 유형에 명시적으로 주장하고 싶을 수도 있습니다. 30690cee1a11d5dfbdced93b89f678ee 구문이나 as Type 구문을 사용하여 이 작업을 수행할 수 있습니다. 🎜🎜예: 🎜rrreee🎜or: 🎜rrreee🎜여기서 unknown 유형의 input을 string에 어설션한 다음 길이를 어설션합니다. 숫자입니다. 🎜

🎜5. 명시적 유형 변환🎜🎜🎜어떤 경우에는 값을 한 유형에서 다른 유형으로 변환해야 할 수도 있습니다. 이렇게 하려면 유형의 생성자를 사용합니다. 🎜🎜예: 🎜rrreee🎜여기에서는 string 유형의 value를 number 유형의 numberValue로 변환합니다. 🎜🎜이러한 연산자를 이해하면 TypeScript를 더 잘 이해하고 기술을 향상하는 데 도움이 됩니다. TypeScript 프로그래밍을 개선하기 위해 이러한 연산자를 활용하시기 바랍니다! 🎜🎜🎜원본 링크: https://dev.to/codeoz/how-i-improve-my-skills-in-typescript-5-satisfies-operator-2312🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 🎜 프로그래밍 교육🎜! ! 🎜

위 내용은 개발 능력을 향상시키는 데 도움이 되는 5가지 실용적인 TypeScript 연산자!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!