Skip to content

Commit 4b695cb

Browse files
Merge pull request #117 from yahma25/Translation-to-ko-playground-Structural-Typing
Co-authored-by: bumkeyy <[email protected]>
2 parents 08fa0b2 + dabe2d2 commit 4b695cb

File tree

1 file changed

+85
-0
lines changed

1 file changed

+85
-0
lines changed
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
// TypeScript는 구조적 타입 시스템입니다.
2+
// 구조적 타입 시스템은 타입을 비교할 때,
3+
// TypeScript는 타입의 멤버만 고려한다는 것을 의미합니다.
4+
5+
// 두 가지 타입을 만들 수 있지만,
6+
// 서로 할당할 수 없는 명목적 타입 시스템과는 대조적입니다.
7+
// example:nominal-typing 를 참고하세요.
8+
9+
// 예를 들어, 구조적 타입 시스템에서
10+
// 이러한 두 가지 인터페이스는 서로 양도할 수 있습니다.
11+
12+
interface Ball {
13+
diameter: number;
14+
}
15+
interface Sphere {
16+
diameter: number;
17+
}
18+
19+
let ball: Ball = { diameter: 10 };
20+
let sphere: Sphere = { diameter: 20 };
21+
22+
sphere = ball;
23+
ball = sphere;
24+
25+
// Ball과 Sphere의 모든 멤버를
26+
// 구조적으로 포함하는 타입을 추가하면,
27+
// ball이나 sphere가 되도록 설정할 수도 있습니다.
28+
29+
interface Tube {
30+
diameter: number;
31+
length: number;
32+
}
33+
34+
let tube: Tube = { diameter: 12, length: 3 };
35+
36+
tube = ball;
37+
ball = tube;
38+
39+
// ball은 length를 갖고 있지 않아서, tube 변수에 할당할 수 없습니다.
40+
// 하지만, Ball의 모든 멤버는
41+
// tube 내부에 속하니 할당할 수 있습니다.
42+
43+
// TypeScript는 타입의 각 멤버를
44+
// 서로 비교하여 동등한지 확인합니다.
45+
46+
// 함수는 JavaScript에서 객체이며
47+
// 비슷한 방식으로 비교합니다.
48+
// 매개변수에 유용한 추가 트릭이 하나 있습니다:
49+
50+
let createBall = (diameter: number) => ({ diameter });
51+
let createSphere = (diameter: number, useInches: boolean) => {
52+
return { diameter: useInches ? diameter * 0.39 : diameter };
53+
};
54+
55+
createSphere = createBall;
56+
createBall = createSphere;
57+
58+
// TypeScript는 매개변수의 (숫자)는 (숫자, 불린)과 같다고 하지만,
59+
// (숫자, 불린)은 (숫자)와 같다고 하지 않습니다
60+
61+
// JavaScript 코드가 필요 없어 졌을 때
62+
// 매개변수 전달을 생략하는 게 아주 흔한 일이라서
63+
// TypeScript는 첫 번째 할당에 있는 불린을 버립니다.
64+
65+
// 예를 들어 배열의 forEach의 콜백은 세 가지 매개변수를 갖고 있는데
66+
// 값, 인덱스, 전체 배열입니다.
67+
// TypeScript가 매개변수 버리기를 제공하지 않았다면,
68+
// 함수와 일치시키기 위해 모든 선택 사항을 포함했어야 합니다:
69+
70+
[createBall(1), createBall(2)].forEach((ball, _index, _balls) => {
71+
console.log(ball);
72+
});
73+
74+
// 아무도 필요로 하지 않습니다.
75+
76+
// 반환 타입은 객체처럼 간주하고,
77+
// 일부 차이점은 위의 같은 객체 비교 규칙으로 비교합니다.
78+
79+
let createRedBall = (diameter: number) => ({ diameter, color: "red" });
80+
81+
createBall = createRedBall;
82+
createRedBall = createBall;
83+
84+
// 첫 번째 할당은 동작하지만 (둘 다 diameter가 있음),
85+
// 두 번째는 동작하지 않습니다. (ball은 color가 없음)

0 commit comments

Comments
 (0)