diff --git a/packages/playground-examples/copy/ko/TypeScript/Language Extensions/Enums.ts b/packages/playground-examples/copy/ko/TypeScript/Language Extensions/Enums.ts new file mode 100644 index 000000000000..3a944e153a0e --- /dev/null +++ b/packages/playground-examples/copy/ko/TypeScript/Language Extensions/Enums.ts @@ -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 diff --git a/packages/playground-examples/copy/ko/TypeScript/Language Extensions/Types vs Interfaces.ts b/packages/playground-examples/copy/ko/TypeScript/Language Extensions/Types vs Interfaces.ts new file mode 100644 index 000000000000..8e2107372946 --- /dev/null +++ b/packages/playground-examples/copy/ko/TypeScript/Language Extensions/Types vs Interfaces.ts @@ -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 diff --git a/packages/playground-examples/copy/ko/sections.json b/packages/playground-examples/copy/ko/sections.json index 92782dc30c95..0c72f3f7bef0 100644 --- a/packages/playground-examples/copy/ko/sections.json +++ b/packages/playground-examples/copy/ko/sections.json @@ -1,33 +1,34 @@ { - "sections": [{ + "sections": [ + { "name": "JavaScript", "id": "JavaScript", - "subtitle": "See how TypeScript improves day to day working with JavaScript with minimal additional syntax." + "subtitle": "TypeScript가 최소한의 추가 구문으로 JavaScript 작업을 어떻게 개선하는지 확인해보세요." }, { "name": "TypeScript", "id": "TypeScript", - "subtitle": "Explore how TypeScript extends JavaScript to add more safety and tooling." + "subtitle": "TypeScript가 JavaScript를 확장하여 안전성과 도구를 추가하는 방법을 살펴보세요." }, { "name": "3.7", "id": "3.7", - "subtitle": "See the Release notes." + "subtitle": "릴리즈 노트를 확인해보세요." }, { "name": "3.8", "id": "3.8", - "subtitle": "See the Release notes." + "subtitle": "릴리즈 노트를 확인해보세요." }, { "name": "4.0", "id": "4.0", - "subtitle": "See the Release notes." + "subtitle": "릴리즈 노트를 확인해보세요." }, { "name": "Playground V3", "id": "Playground", - "subtitle": "Learn what has changed in this website." + "subtitle": "이 웹사이트에서 변경된 사항을 확인해보세요." } ], "sortedSubSections": [ @@ -59,4 +60,4 @@ "New TS Features", "New Checks" ] -} \ No newline at end of file +}