|
| 1 | +//// { order: 1, compiler: { strict: false } } |
| 2 | + |
| 3 | +// JavaScript 오브젝트는 |
| 4 | +// 이름이 있는 키로 래핑된 값의 모음입니다. |
| 5 | + |
| 6 | +const userAccount = { |
| 7 | + name: "Kieron", |
| 8 | + id: 0, |
| 9 | +}; |
| 10 | + |
| 11 | +// 이런 오브젝트를 더 크고, 더 복잡한 |
| 12 | +// 데이터 모델로 만들기 위해 합칠 수 있습니다. |
| 13 | + |
| 14 | +const pie = { |
| 15 | + type: "Apple", |
| 16 | +}; |
| 17 | + |
| 18 | +const purchaseOrder = { |
| 19 | + owner: userAccount, |
| 20 | + item: pie, |
| 21 | +}; |
| 22 | + |
| 23 | +// 단어 몇 개를 마우스로 호버해보면 (purchaseOrder 위에 호버해보세요), |
| 24 | +// TypeScript가 JavaScript를 이름표가 붙은 타입으로 |
| 25 | +// 어떻게 해석하는지 확인할 수 있습니다. |
| 26 | + |
| 27 | +// 값은 "."를 통해 구매 주문에 대한 사용자 이름에 |
| 28 | +// 접근할 수 있습니다: |
| 29 | +console.log(purchaseOrder.item.type); |
| 30 | + |
| 31 | +// () 사이에 있는 코드의 각 부분에 마우스로 호버해보면, |
| 32 | +// TypeScript가 각 부분에 대해 더 많은 정보를 제공하는 것을 확인할 수 있습니다. |
| 33 | +// 아래에 다시 작성해보세요: |
| 34 | + |
| 35 | +// 문자별로 다음 줄에 이것을 복사해보세요: |
| 36 | +// |
| 37 | +// purchaseOrder.item.type |
| 38 | + |
| 39 | +// TypeScript는 이 파일에서 사용 가능한 JavaScript 오브젝트에 대한 피드백을 |
| 40 | +// playground에 제공하며, 오타를 방지할 수 있게 해주고 |
| 41 | +// 다른 곳에서 찾아볼 필요 없이 |
| 42 | +// 추가 정보를 제공해줍니다. |
| 43 | + |
| 44 | +// TypeScript는 배열에도 동일한 기능을 제공합니다. |
| 45 | +// 여기에 구매 주문만 포함된 배열이 있습니다. |
| 46 | + |
| 47 | +const allOrders = [purchaseOrder]; |
| 48 | + |
| 49 | +// allOrders에 호버해보면, |
| 50 | +// 호버 정보가 []로 끝나기 때문에 배열이라는 것을 알 수 있습니다. |
| 51 | +// 인덱스(0부터 시작하는)와 함께 대괄호를 사용함으로써 |
| 52 | +// 첫 번째 순서에 접근할 수 있습니다. |
| 53 | + |
| 54 | +const firstOrder = allOrders[0]; |
| 55 | +console.log(firstOrder.item.type); |
| 56 | + |
| 57 | +// 오브젝트를 얻기 위한 다른 방법은 |
| 58 | +// 오브젝트를 제거하기 위해 배열을 꺼내오는 것입니다. |
| 59 | +// 이렇게 하면 배열에서 오브젝트를 제거하고, 반환합니다. |
| 60 | +// 내부의 기존 데이터를 변경하므로 |
| 61 | +// 배열을 변형한다고 불립니다. |
| 62 | + |
| 63 | +const poppedFirstOrder = allOrders.pop(); |
| 64 | + |
| 65 | +// 이제 allOrders는 비어 있습니다. |
| 66 | +// 데이터를 변형하는 것은 여러모로 유용할 수 있습니다만, |
| 67 | +// 코드베이스의 복잡성을 줄이는 한 가지 방법은 변형을 방지하는 것입니다. |
| 68 | +// 대신에 TypeScript는 읽기 전용으로 배열을 선언하는 방법을 제공합니다: |
| 69 | + |
| 70 | +// 구매 주문 형태를 기반으로 하는 타입을 생성합니다: |
| 71 | +type PurchaseOrder = typeof purchaseOrder; |
| 72 | + |
| 73 | +// 구매 주문의 읽기 전용 배열을 생성합니다 |
| 74 | +const readonlyOrders: readonly PurchaseOrder[] = [purchaseOrder]; |
| 75 | + |
| 76 | +// 맞아요! 확실히 코드가 좀 많습니다. |
| 77 | +// 여기에 4가지 새로운 것이 있습니다: |
| 78 | +// |
| 79 | +// type PurchaseOrder - TypeScript에 새로운 타입을 선언합니다. |
| 80 | +// |
| 81 | +// typeof - 다음에 전달되는 상수 기반의 타입을 설정하기 위해 |
| 82 | +// 타입 추론 시스템을 사용합니다. |
| 83 | +// |
| 84 | +// purchaseOrder - 변수 purchaseOrder를 얻고 |
| 85 | +// 이것이 주문 배열에 있는 모든 오브젝트의 형태라고 |
| 86 | +// TypeScript에 알려줍니다. |
| 87 | +// |
| 88 | +// readonly - 이 오브젝트는 변형을 지원하지 않으며, |
| 89 | +// 한 번 생성되면 배열의 내용이 |
| 90 | +// 항상 동일하게 유지됩니다. |
| 91 | +// |
| 92 | +// 이제 readonlyOrders에서 pop을 시도하면, |
| 93 | +// TypeScript는 오류를 발생시킵니다. |
| 94 | + |
| 95 | +readonlyOrders.pop(); |
| 96 | + |
| 97 | +// 거의 모든 곳에서 readonly을 사용할 수 있으며, |
| 98 | +// 여기저기에 약간의 추가 문법이 있지만, |
| 99 | +// 많은 추가 안전성을 제공합니다. |
| 100 | + |
| 101 | +// readonly에 대해 더 많이 알아볼 수 있습니다: |
| 102 | +// - https://www.typescriptlang.org/docs/handbook/interfaces.html#readonly-properties |
| 103 | +// - https://basarat.gitbooks.io/typescript/content/docs/types/readonly.html |
| 104 | + |
| 105 | +// 그리고 함수 예시에서 |
| 106 | +// JavaScript와 TypeScript에 대해 계속 배울 수 있습니다: |
| 107 | +// example:functions |
| 108 | +// |
| 109 | +// 또는 불변성에 대해 더 알고 싶다면: |
| 110 | +// example:immutability |
0 commit comments