-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
183 additions
and
18 deletions.
There are no files selected for viewing
81 changes: 81 additions & 0 deletions
81
packages/playground-examples/copy/ko/TypeScript/Language Extensions/Enums.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| // 열거형은 TypeScript로 쓰는 JavaScript에 추가된 기능입니다. | ||
| // 이를 통해 이름 붙은 변수들의 집합을 쉽게 다룰 수 있습니다. | ||
|
|
||
| // 기본적으로 열거형은 0부터 시작하는 숫자 기반이며, | ||
| // 각 항목은 1씩 증가하여 할당됩니다. | ||
| // 이는 값이 중요하지 않을 때 유용합니다. | ||
|
|
||
| enum CompassDirection { | ||
| North, | ||
| East, | ||
| South, | ||
| West, | ||
| } | ||
|
|
||
| // 열거 항목을 표기하여 값을 지정할 수 있으며, | ||
| // 그 값에서부터 증가가 시작됩니다: | ||
|
|
||
| enum StatusCodes { | ||
| OK = 200, | ||
| BadRequest = 400, | ||
| Unauthorized, | ||
| PaymentRequired, | ||
| Forbidden, | ||
| NotFound, | ||
| } | ||
|
|
||
| // EnumName.Value을 사용하여 열거형을 참조할 수 있습니다. | ||
|
|
||
| const startingDirection = CompassDirection.East; | ||
| const currentStatus = StatusCodes.OK; | ||
|
|
||
| // 열거형을 사용하여 key에서 value, 그리고 value에서 key 모든 방향으로 | ||
| // 데이터에 접근할 수 있습니다. | ||
|
|
||
| const okNumber = StatusCodes.OK; | ||
| const okNumberIndex = StatusCodes["OK"]; | ||
| const stringBadRequest = StatusCodes[400]; | ||
|
|
||
| // 열거형은 여러 타입일 수 있지만, 일반적으로 string 타입입니다. | ||
| // string을 사용하면 디버깅이 쉬워지는데, | ||
| // 런타임에서의 값을 통해 숫자를 찾아볼 필요가 없어지기 때문입니다. | ||
|
|
||
| enum GamePadInput { | ||
| Up = "UP", | ||
| Down = "DOWN", | ||
| Left = "LEFT", | ||
| Right = "RIGHT", | ||
| } | ||
|
|
||
| // 만약 JavaScript 런타임에서 사용되는 객체의 수를 줄이고 싶다면, | ||
| // const enum을 쓸 수 있습니다. | ||
|
|
||
| // const enum의 값은 | ||
| // 런타임에서 객체를 통해 찾아지는 대신 | ||
| // 코드를 트랜스파일하는 과정에서 대체됩니다. | ||
|
|
||
| const enum MouseAction { | ||
| MouseDown, | ||
| MouseUpOutside, | ||
| MouseUpInside, | ||
| } | ||
|
|
||
| const handleMouseAction = (action: MouseAction) => { | ||
| switch (action) { | ||
| case MouseAction.MouseDown: | ||
| console.log("Mouse Down"); | ||
| break; | ||
| } | ||
| }; | ||
|
|
||
| // 트랜스파일된 JavaScript 코드를 보면, | ||
| // 다른 열거형들이 객체나 함수 형태로 존재하는 것을 볼 수 있지만, | ||
| // MouseAction은 그렇지 않습니다. | ||
|
|
||
| // 이는 handleMouseAction 안의 switch문에 있는 | ||
| // MouseAction.MouseDown의 경우에도 마찬가지입니다. | ||
|
|
||
| // 열거형에는 이것보다 더 많은 기능이 있습니다. | ||
| // TypeScript 핸드북에서 더 알아볼 수 있습니다. | ||
| // | ||
| // https://www.typescriptlang.org/docs/handbook/enums.html |
83 changes: 83 additions & 0 deletions
83
packages/playground-examples/copy/ko/TypeScript/Language Extensions/Types vs Interfaces.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| // 객체 형태를 선언하는 주요 도구는 두 가지가 있습니다. | ||
| // 인터페이스와 타입 별칭입니다. | ||
| // | ||
| // 이 둘은 무척 비슷하며, | ||
| // 대부분 동일하게 작동합니다. | ||
|
|
||
| type BirdType = { | ||
| wings: 2; | ||
| }; | ||
|
|
||
| interface BirdInterface { | ||
| wings: 2; | ||
| } | ||
|
|
||
| const bird1: BirdType = { wings: 2 }; | ||
| const bird2: BirdInterface = { wings: 2 }; | ||
|
|
||
| // TypeScript는 구조적 타입 시스템을 따르기 때문에, | ||
| // 교차하여 사용하는 것도 가능합니다. | ||
|
|
||
| const bird3: BirdInterface = bird1; | ||
|
|
||
| // 둘 다 다른 인터페이스와 타입으로의 확장이 가능합니다. | ||
| // 타입 별칭은 교차 타입을 통해 이를 수행하는 반면, | ||
| // 인터페이스는 키워드를 사용합니다. | ||
|
|
||
| type Owl = { nocturnal: true } & BirdType; | ||
| type Robin = { nocturnal: false } & BirdInterface; | ||
|
|
||
| interface Peacock extends BirdType { | ||
| colourful: true; | ||
| flies: false; | ||
| } | ||
| interface Chicken extends BirdInterface { | ||
| colourful: false; | ||
| flies: false; | ||
| } | ||
|
|
||
| let owl: Owl = { wings: 2, nocturnal: true }; | ||
| let chicken: Chicken = { wings: 2, colourful: false, flies: false }; | ||
|
|
||
| // 그래도 타입 별칭보다 인터페이스를 쓰는 것을 추천합니다. | ||
| // 분명히 더 나은 에러 메시지를 받을 수 있기 때문입니다. | ||
| // 뒤따르는 에러에 커서를 가져가면, | ||
| // Chicken과 같은 인터페이스를 사용했을 때 | ||
| // TypeScript가 더 간결하고 정확한 메시지를 어떻게 제공하는지 알 수 있습니다. | ||
|
|
||
| owl = chicken; | ||
| chicken = owl; | ||
|
|
||
| // 타입 별칭과 인터페이스 사이 한 가지 주요한 차이점은 | ||
| // 인터페이스는 열려 있고 타입 별칭은 닫혀 있다는 것입니다. | ||
| // 이는 인터페이스를 다음에 선언할 때 | ||
| // 확장할 수 있음을 의미합니다. | ||
|
|
||
| interface Kitten { | ||
| purrs: boolean; | ||
| } | ||
|
|
||
| interface Kitten { | ||
| colour: string; | ||
| } | ||
|
|
||
| // 이와 달리 타입은 선언 바깥에서 | ||
| // 변경할 수 없습니다. | ||
|
|
||
| type Puppy = { | ||
| color: string; | ||
| }; | ||
|
|
||
| type Puppy = { | ||
| toys: number; | ||
| }; | ||
|
|
||
| // 목적에 따라서, 이 차이는 좋을 수도 나쁠 수도 있습니다. | ||
| // 하지만 공개된 타입들의 경우, | ||
| // 그것들을 인터페이스로 만드는 것이 더 좋습니다. | ||
|
|
||
| // 타입과 인터페이스에 대한 모든 엣지 케이스를 알고 싶다면, | ||
| // 아래 stack overflow thread가 | ||
| // 시작하기 좋은 훌륭한 자료가 될 것입니다. | ||
|
|
||
| // https://stackoverflow.com/questions/37233735/typescript-interfaces-vs-types/52682220#52682220 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters