|
| 1 | +// 타입 가드는 코드를 통해 코드 흐름 분석에 영향을 주는 용어입니다. |
| 2 | +// TypeScript는 런타임에서 객체가 유효한지 판단하는 |
| 3 | +// 기존의 JavaScript 동작을 이용해서 코드 흐름에 영향을 줄 수 있습니다. |
| 4 | +// 이 예시는 여러분이 다음 예제를 읽어봤다고 가정하겠습니다:code-flow |
| 5 | + |
| 6 | +// 예시를 실행해보기 위해 어떤 클래스를 생성해볼 것입니다. |
| 7 | +// 여기에 인터넷 또는 전화 주문을 다루는 시스템이 있습니다. |
| 8 | + |
| 9 | +interface Order { |
| 10 | + address: string; |
| 11 | +} |
| 12 | +interface TelephoneOrder extends Order { |
| 13 | + callerNumber: string; |
| 14 | +} |
| 15 | +interface InternetOrder extends Order { |
| 16 | + email: string; |
| 17 | +} |
| 18 | + |
| 19 | +// 두 개의 Order 서브 타입 또는 undefined가 될 수 있는 타입이 있습니다 |
| 20 | +type PossibleOrders = TelephoneOrder | InternetOrder | undefined; |
| 21 | + |
| 22 | +// PossibleOrder를 반환하는 함수가 있습니다 |
| 23 | +declare function getOrder(): PossibleOrders; |
| 24 | +const possibleOrder = getOrder(); |
| 25 | + |
| 26 | +// 특정 키가 유니언을 좁히기 위한 객체에 있는지 확인하는 |
| 27 | +// "in" 연산자를 사용할 수 있습니다. |
| 28 | +// ("in"은 객체 키를 검사하기 위한 JavaScript 연산자입니다.) |
| 29 | + |
| 30 | +if ("email" in possibleOrder) { |
| 31 | + const mustBeInternetOrder = possibleOrder; |
| 32 | +} |
| 33 | + |
| 34 | +// 인터페이스를 따르는 클래스가 있는 경우 |
| 35 | +// JavaScript "instanceof" 연산자를 사용할 수 있습니다: |
| 36 | + |
| 37 | +class TelephoneOrderClass { |
| 38 | + address: string; |
| 39 | + callerNumber: string; |
| 40 | +} |
| 41 | + |
| 42 | +if (possibleOrder instanceof TelephoneOrderClass) { |
| 43 | + const mustBeTelephoneOrder = possibleOrder; |
| 44 | +} |
| 45 | + |
| 46 | +// 유니언을 좁을 좁히기 위해 |
| 47 | +// JavaScript "typeof" 연산자를 사용할 수 있습니다. |
| 48 | +// JavaScript 내의 기본형(문자열, 객체, 숫자 같은)만 동작합니다. |
| 49 | + |
| 50 | +if (typeof possibleOrder === "undefined") { |
| 51 | + const definitelyNotAnOder = possibleOrder; |
| 52 | +} |
| 53 | + |
| 54 | +// 여기에서 typeof가 가능한 값의 전체 리스트를 |
| 55 | +// 확인할 수 있습니다: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/typeof |
| 56 | + |
| 57 | +// JavaScript 연산자를 사용하는 것은 여러분을 여기까지만 도달할 수 있게 만듭니다. |
| 58 | +// 자체 객체 타입을 검사하고 싶다면, |
| 59 | +// 타입 서술어 함수를 사용할 수 있습니다. |
| 60 | + |
| 61 | +// 타입 서술어 함수는 |
| 62 | +// 함수가 true를 반환할 때 반환 타입이 코드 흐름 분석에 |
| 63 | +// 정보를 제공하는 함수입니다. |
| 64 | + |
| 65 | +// possible order를 사용하면서, possibleOrder가 어느 타입인지 선언하기 위해서 |
| 66 | +// 두 가지 타입 가드를 사용할 수 있습니다: |
| 67 | + |
| 68 | +function isAnInternetOrder(order: PossibleOrders): order is InternetOrder { |
| 69 | + return order && "email" in order; |
| 70 | +} |
| 71 | + |
| 72 | +function isATelephoneOrder(order: PossibleOrders): order is TelephoneOrder { |
| 73 | + return order && "calledNumber" in order; |
| 74 | +} |
| 75 | + |
| 76 | +// 이제 if문 내부에서 타입이 어떤 possibleOrder인지 좁히기 위해 |
| 77 | +// if문 안에서 이러한 함수들을 사용할 수 있습니다: |
| 78 | + |
| 79 | +if (isAnInternetOrder(possibleOrder)) { |
| 80 | + console.log("Order received via email:", possibleOrder.email); |
| 81 | +} |
| 82 | + |
| 83 | +if (isATelephoneOrder(possibleOrder)) { |
| 84 | + console.log("Order received via phone:", possibleOrder.callerNumber); |
| 85 | +} |
| 86 | + |
| 87 | +// 여기에서 코드 흐름 분석에 대해 더 읽어볼 수 있습니다: |
| 88 | +// |
| 89 | +// - example:code-flow |
| 90 | +// - example:type-guards |
| 91 | +// - example:discriminate-types |
0 commit comments