Skip to content

translation 4 files to Ko #1532

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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";
}
Original file line number Diff line number Diff line change
@@ -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'
97 changes: 97 additions & 0 deletions packages/tsconfig-reference/copy/ko/options/jsxImportSource.md
Original file line number Diff line number Diff line change
@@ -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`를 추가해야만, 모듈로 간주됩니다.
3 changes: 3 additions & 0 deletions packages/tsconfig-reference/copy/ko/sections/top_level.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
### 루트 필드(Root Fields)

TSConfig의 시작은 루트 옵션입니다 - 이러한 옵션은 TypeScript 또는 JavaScript 프로젝트 설정과 관련이 있습니다.