Skip to content

ts-for-js-programmers.md 나머지 부분 번역 #179

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Sep 7, 2020
Merged

ts-for-js-programmers.md 나머지 부분 번역 #179

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
83a45a9
나머지 부분 번역 #112
Sep 3, 2020
ebb00f3
리뷰 내용에 맞추어서 수정 #112
Sep 5, 2020
0627979
리뷰 내용에 맞추어서 재 수정 #112
Sep 7, 2020
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
81 changes: 40 additions & 41 deletions pages/tutorials/ts-for-js-programmers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,38 +123,38 @@ JavaScript에서 사용할 수 있는 적은 종류의 원시 타입이 이미

타입을 구축하기 위한 두 가지 구문이 있다는 것을 꽤 빠르게 알 수 있을 것입니다.: [Interfaces and Types](/play/?e=83#example/types-vs-interfaces) - `interface`를 우선적으로 사용하고 특정 기능이 필요할 때 `type`을 사용해야 합니다.

## Composing Types
## 타입 구성 (Composing Types)

Similar to how you would create larger complex objects by composing them together TypeScript has tools for doing this with types.
The two most popular techniques you would use in everyday code to create new types by working with many smaller types are Unions and Generics.
객체들을 조합하여 더 크고 복잡한 객체를 만드는 방법과 유사하게 TypeScript에 타입으로 이를 수행하는 도구가 있습니다.
여러가지 타입을 이용하여 새 타입을 작성하기 위해 일상적인 코드에서 가장 많이 사용되는 두 가지 코드로는 유니언(Union)과 제네릭(Generic)이 있습니다.

### Unions
### 유니언 (Unions)

A union is a way to declare that a type could be one of many types. For example, you could describe a `boolean` type as being either `true` or `false`:
유니언은 타입이 여러 타입 중 하나일 수 있음을 선언하는 방법입니다. 예를 들어, `boolean` 타입을 `true` 또는 `false`로 설명할 수 있습니다:

```ts twoslash
```
type MyBool = true | false;
```

_Note:_ If you hover over `MyBool` above, you'll see that it is classed as `boolean` - that's a property of the Structural Type System, which we'll get to later.
_참고:_ `MyBool`위에 마우스를 올린다면, `boolean`으로 분류된 것을 볼 수 있습니다 - 구조적 타입 시스템의 프로퍼티며, 나중에 살펴보겠습니다.

One of the most popular use-cases for union types is to describe a set of `string`s or `number`s [literal](/docs/handbook/literal-types.html) which a value is allowed to be:
유니언 타입이 가장 많이 사용된 사례 중 하나는 값이 다음과 같이 허용되는 `string` 또는 `number`의 [리터럴](/docs/handbook/literal-types.html)집합을 설명하는 것입니다:

```ts twoslash
```
type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;
```

Unions provide a way to handle different types too, for example you may have a function which accepts an `array` or a `string`.
유니언은 다양한 타입을 처리하는 방법을 제공하는데, 예를 들어 `array` 또는 `string`을 받는 함수가 있을 수 있습니다.

```ts twoslash
```
function getLength(obj: string | string[]) {
return obj.length;
}
```

TypeScript understands how code changes what the variable could be with time, you can use these checks to narrow the type down.
TypeScript는 코드가 시간에 따라 변수가 변경되는 방식을 이해하며, 이러한 검사를 사용해 타입을 골라낼 수 있습니다.

| Type | Predicate |
| --------- | ---------------------------------- |
Expand All @@ -165,10 +165,10 @@ TypeScript understands how code changes what the variable could be with time, yo
| function | `typeof f === "function"` |
| array | `Array.isArray(a)` |

For example, you could differentiate between a `string` and an `array`, using `typeof obj === "string"` and TypeScript will know what the object is down different code paths.
예를 들어, `typeof obj === "string"`을 이용하여 `string`과 `array`를 구분할 수 있으며 TypeScript는 객체가 다른 코드 경로에 있음을 알게 됩니다.

<!-- prettier-ignore -->
```ts twoslash
```
function wrapInArray(obj: string | string[]) {
if (typeof obj === "string") {
return [obj];
Expand All @@ -179,46 +179,45 @@ function wrapInArray(obj: string | string[]) {
}
```

### Generics
### 제네릭 (Generics)

You can get very deep into the TypeScript generic system, but at a 1 minute high-level explanation, generics are a way to provide variables to types.
TypeScript 제네릭 시스템에 대해 자세히 알아볼 수 있지만, 1분 정도의 수준 높은 설명을 하기 위해, 제네릭은 타입에 변수를 제공하는 방법입니다.

A common example is an array, an array without generics could contain anything. An array with generics can describe what values are inside in the array.
배열이 일반적인 예시이며, 제네릭이 없는 배열은 어떤 것이든 포함할 수 있습니다. 제네릭이 있는 배열은 배열 안의 값을 설명할 수 있습니다.

```ts
type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;
```

You can declare your own types which use generics:
제네릭을 사용하는 고유 타입을 선언할 수 있습니다:

```ts twoslash
```
// @errors: 2345
interface Backpack<Type> {
add: (obj: Type) => void;
get: () => Type;
}

// This line is a shortcut to tell TypeScript there is a
// constant called `backpack`, and to not worry about where it came from
declare const backpack: Backpack<string>;
// 이 줄은 TypeScript에 `backpack`이라는 상수가 있음을 알리는 지름길이며
// const backpakc: Backpack<string>이 어디서 왔는지 걱정할 필요가 없습니다.

// object is a string, because we declared it above as the variable part of Backpack
// 위에서 Backpack의 변수 부분으로 선언해서, object는 string입니다.
const object = backpack.get();

// Due to backpack variable being a string, you cannot pass a number to the add function
// backpack 변수가 string이므로, add 함수에 number를 전달할 수 없습니다.
backpack.add(23);
```

## Structural Type System
## 구조적 타입 시스템 (Structural Type System)

One of TypeScript's core principles is that type checking focuses on the _shape_ which values have.
This is sometimes called "duck typing" or "structural typing".
TypeScript의 핵심 원칙 중 하나는 타입 검사가 값이 있는 _형태_에 집중한다는 것입니다.
이는 때때로 "덕 타이핑(duck typing)" 또는 "구조적 타이핑" 이라고 불립니다.

In a structural type system if two objects have the same shape, they are considered the same.
구조적 타입 시스템에서 두 객체가 같은 형태를 가지면 같은 것으로 간주됩니다.

```ts twoslash
```
interface Point {
x: number;
y: number;
Expand All @@ -228,17 +227,17 @@ function printPoint(p: Point) {
console.log(`${p.x}, ${p.y}`);
}

// prints "12, 26"
// "12, 26"를 출력합니다
const point = { x: 12, y: 26 };
printPoint(point);
```

The `point` variable is never declared to be a `Point` type, but TypeScript compares the shape of `point` to the shape of `Point` in the type-check.
Because they both have the same shape, then it passes.
`point`변수는 `Point`타입으로 선언된 적이 없지만, TypeScript는 타입 검사에서 `point`의 형태와 `Point`의 형태를 비교합니다.
둘 다 같은 형태이기 때문에, 통과합니다.

The shape matching only requires a subset of the object's fields to match.
형태 일치에는 일치시킬 객체의 필드의 하위 집합만 필요합니다.

```ts twoslash
```
// @errors: 2345
interface Point {
x: number;
Expand All @@ -260,9 +259,9 @@ const color = { hex: "#187ABF" };
printPoint(color);
```

Finally, to really nail this point down, structurally there is no difference between how classes and objects conform to shapes:
마지막으로, 정확하게 마무리 짓기 위해, 구조적으로 클래스와 객체가 형태를 따르는 방법에는 차이가 없습니다:

```ts twoslash
```
// @errors: 2345
interface Point {
x: number;
Expand All @@ -287,11 +286,11 @@ const newVPoint = new VirtualPoint(13, 56);
printPoint(newVPoint); // prints "13, 56"
```

If the object or class has all the required properties, then TypeScript will say they match regardless of the implementation details.
객체 또는 클래스에 필요한 모든 속성이 존재한다면, TypeScript는 구현 세부 정보에 관계없이 일치하게 봅니다.

## Next Steps
## 다음 단계 (Next Steps)

This doc is a high level 5 minute overview of the sort of syntax and tools you would use in everyday code. From here you should:
해당 문서는 일상적인 코드에서 사용하는 구문 및 도구의 종류에 대한 수준 높은 5분 개요입니다. 여기에서:

* Read the full Handbook [from start to finish](/docs/handbook/intro.html) (30m)
* Explore the [Playground examples](/play#show-examples).
* 전체 핸드북을 [처음부터 끝까지](/docs/handbook/intro.html) 읽으세요(30분)
* [Playground 예시](/play#show-examples)를 탐색하세요.