Translation 2 files to Ko

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

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

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 <a href='https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/'>Release notes</a>."
+ "subtitle": "<a href='https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/'>릴리즈 노트</a>를 확인해보세요."
  },
  {
  "name": "3.8",
  "id": "3.8",
- "subtitle": "See the <a href='https://devblogs.microsoft.com/typescript/announcing-typescript-3-8/'>Release notes</a>."
+ "subtitle": "<a href='https://devblogs.microsoft.com/typescript/announcing-typescript-3-8/'>릴리즈 노트</a>를 확인해보세요."
  },
  {
  "name": "4.0",
  "id": "4.0",
- "subtitle": "See the <a href='https://devblogs.microsoft.com/typescript/announcing-typescript-4-0-beta/'>Release notes</a>."
+ "subtitle": "<a href='https://devblogs.microsoft.com/typescript/announcing-typescript-4-0-beta/'>릴리즈 노트</a>를 확인해보세요."
  },
  {
  "name": "Playground V3",
  "id": "Playground",
- "subtitle": "Learn what has changed in this website."
+ "subtitle": "이 웹사이트에서 변경된 사항을 확인해보세요."
  }
  ],
  "sortedSubSections": [
@@ -59,4 +60,4 @@
  "New TS Features",
  "New Checks"
  ]
-}
+}