Union types: first commit (#144)

* Union types: first commit

* union types: second commit

* union types: third commit

* union types: fourth commit

Author: zigsong

pages/unions-and-intersections.md

@@ -5,21 +5,21 @@ permalink: /docs/handbook/unions-and-intersections.html
 oneline: How to use unions and intersection types in TypeScript
 ---
 
-So far, the handbook has covered types which are atomic objects.
-However, as you model more types you find yourself looking for tools which let you compose or combine existing types instead of creating them from scratch.
+지금까지, 핸드북은 원자 객체의 타입들을 다뤄왔습니다.
+하지만, 더 많은 타입을 모델링할수록 처음부터 타입을 만들어내기보다는 이미 존재하는 타입을 구성하거나 결합하는 방법들을 찾게 될 것입니다.
 
-Intersection and Union types are one of the ways in which you can compose types.
+교차 타입과 유니언 타입은 타입을 구성할 수 있는 방법 중 하나입니다.
 
-# Union Types
+# 유니언 타입 (Union Types)
 
-Occasionally, you'll run into a library that expects a parameter to be either a `number` or a `string`.
-For instance, take the following function:
+가끔, `number`나 `string`을 매개변수로 기대하는 라이브러리를 사용할 때가 있습니다.
+예를 들어, 다음 함수를 사용할 때입니다:
 
-```ts twoslash
+```ts
 /**
- * Takes a string and adds "padding" to the left.
- * If 'padding' is a string, then 'padding' is appended to the left side.
- * If 'padding' is a number, then that number of spaces is added to the left side.
+ * 문자열을 받고 왼쪽에 "padding"을 추가합니다.
+ * 만약 'padding'이 문자열이라면, 'padding'은 왼쪽에 더해질 것입니다.
+ * 만약 'padding'이 숫자라면, 그 숫자만큼의 공백이 왼쪽에 더해질 것입니다.
  */
 function padLeft(value: string, padding: any) {
   if (typeof padding === "number") {
@@ -31,33 +31,33 @@ function padLeft(value: string, padding: any) {
   throw new Error(`Expected string or number, got '${padding}'.`);
 }
 
-padLeft("Hello world", 4); // returns "    Hello world"
+padLeft("Hello world", 4); // "Hello world"를 반환합니다.
 ```
 
-The problem with `padLeft` in the above example is that its `padding` parameter is typed as `any`.
-That means that we can call it with an argument that's neither a `number` nor a `string`, but TypeScript will be okay with it.
+위 예제에서 `padLeft`의 문제는 매개변수 `padding`이 `any` 타입으로 되어있다는 것입니다.
+즉, `number`나 `string` 둘 다 아닌 인수로 함수를 호출할 수 있다는 것이고, TypeScript는 이를 괜찮다고 받아들일 것입니다.
 
-```ts twoslash
+```ts
 declare function padLeft(value: string, padding: any): string;
-// ---cut---
-// passes at compile time, fails at runtime.
+// ---생략---
+// 컴파일 타임에는 통과하지만, 런타임에는 오류가 발생합니다.
 let indentedString = padLeft("Hello world", true);
 ```
 
-In traditional object-oriented code, we might abstract over the two types by creating a hierarchy of types.
-While this is much more explicit, it's also a little bit overkill.
-One of the nice things about the original version of `padLeft` was that we were able to just pass in primitives.
-That meant that usage was simple and concise.
-This new approach also wouldn't help if we were just trying to use a function that already exists elsewhere.
+전통적인 객체지향 코드에서, 타입의 계층을 생성하여 두 타입을 추상화할 수 있습니다.
+이는 더 명시적일 수는 있지만, 조금 과하다고 할 수도 있습니다.
+기존 방법의 `padLeft`에서 좋은 점 중 하나는 원시 값을 단지 전달할 수 있다는 것입니다.
+즉 사용법이 간단하고 간결합니다.
+또한 이 새로운 방법은 단지 다른 곳에 이미 존재하는 함수를 사용하고자 할 때 도움이 되지 않습니다.
 
-Instead of `any`, we can use a _union type_ for the `padding` parameter:
+`any` 대신에, _유니언 타입_을 매개변수 `padding`에 사용할 수 있습니다:
 
-```ts twoslash
+```ts
 // @errors: 2345
 /**
- * Takes a string and adds "padding" to the left.
- * If 'padding' is a string, then 'padding' is appended to the left side.
- * If 'padding' is a number, then that number of spaces is added to the left side.
+ * 문자열을 받고 왼쪽에 "padding"을 추가합니다.
+ * 만약 'padding'이 문자열이라면, 'padding'은 왼쪽에 더해질 것입니다.
+ * 만약 'padding'이 숫자라면, 그 숫자만큼의 공백이 왼쪽에 더해질 것입니다.
  */
 function padLeft(value: string, padding: string | number) {
   // ...
@@ -66,14 +66,14 @@ function padLeft(value: string, padding: string | number) {
 let indentedString = padLeft("Hello world", true);
 ```
 
-A union type describes a value that can be one of several types.
-We use the vertical bar (`|`) to separate each type, so `number | string | boolean` is the type of a value that can be a `number`, a `string`, or a `boolean`.
+유니언 타입은 여러 타입 중 하나가 될 수 있는 값을 의미합니다.
+세로 막대 (`|`)로 각 타입을 구분하여, `number | string | boolean`은 값의 타입이 `number`, `string` 혹은 `boolean`이 될 수 있음을 의미합니다.
 
-## Unions with Common Fields
+## 공통 필드를 갖는 유니언 (Unions with Common Fields)
 
-If we have a value that is a union type, we can only access members that are common to all types in the union.
+유니언 타입인 값이 있으면, 유니언에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있습니다.
 
-```ts twoslash
+```ts
 // @errors: 2339
 
 interface Bird {
@@ -91,19 +91,19 @@ declare function getSmallPet(): Fish | Bird;
 let pet = getSmallPet();
 pet.layEggs();
 
-// Only available in one of the two possible types
+// 두 개의 잠재적인 타입 중 하나에서만 사용할 수 있습니다.
 pet.swim();
 ```
 
-Union types can be a bit tricky here, but it just takes a bit of intuition to get used to.
-If a value has the type `A | B`, we only know for _certain_ that it has members that both `A` _and_ `B` have.
-In this example, `Bird` has a member named `fly`.
-We can't be sure whether a variable typed as `Bird | Fish` has a `fly` method.
-If the variable is really a `Fish` at runtime, then calling `pet.fly()` will fail.
+여기서 유니언 타입은 약간 까다로울 수 있으나, 익숙해지는 데 약간의 직관만 있으면 됩니다.
+만약 값이 `A | B` 타입을 갖고 있으면, _확신할_ 수 있는 것은 그 값이 `A`_와_`B` 둘 다 가지고 있는 멤버들을 갖고 있다는 것뿐입니다.
+이 예제에서, `Bird`는 `fly`라는 멤버를 갖고 있습니다.
+`Bird | Fish`로 타입이 지정된 변수가 `fly` 메서드를 가지고 있는지 확신할 수 없습니다.
+만약 변수가 실제로 런타임에 `Fish`이면, `pet.fly()`를 호출하는 것은 오류입니다.
 
-## Discriminating Unions
+## 유니언 구별하기 (Discriminating Unions)
 
-A common technique for working with unions is to have a single field which uses literal types which you can use to let TypeScript narrow down the possible current type. For example, we're going to create a union of three types which have a single shared field.
+유니언을 사용하는 데 있어서 일반적인 기술은 TypeScript가 현재 가능한 타입 추론의 범위를 좁혀나가게 해줄 수 있는 리터럴 타입을 갖는 단일 필드를 사용하는 것입니다. 예를 들어, 하나의 공통 필드를 가지고 있는 세 가지 타입의 유니언을 만들어 보겠습니다.
 
 ```ts
 type NetworkLoadingState = {
@@ -124,45 +124,15 @@ type NetworkSuccessState = {
   };
 };
 
-// Create a type which represents only one of the above types
-// but you aren't sure which it is yet.
+// 위 타입들 중 단 하나를 대표하는 타입을 만들었지만,
+// 그것이 무엇에 해당하는지 아직 확실하지 않습니다.
 type NetworkState =
   | NetworkLoadingState
   | NetworkFailedState
   | NetworkSuccessState;
 ```
 
-<style type="text/css">
-.markdown table.tg  {
-  border-collapse:collapse;
-  width: 100%;
-  text-align: center;
-  display: table;
-}
-
-.tg th {
-  border-bottom: 1px solid black;
-  padding: 8px;
-  padding-bottom: 0;
-}
-
-.tg tbody, .tg tr {
-  width: 100%;
-}
-
-.tg .highlight {
-  background-color: #F3F3F3;
-}
-
-@media (prefers-color-scheme: dark) {
-  .tg .highlight {
-    background-color: #424242;
-  }
-}
-
-</style>
-
-All of the above types have a field named `state`, and then they also have their own fields:
+위 타입들은 모두 `state`라는 필드를 갖고 있으며, 그들 각자만의 필드도 갖고 있습니다:
 
 <table class='tg' width="100%">
   <tbody>
@@ -184,9 +154,9 @@ All of the above types have a field named `state`, and then they also have their
     </tbody>
 </table>
 
-Given the `state` field is common in every type inside `NetworkState` - it is safe for your code to access without an existence check.
+`state` 필드가 `NetworkState` 안의 모든 타입에 공통으로 존재한다는 점을 안다면 - 존재 여부를 체크하지 않고도 접근할 수 있습니다.
 
-With `state` as a literal type, you can compare the value of `state` to the equivalent string and TypeScript will know which type is currently being used.
+리터럴 타입으로서 `state`를 갖고 있다면, `state`의 값은 대응하는 동일한 문자열과 대조되고 TypeScript는 현재 어떤 타입이 사용되고 있는지 알 것입니다.
 
 <table class='tg' width="100%">
   <tbody>
@@ -203,9 +173,9 @@ With `state` as a literal type, you can compare the value of `state` to the equi
     </tbody>
 </table>
 
-In this case, you can use a `switch` statement to narrow down which type is represented at runtime:
+이 경우, 런타임에 나타나는 타입의 범위를 좁히기 위하여 `switch`문을 사용할 수 있습니다.
 
-```ts twoslash
+```ts
 // @errors: 2339
 type NetworkLoadingState = {
   state: "loading";
@@ -224,28 +194,28 @@ type NetworkSuccessState = {
     summary: string;
   };
 };
-// ---cut---
+// ---생략---
 type NetworkState =
   | NetworkLoadingState
   | NetworkFailedState
   | NetworkSuccessState;
 
 function networkStatus(state: NetworkState): string {
-  // Right now TypeScript does not know which of the three
-  // potential types state could be.
+  // 현재 TypeScript는 셋 중 어떤 것이
+  // state가 될 수 있는 잠재적인 타입인지 알 수 없습니다.
 
-  // Trying to access a property which isn't shared
-  // across all types will raise an error
+  // 모든 타입에 공유되지 않는 프로퍼티에 접근하려는 시도는
+  // 오류를 발생시킵니다.
   state.code;
 
-  // By switching on state, TypeScript can narrow the union
-  // down in code flow analysis
+  // state에 swtich문을 사용하여, TypeScript는 코드 흐름을 분석하면서
+  // 유니언 타입을 좁혀나갈 수 있습니다.
   switch (state.state) {
     case "loading":
       return "Downloading...";
     case "failed":
-      // The type must be NetworkFailedState here,
-      // so accessing the `code` field is safe
+      // 여기서 타입은 NetworkFailedState일 것이며,
+      // 따라서 `code` 필드에 접근할 수 있습니다.
       return `Error ${state.code} downloading`;
     case "success":
       return `Downloaded ${state.response.title} - ${state.response.summary}`;
@@ -263,7 +233,7 @@ That means an object of this type will have all members of all three types.
 
 For example, if you had networking requests with consistent error handling then you could separate out the error handling into it's own type which is merged with types which correspond to a single response type.
 
-```ts twoslash
+```ts
 interface ErrorHandling {
   success: boolean;
   error?: { message: string };
@@ -297,7 +267,7 @@ const handleArtistsResponse = (response: ArtistsResponse) => {
 
 Intersections are used to implement the [mixin pattern](/docs/handbook/mixins.html):
 
-```ts twoslash
+```ts
 class Person {
   constructor(public name: string) {}
 }
@@ -333,4 +303,4 @@ function extend<First extends {}, Second extends {}>(
 
 const jim = extend(new Person("Jim"), ConsoleLogger.prototype);
 jim.log(jim.name);
-```
+```-