translation 4 files

Author: paigekim29

docs/playground/ko/3-7/Fixits/Infer From Usage Changes.ts

@@ -0,0 +1,37 @@
+//// { compiler: {  noImplicitAny: false }, order: 2 }
+
+// TypeScript 3.7 버전에 있는 '사용 빈도 수에 따른(infer from usage)' 코드 수정은 
+// 더욱 똑똑해졌습니다. 이제부터는 알려진 중요한 
+// 타입(문자열, 숫자, 배열, 프로미스)의 리스트로 사용되며, 
+// 이러한 객체의 API와 일치하는 타입의 사용에 따라
+// 유추합니다. 
+
+// 다음과 같은 예시에서, 함수의 매개변수를 선택하고
+// 전구를 클릭하여, "Infer Parameter types..."를 
+// 선택합니다.
+
+// 숫자 배열을 유추합니다:
+
+function pushNumber(arr) {
+  arr.push(12);
+}
+
+// 프로미스를 유추합니다:
+
+function awaitPromise(promise) {
+  promise.then((value) => console.log(value));
+}
+
+// 함수를 유추하고, 다음은 반환 타입입니다:
+
+function inferAny(app) {
+  const result = app.use("hi");
+  return result;
+}
+
+// 문자열이 추가 되었음으로, 
+// 문자열 배열로 유추합니다:
+
+function insertString(names) {
+  names[1] = "hello";
+}

docs/playground/ko/3-7/Syntax and Messaging/Flattened Error Reporting.ts

@@ -0,0 +1,63 @@
+//// { compiler: {  }, order: 3 }
+
+// TypeScript의 오류 메시지는 가끔 필요 이상으로 상세할 수 있습니다...
+// 3.7 버전에서, 몇 가지 터무니없는 사례를 보실 수 있습니다.
+
+// 중첩 속성
+
+let a = { b: { c: { d: { e: "string" } } } };
+let b = { b: { c: { d: { e: 12 } } } };
+
+a = b;
+
+// 이전에는, 중첩 된 속성 당 두 줄의 코드였기에,
+// 오류 메시지의 첫 번째와 마지막 줄을 읽음으로서
+// 빠르게 오류 메시지를 읽는 방법을 배웠습니다. 
+
+// 이제는 인라인입니다:
+
+// 3.6 버전에서는 다음과 같습니다:
+//
+// Type '{ b: { c: { d: { e: number; }; }; }; }' is not assignable to type '{ b: { c: { d: { e: string; }; }; }; }'.
+//   Types of property 'b' are incompatible.
+//     Type '{ c: { d: { e: number; }; }; }' is not assignable to type '{ c: { d: { e: string; }; }; }'.
+//       Types of property 'c' are incompatible.
+//         Type '{ d: { e: number; }; }' is not assignable to type '{ d: { e: string; }; }'.
+//           Types of property 'd' are incompatible.
+//             Type '{ e: number; }' is not assignable to type '{ e: string; }'.
+//               Types of property 'e' are incompatible.
+//                 Type 'number' is not assignable to type 'string'
+
+// 유용하고 간결한 오류 메시지를 제공하여,
+// 객체의 여러 타입을 통해 작업을 처리할 수 있습니다.
+
+class ExampleClass {
+  state = "ok";
+}
+
+class OtherClass {
+  state = 12;
+}
+
+let x = { a: { b: { c: { d: { e: { f: ExampleClass } } } } } };
+let y = { a: { b: { c: { d: { e: { f: OtherClass } } } } } };
+x = y;
+
+// 3.6 버전에서는 다음과 같습니다:
+//
+// Type '{ a: { b: { c: { d: { e: { f: typeof OtherClass; }; }; }; }; }; }' is not assignable to type '{ a: { b: { c: { d: { e: { f: typeof ExampleClass; }; }; }; }; }; }'.
+//   Types of property 'a' are incompatible.
+//     Type '{ b: { c: { d: { e: { f: typeof OtherClass; }; }; }; }; }' is not assignable to type '{ b: { c: { d: { e: { f: typeof ExampleClass; }; }; }; }; }'.
+//       Types of property 'b' are incompatible.
+//         Type '{ c: { d: { e: { f: typeof OtherClass; }; }; }; }' is not assignable to type '{ c: { d: { e: { f: typeof ExampleClass; }; }; }; }'.
+//           Types of property 'c' are incompatible.
+//             Type '{ d: { e: { f: typeof OtherClass; }; }; }' is not assignable to type '{ d: { e: { f: typeof ExampleClass; }; }; }'.
+//               Types of property 'd' are incompatible.
+//                 Type '{ e: { f: typeof OtherClass; }; }' is not assignable to type '{ e: { f: typeof ExampleClass; }; }'.
+//                   Types of property 'e' are incompatible.
+//                     Type '{ f: typeof OtherClass; }' is not assignable to type '{ f: typeof ExampleClass; }'.
+//                       Types of property 'f' are incompatible.
+//                         Type 'typeof OtherClass' is not assignable to type 'typeof ExampleClass'.
+//                           Type 'OtherClass' is not assignable to type 'ExampleClass'.
+//                             Types of property 'state' are incompatible.
+//                               Type 'number' is not assignable to type 'string'

docs/tsconfig/ko/options/jsxImportSource.md

@@ -0,0 +1,97 @@
+---
+display: "jsxImportSource"
+oneline: "Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.`"
+---
+
+Typescript 4.1 버전에 소개 된 [jsx](#jsx)를 `"react-jsx"` 또는 `"react-jsxdev"`로 
+사용 할 때, `jsx` 와 `jsxs` 내장 함수를 import하여 사용하는 
+모듈 지정자(module specifier)를 선언합니다. 
+
+[React 17](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)에서, 라이브러리는 독립 된 import를 통하여 새로운 형태의 JSX 변환을 지원해줍니다.
+
+예를 들어: 
+
+```tsx
+import React from "react";
+
+function App() {
+  return <h1>Hello World</h1>;
+}
+```
+
+TSConfig 사용할 때:
+
+```json tsconfig
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "jsx": "react-jsx"
+  }
+}
+```
+
+TypeScript에서 컴파일 된 JavaScript는:
+
+```tsx twoslash
+// @showEmit
+// @noErrors
+// @jsx: react-jsx
+// @module: commonjs
+// @target: esnext
+declare module JSX {
+  interface Element {}
+  interface IntrinsicElements {
+    [s: string]: any;
+  }
+}
+import React from "react";
+
+function App() {
+  return <h1>Hello World</h1>;
+}
+```
+
+예를 들어, `"jsxImportSource": "preact"`를 사용하고 싶으시면, 다음과 같은 tsconfig를 이용하시면 됩니다:
+
+```json tsconfig
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "types": ["preact"]
+  }
+}
+```
+
+다음과 같은 코드를 생성합니다:
+
+```tsx twoslash
+// @showEmit
+// @jsxImportSource: preact
+// @types: preact
+// @jsx: react-jsx
+// @target: esnext
+// @module: commonjs
+// @noErrors
+
+export function App() {
+  return <h1>Hello World</h1>;
+}
+```
+
+또는, 파일 별 프래그마(per-file pragma)를 이용하여 다음과 같은 옵션을 설정할 수 있습니다:
+
+```tsx
+/** @jsxImportSource preact */
+
+export function App() {
+  return <h1>Hello World</h1>;
+}
+```
+
+`_jsx`팩토리를 위한 import로서 `preact/jsx-runtime`를 추가합니다.
+
+_노트:_ 의도한 대로 작동이 되려면, `tsx`파일은 `export` 또는 `import`를 추가해야만, 모듈로 간주됩니다.

docs/tsconfig/ko/sections/top_level.md

@@ -0,0 +1,3 @@
+### 루트 필드(Root Fields)
+
+TSConfig의 시작은 루트 옵션입니다 - 이러한 옵션은 TypeScript 또는 JavaScript 프로젝트 설정과 관련이 있습니다.