TypeScript에서 조건부 유형을 만드는 방법은 무엇입니까?

WBOY
풀어 주다: 2023-08-23 18:33:11
앞으로
946명이 탐색했습니다.

如何在 TypeScript 中创建条件类型?

TypeScript에서는 엄격한 유형의 언어이고 조건 유형도 포함하기 때문에 모든 변수와 객체에 대해 유형을 정의해야 합니다.

단어 조건 유형을 통해 특정 조건에 따라 변수를 선택해야 함을 예측할 수 있습니다. 네, 당신이 들은 게 맞습니다. if-else 문을 사용하여 특정 조건에 따라 특정 코드 블록을 실행하는 것처럼 특정 조건에 따라 변수 유형을 선택할 수도 있습니다.

이 튜토리얼에서는 TypeScript에서 조건부 유형을 만드는 방법을 배웁니다.

문법

사용자는 다음 구문에 따라 TypeScript에서 조건부 유형을 생성할 수 있습니다.

으아악

위 구문에서는 삼항 연산자를 사용하여 조건 유형을 생성합니다.

피연산자 설명

  • First_type- 유형 또는 변수입니다.

  • Second_type- 숫자, 문자열, 부울 등과 같은 유형입니다.

  • True_type- first_type에 second_type이 포함되어 있으면 true_type이 변수에 할당됩니다.

  • False_type- first_type이 second_type을 확장하지 않으면 false_type이 변수에 할당됩니다.

이제 TypeScript의 조건부 유형에 대해 자세히 알아보기 위해 다양한 예제를 살펴보겠습니다.

아래 예에서는 두 개의 인터페이스를 정의합니다. TypeScript에서 인터페이스는 객체나 클래스의 구조를 정의한다는 점에서 유형 별칭과 동일하게 작동합니다.

이후에는 인터페이스 2를 인터페이스 1로 확장했습니다. 이는 인터페이스2에 인터페이스1의 모든 속성이 포함되어 있음을 의미합니다. 그런 다음 삼항 연산자를 사용하여 조건 유형을 type1 및 type2 별칭에 할당합니다.

출력에서 사용자는 var1 및 var2 변수의 유형을 확인할 수 있습니다.

으아악

컴파일되면 다음 JavaScript 코드가 생성됩니다. -

으아악

Output

위 코드는 다음과 같은 출력을 생성합니다. -

으아악

조건부 유형의 기본과 생성 방법을 배웠습니다.

조건부 유형을 사용하는 이유는 무엇인가요?

실제 개발에서 조건부 유형이 왜, 어떻게 유용한지 알아봅니다.

아래 코드를 살펴보겠습니다. 여기서는 매개변수 유형에 따라 반환 유형을 변경하여 func1() 함수를 오버로드합니다. 매개변수 유형이 부울이면 반환 유형은 문자열이라는 것을 알 수 있습니다. 또한 매개변수 유형이 문자열과 숫자인 경우 반환 유형은 각각 숫자와 부울입니다.

으아악

함수에 여러 정의를 작성하는 대신 한 줄에 하나의 정의로 조건부 유형을 생성하여 함수를 오버로드할 수 있습니다.

아래 예에서는 test_type이라는 조건 유형을 만들었습니다. 값을 가져오고 값 유형에 따라 유형을 반환합니다. 값 유형이 숫자이면 부울 값을 반환하고, 문자열 값이면 숫자를 반환하고, 부울 값이면 문자열 유형을 반환합니다.

출력에서 test_type에서 얻은 변수와 abc 변수의 유형을 관찰할 수 있습니다.

으아악

컴파일되면 다음 JavaScript 코드가 생성됩니다.

으아악

Output

위 코드는 다음과 같은 출력을 생성합니다. -

으아악

변수에 조건 유형을 사용했기 때문에 함수 매개변수나 반환 유형에 사용할 수 있습니다.

이 튜토리얼의 사용자는 다른 변수의 유형이나 값을 기반으로 특정 변수를 선택할 수 있는 조건부 유형을 만드는 방법을 배웠습니다. 또한 함수 매개변수 및 반환 유형에 조건부 유형을 사용하는 방법도 배웠습니다.

위 내용은 TypeScript에서 조건부 유형을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:tutorialspoint.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!