jaewon-noh.github.io/classes.html at main · jaewon-noh/jaewon-noh.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>노재원의 블로그</title>
</head>
<body>
<h1>클래스</h1>
<h2>Before</h2>
	<pre>
// js 클래스에 대한 기본 지식은 있으니.. 접근 지정자 부터 시작.
// public, private, protected
const TestClass = class {
	// public이 기본값이면 입력을 따로 하지 않아도 된다.
	name: string // 아랫줄과 동일
	// public name: string
	constructor(naame: string) {
		this.name = naame;
	}
}
const TestClassInstance = new TestClass('naaame');

const TestClass2 = class {
	private name: string // ts의 방법
	// #name: string // tc39에서 논의중인(stage 3) private 표기 방법.

	constructor(naame: string) {
		this.name = naame;
		// this.#name = naame;
	}

	getName(): string {
		return this.name; // private 필드라 할지라도 클래스 자기 자신의 내부 멤버에서는 접근이 가능하다.
	}
}
const TestClass2Instance = new TestClass2('jaewon');

// const TestClass2InheritanceClass = class extends TestClass2 {
// 	constructor() {
// 		super('inherit');
// 	}
//
// 	getName(): string {
// 		return this.name; // private 필드라 해당 클래스 이외의 곳에서 접근 불가능.
// 	}
// }


const TestClass3 =  class {
	protected name: string

	constructor(naame: string) {
		this.name = naame;
	}

	getName(): string {
		return this.name;
	}
}

const TestClass3Instance = new TestClass3('jaewon');

const TestClass3InheritanceClass = class extends TestClass3 {
	constructor() {
		super('inherit');
	}

	getName(): string {
		return this.name; // protected 필드는 해당 클래스와, 상속받은 클래스에서 접근 가능
	}
}

const TestClass3InheritanceClassInstance = new TestClass3InheritanceClass();


const TestClass4 = class {
	readonly name: string

	constructor(naame: string) {
		this.name = naame;
	}

	// constructor(readonly name: string) {} // 위의 코드와 동일하게 name을 readonly로 선언하고 들어온 매개변수로 초기화 하는 작동을 한다.
}

const TestClass4Instance = new TestClass4('yedarm');
// TestClass4Instance.name = 'test'; // readonly에 변수 할당이 시도 되었음.

class TestClass5 {
	private name: string

	constructor(naame: string) {
		this.name = naame;
	}

	get getName(): string { // setter가 설정되지 않고 getter만 있다면 readonly로 추론된다.
		return this.name;
	}
}

const TestClass5Instance: TestClass5 = new TestClass5('yedarm'); // 클래스를 변수에 담지 않아야 타입 지정이 가능하다.

// static 변수나 함수는 넘어간다.

abstract class TestClass6 {
	abstract getName(): string // 반드시 구현 클래스에서 멤버 함수로써 구현 되어야 함.
}
// new TestClass6(); // 추상 클래스는 인스턴스화 할 수 없다.

// const TestClass6 = abstract class { // 이건 오류가 난다. abstract는 변수에 할당할 수 없는 모양.
// 	abstract getName(): string
// }


const TestClass7 = class extends TestClass6 {
	name: string
	constructor() {
		super();
		this.name = 'yd';
	}

	getName(): string {
		return this.name;
	}

	// getName2(): string { // 추상 클래스에 선언되지 않은 함수.
	// 	return this.name;
	// }
}

const TestClass7Instance: TestClass6 = new TestClass7();

class TestClass8 {
	static staticMemberTest: string = 'jaewon';
	test(): string {
		return TestClass8.staticMemberTest;
	}
}

const TestClass8Instance: TestClass8 = new TestClass8();
console.info(TestClass8Instance.test()); // 이 시점에서는 jaewon
const TestClass8InstanceMaker = TestClass8; // 아래와 같다.
// const TestClass8InstanceMaker: typeof TestClass8 = TestClass8;
TestClass8InstanceMaker.staticMemberTest = 'yedarm'; // 이 시점 이후로 TestClass8.staticMemberTest 의 value는 yedarm;
const TestClass8Instance1 = new TestClass8InstanceMaker();
const TestClass8Instance2: TestClass8 = new TestClass8();

// 타입, 인터페이스로서의 클래스는 이미 보았기 때문에 건너 뜀.

TestClassInstance.name // naame
// test1: TestClass2Instance.name // private이라 외부에서 접근할 수 없다.
TestClass2Instance.getName(); // jaewon
TestClass3Instance.getName(); // jaewon
TestClass3InheritanceClassInstance.getName(); // inherit
TestClass4Instance.name; // yedarm
TestClass5Instance.getName; // yedarm
TestClass7Instance.getName(); // yd
TestClass8Instance.test(); // yedarm 함수가 불리우는 시점이 static 변수가 바뀐 이후라는 것을 주의해야 함.
TestClass8Instance1.test(); // yedarm
TestClass8Instance2.test(); // yedarm
	</pre>
<h2>After</h2>
	<pre>
const TestClass = class {
		constructor(naame) {
				this.name = naame;
		}
};

const TestClassInstance = new TestClass('naaame');

const TestClass2 = class {
		constructor(naame) {
				this.name = naame;
		}
		getName() {
				return this.name;
		}
};

const TestClass2Instance = new TestClass2('jaewon');

const TestClass3 = class {
		constructor(naame) {
				this.name = naame;
		}
		getName() {
				return this.name;
		}
};
const TestClass3Instance = new TestClass3('jaewon');

const TestClass3InheritanceClass = class extends TestClass3 {
		constructor() {
				super('inherit');
		}
		getName() {
				return this.name; // protected 필드는 해당 클래스와, 상속받은 클래스에서 접근 가능
		}
};

const TestClass3InheritanceClassInstance = new TestClass3InheritanceClass();

const TestClass4 = class {
		constructor(naame) {
				this.name = naame;
		}
};

const TestClass4Instance = new TestClass4('yedarm');

class TestClass5 {
		constructor(naame) {
				this.name = naame;
		}
		get getName() {
				return this.name;
		}
}

const TestClass5Instance = new TestClass5('yedarm');

class TestClass6 { // 추상 클래스가 텅텅 비었다.
}

const TestClass7 = class extends TestClass6 {
		constructor() {
				super();
				this.name = 'yd';
		}
		getName() {
				return this.name;
		}
};

const TestClass7Instance = new TestClass7();

class TestClass8 {
		test() {
				return TestClass8.staticMemberTest;
		}
}

TestClassInstance.name // naame
// test1: TestClass2Instance.name // private이라 외부에서 접근할 수 없다.
TestClass2Instance.getName(); // jaewon
TestClass3Instance.getName(); // jaewon
TestClass3InheritanceClassInstance.getName(); // inherit
TestClass4Instance.name; // yedarm
TestClass5Instance.getName; // yedarm
TestClass7Instance.getName(); // yd
TestClass8Instance.test(); // yedarm 함수가 불리우는 시점이 static 변수가 바뀐 이후라는 것을 주의해야 함.
TestClass8Instance1.test(); // yedarm
TestClass8Instance2.test(); // yedarm
	</pre>
	<p>접근 제어자는 transpile과정에서 소모되고 js에선 사라진다.</p>
	<p>추상 클래스의 경우 빈 클래스만 남아있는 것이 확인된다. 실제로 상속을 받아야 하기 때문</p>
</body>
</html>