Skip to content

Commit 5c29974

Browse files
Merge pull request #69 from yahma25/Translation-to-ko-playground-Mixins
Translate 1 file to ko - Mixins
2 parents 87f82fd + 08afaf9 commit 5c29974

File tree

1 file changed

+118
-0
lines changed
  • docs/playground/ko/JavaScript/Working With Classes

1 file changed

+118
-0
lines changed
Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
//// { order: 4 }
2+
3+
// TypeScript가 지원하는 JavaScript에 있는 클래스를 위해
4+
// 가짜 다중 상속 패턴인 믹스인이 있습니다.
5+
// 다중 상속 패턴은 많은 클래스가 합쳐진
6+
// 하나의 클래스를 생성할 수 있게 해줍니다.
7+
8+
// 시작하기 위해, 다른 클래스로부터 확장하는 타입이 필요합니다.
9+
// 주요 책임은 전달받은 타입이
10+
// 하나의 클래스라고 선언하는 것입니다.
11+
12+
type Constructor = new (...args: any[]) => {};
13+
14+
// 그러고 나서 래핑하여 최종 클래스에 확장하는
15+
// 클래스 시리즈를 생성할 수 있습니다.
16+
// 비슷한 객체가 다른 능력을 갖출 때, 이 패턴은 잘 동작합니다.
17+
18+
// 믹스인은 캡슐화된 private 프로퍼티로 변경하기 위해
19+
// scale 프로퍼티를 getter와 setter를 함께 추가합니다:
20+
21+
function Scale<TBase extends Constructor>(Base: TBase) {
22+
return class extends Base {
23+
// 믹스인은 private/protected 프로퍼티를 선언할 수 없겠지만,
24+
// ES2020 private 필드를 사용할 수 있습니다
25+
_scale = 1;
26+
27+
setScale(scale: number) {
28+
this._scale = scale;
29+
}
30+
31+
get scale(): number {
32+
return this._scale;
33+
}
34+
};
35+
}
36+
37+
// 믹스인은 현대식 컴퓨터가 깊이를 만드는 데 사용하는
38+
// 알파 구성요소에 대한 추가 메서드를 추가합니다:
39+
40+
function Alpha<TBase extends Constructor>(Base: TBase) {
41+
return class extends Base {
42+
alpha = 1;
43+
44+
setHidden() {
45+
this.alpha = 0;
46+
}
47+
48+
setVisible() {
49+
this.alpha = 1;
50+
}
51+
52+
setAlpha(alpha: number) {
53+
this.alpha = alpha;
54+
}
55+
};
56+
}
57+
58+
// 확장될 간단한 스프라이트 기반 클래스:
59+
60+
class Sprite {
61+
name = "";
62+
x = 0;
63+
y = 0;
64+
65+
constructor(name: string) {
66+
this.name = name;
67+
}
68+
}
69+
70+
// 서로 다른 기능을 가진
71+
// 2개의 다른 스프라이트 타입을 만듭니다:
72+
73+
const ModernDisplaySprite = Alpha(Scale(Sprite));
74+
const EightBitSprite = Scale(Sprite);
75+
76+
// 이런 클래스의 인스턴스를 생성하는 것은
77+
// 믹스인 때문에 객체가 서로 다른
78+
// 프로퍼티와 메서드의 모음을 가진다는 것을 나타냅니다:
79+
80+
const flappySprite = new ModernDisplaySprite("Bird");
81+
flappySprite.x = 10;
82+
flappySprite.y = 20;
83+
flappySprite.setVisible();
84+
flappySprite.setScale(0.8);
85+
console.log(flappySprite.scale);
86+
87+
const gameBoySprite = new EightBitSprite("L block");
88+
gameBoySprite.setScale(0.3);
89+
90+
// EightBitSprite가 알파로 변경하기 위한
91+
// 믹스인이 없으니 실패합니다:
92+
gameBoySprite.setAlpha(0.5);
93+
94+
// 래핑한 클래스에 대해 더 많이 보장하길 원한다면,
95+
// 제네릭과 함께 생성자를 사용할 수 있습니다.
96+
97+
type GConstructor<T = {}> = new (...args: any[]) => T;
98+
99+
// 이제 이 믹스인이 기반 클래스가 특정한 형태일 때만
100+
// 적용할 수 있도록 선언할 수 있습니다.
101+
102+
type Moveable = GConstructor<{ setXYAcceleration: (x: number, y: number) => void }>;
103+
104+
// GConstructor에 대한 매개변수에 있는
105+
// 함수 존재 여부에 따라서 믹스인을 생성할 수 있습니다.
106+
107+
function Jumpable<TBase extends Moveable>(Base: TBase) {
108+
return class extends Base {
109+
jump() {
110+
// 이 믹스인은 이제 setXYAcceleration에 대하여 알고 있습니다
111+
this.setXYAcceleration(0, 20);
112+
}
113+
};
114+
}
115+
116+
// 믹스인 계층에 setXYAcceleration를 추가하는 클래스가
117+
// 존재할 때까지 이 스프라이트를 생성할 수 없습니다:
118+
const UserSprite = new Jumpable(ModernDisplaySprite);

0 commit comments

Comments
 (0)