타임 스크립트 차별 노조

TypeScript는 확장 가능한 JavaScript 응용 프로그램을 구축하기위한 강력한 도구이며 대형 웹 JavaScript 프로젝트의 표준이되었습니다. 그러나 초보자의 경우 TypeScript에는 몇 가지 까다로운 것들이 있으며 그 중 하나는 노조 유형을 구별합니다.

다음 코드를 고려하십시오.

 인터페이스 고양이 {
  무게 : 숫자;
  수염 : 숫자;
}
인터페이스 개 {
  무게 : 숫자;
  친절 : 부울;
}
동물 : 개 |. 고양이;

많은 개발자들은 animal 에 접근 할 때 weight 속성 만 유효하고 whiskers 과 friendly 속성은 유효하지 않다는 사실에 놀랄 것입니다. 이 기사는 이유를 설명 할 것입니다.

우리가 그것에 뛰어 들기 전에, 구조적 및 공칭 유형을 빠르게 검토하겠습니다.

구조 유형

구조적 유형을 이해하는 가장 좋은 방법은 공칭 유형과 비교하는 것입니다. 사용했을 수있는 유형 언어의 대부분은 명목상 타이핑됩니다. 예를 들어 C# 코드 (Java 또는 C 유사) :

 클래스 foo {
  공개 INT X;
}
클래스 블라 {
  공개 INT X;
}

Foo 와 Blah 정확히 같은 구조를 가지고 있더라도 서로 값을 할당 할 수는 없습니다. 다음 코드 :

 blah b = 새로운 foo ();

다음 오류가 생성됩니다.

<code>无法隐式转换类型“Foo”为“Blah”</code>

이 클래스의 구조는 중요하지 않습니다. Foo 형의 변수는 Foo 클래스 (또는 하위 클래스)의 인스턴스에만 할당 될 수 있습니다.

반대로 TypeScript는 구조 유형을 채택합니다. TypeScript는 두 유형 모두 동일한 구조를 갖는 경우 호환 가능한 것으로 간주합니다.

따라서 다음 코드는 제대로 작동합니다.

 클래스 foo {
  x : 숫자 = 0;
}
클래스 블라 {
  x : 숫자 = 0;
}
f : foo = new blah ();
B : blah = new foo ();

일치하는 값으로 유형 모음

이것을 더 설명합시다. 다음 코드가 주어지면 :

 클래스 foo {
  x : 숫자 = 0;
}

f : foo;

f 는 Foo 클래스 인스턴스와 동일한 구조 인 객체를 보유 할 수있는 변수이며,이 경우 숫자를 나타내는 x 속성을 의미합니다. 이것은 일반적인 JavaScript 객체조차 받아 들일 수 있음을 의미합니다.

 f : foo;
f = {
  x : 0
};

노동 조합 유형

이 기사의 시작 부분에서 코드로 돌아가 봅시다.

 인터페이스 고양이 {
  무게 : 숫자;
  수염 : 숫자;
}
인터페이스 개 {
  무게 : 숫자;
  친절 : 부울;
}

우리는 알고 있습니다 :

 동물 : 개;

Dog 인터페이스와 같은 구조를 가진 동물 animal 에게 만들어보십시오. 그렇다면 다음 코드는 무엇을 의미합니까?

 동물 : 개 |. 고양이;

이것은 animal 유형을 Dog 인터페이스와 일치하는 모든 물체 또는 Cat 인터페이스와 일치하는 물체로 정의합니다.

그렇다면 왜 animal 이제 우리가 weight 속성에 액세스 할 수있게합니까? 간단히 말해서, TypeScript가 어떤 유형인지 알지 못하기 때문입니다. TypeScript는 animal Dog Cat 여야한다는 것을 알고 있지만 그 중 하나 일 수도 있습니다. 우리가 friendly 속성에 접근 할 수 있지만, 인스턴스에서 animal 실제로 Cat 이고 Dog 아닌 경우 런타임 오류가 발생할 수 있습니다. whiskers 속성에 대해서도 마찬가지입니다.

노동 조합 유형은 속성의 통합이 아니라 유효한 가치의 결합입니다. 개발자는 종종 다음과 같은 코드를 작성합니다.

 동물 : 개 |. 고양이;

그리고 animal Dog Cat 특성의 연합을 가질 것으로 기대합니다. 그러나 이것은 또 다른 실수입니다. 이것은 animal 유효한 Dog 유효한 Cat 값의 관절과 일치하는 값을 가지고 있음을 지정합니다. 그러나 TypeScript만으로는 존재 하는 속성에 액세스 할 수 있습니다. 현재 이것은 노조의 모든 유형의 속성을 의미합니다.

유형 좁아집니다

이제 우리는 다음과 같습니다.

 동물 : 개 |. 고양이;

animal Dog 일 때, Dog 인터페이스에서 Dog 올바르게 취급하고 Cat 일 때 처리하는 방법은 무엇입니까? 현재 in 연산자를 사용할 수 있습니다. 이것은 자주 보지 못하는 오래된 JavaScript 연산자로서 객체에 속성이 존재하는지 테스트 할 수 있습니다. 예를 들어:

 O = {a : 12}하자;

"a"o in o; // true
"x"o in o; // false

TypeScript는 in 연산자와 깊이 통합되어 있음이 밝혀졌습니다. 사용 방법을 보자 :

 동물 : 개 |. 고양이 = {}하자;

if (동물에서 "친절한") {
  Console.log (Animal.friendly);
} 또 다른 {
  Console.log (Animal.whiskers);
}

이 코드는 오류가 발생하지 않습니다. if 블록 내에서 TypeScript는 friendly 속성이 있다는 것을 알고 있으므로 animal Dog 변환합니다. else 블록 내에서, 타입 스크립트는 animal Cat 로 취급합니다. 이 블록의 animal 대상 위에 마우스를 가져 와서 코드 편집기에서 이것을 볼 수도 있습니다.

유명한 노동 조합 유형

블로그 게시물이 여기서 끝날 것으로 예상 될 수 있지만 불행히도 속성이 존재하는지 확인하여 Union 유형을 좁히는 것이 매우 제한됩니다. 간단한 Dog Cat 유형에 적합하지만 이러한 유형 사이에 더 많은 유형과 더 많은 겹치면 상황이 더 복잡하고 깨지기 쉽게 얻을 수 있습니다.

이것은 노조 유형 차별화가 유용한 곳입니다. 우리는 이전의 모든 것을 보관하고 각 유형에 속성을 추가 할 것입니다. 각 유형에 속성을 추가 할 수 있습니다.

 인터페이스 고양이 {
  무게 : 숫자;
  수염 : 숫자;
  동물 _type : "고양이";
}
인터페이스 개 {
  무게 : 숫자;
  친절 : 부울;
  동물 _type : "개";
}

두 유형 모두에서 ANIMAL_TYPE 속성에 유의하십시오. 두 가지 다른 값을 가진 문자열로 착각하지 마십시오. ANIMAL_TYPE: "CAT"; "Cat"을 포함하는 유형을 나타냅니다.

이제 검사가 더욱 신뢰할 수있게되었습니다.

 동물 : 개 |. 고양이 = {}하자;

if (animal.animal_type === "dog") {
  Console.log (Animal.friendly);
} 또 다른 {
  Console.log (Animal.whiskers);
}

이 점검은 노조에 참여하는 각 유형이 ANIMAL_TYPE 속성의 다른 값을 가지고 있다고 가정하면 어리석은 일입니다.

유일한 단점은 이제 새로운 재산을 처리해야한다는 것입니다. Dog 또는 Cat 인스턴스가 만들어 질 때마다 ANIMAL_TYPE 에 고유 한 올바른 값을 제공해야합니다. 그러나 TypeScript가 당신에게 상기시키기 때문에 잊어 버리는 것에 대해 걱정하지 마십시오. ?

추가 독서

자세한 내용을 배우려면 유형의 좁아 져서 TypeScript 문서를 읽는 것이 좋습니다. 이것은 우리가 여기서 논의하고있는 것에 대해 더 심층적으로 살펴볼 것입니다. 이 링크에는 유형 어설 션에 관한 섹션이 있습니다. 이를 통해 자신의 사용자 정의 검사를 정의하여 유형 차별기를 사용하거나 in 키워드에 의존하지 않고 유형을 좁히기 위해 자신의 사용자 정의 검사를 정의 할 수 있습니다.

결론적으로

이 기사의 시작 부분에서, 다음 예에서는 weight 유일하게 접근 가능한 속성 인 이유는 다음과 같이 말했습니다.

 인터페이스 고양이 {
  무게 : 숫자;
  수염 : 숫자;
}
인터페이스 개 {
  무게 : 숫자;
  친절 : 부울;
}
동물 : 개 |. 고양이;

우리가 배운 것은 TypeScript는 animal Dog Cat 일 수 있지만 둘 다가 아니라는 것을 알고 있다는 것입니다. 그러므로 우리는 weight 만 얻을 수 있으며, 이는 둘 사이의 유일한 공공 재산입니다.

노조 유형을 구별하는 개념은 TypeScript가 이러한 물체를 구별하는 방식이며,이 접근법은 더 큰 물체 수집에도 매우 확장 가능합니다. 따라서 우리는 확인하는 데 사용할 수있는 단일 문자 값을 보유하는 두 유형 모두에 새로운 ANIMAL_TYPE 속성을 만들어야합니다. 물론 이것은 추적해야 할 또 다른 것이지만,보다 신뢰할 수있는 결과를 생성합니다. 이는 처음부터 TypeScript에서 원하는 것입니다.

위 내용은 타임 스크립트 차별 노조의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!