Skip to content

Commit 0bb4fc6

Browse files
Merge pull request #43 from yahma25/Translation-to-ko-playground-Type-Guards
Translate 1 file to ko - Type Guards
2 parents 1fa19ca + 4ee41a2 commit 0bb4fc6

File tree

1 file changed

+91
-0
lines changed

1 file changed

+91
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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

Comments
 (0)