TypeScript Tutorial 1. class in typescript

1. [TS] 2. Class in TypeScript
by. Jbee

2. TypeScript에서의클래스(class)에대해다뤄보겠습니다.

3. Table of contents
Constructor
extend를통한상속
Access Modifier
public
private
protected
readonly
static

4. 자바스크립트개발자라고 하더라도ES6덕분에우리는클래스에이미많이익
숙해져있습니다. 그러나ES6의클래스는뭔가가 조금 아쉬웠는데요, 이부분
을TypeScript가 채워줄예정입니다. 일단ES6에서클래스를살펴봅니다.

5. ES6 code
class Person {
constructor(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
get fullName() {
return `${this._firstName} ${this._lastName}`;
}
}
const p1: Person = new Person("Jbee", "Han");
console.log(p1.fullName); // Jbee Han
익숙한클래스의형태라고 생각합니다. 익숙하지않으시다면ES6 Class에대
한포스팅을참고해주세요. TypeScript에서의클래스에는ES6 코드와비교
해봤을때, 이것 저것 키워드가 많이추가가 됬는데요, 하나씩알아보기로합시
다.

6. 1. Constructor
class Person {
name: string;
constructor(name, gender) {
// ...
this.gender = gender; // Error!
}
}
ES6에서는constructor로받은인자를해당클래스에멤버로등록하기 위해
this로등록을해줬습니다. 그 제한또한없었습니다. 하지만타입스크립트에
서는해당클래스의프로퍼티로등록되지않은속성에대해constructor에서
받을수없습니다. 위코드에서는 gender 라는프로퍼티를정의하지않았기
때문에constructor에서인자로받을수없습니다.
프로퍼티(or filed member)로미리정의되지않은인자를constructor
에서받을수없습니다.

7. 2. extend를통한상속
TypeScript에서도ES6와마찬가지방식으로상속을구현할수있습니다.
public , protected 접근제어자로정의된프로퍼티와메소드에접근할
수있습니다. (접근제어자에대해서는바로다음section에서알아봅니다.)

8. class Person {
name: string;
constructor(name: string) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}
class Developer extends Person {
constructor(name: string) {
super(name);
}
}
const devPerson: Person = new Developer("jbee");
devPerson.sayName(); // jbee

9. sayName 은 Person 클래스에만정의되어있는메소드입니다. Person 에
서정의한대로 this.name 을console에출력하는것을확인할수있습니
다.
extends 키워드를통해서클래스를상속받아부모클래스의메소드와
프로퍼티에접근할수있습니다.

10. super
자식클래스에서constructor를정의하려면 super() 를꼭호출해줘야합
니다. (이는ES6 문법과 동일합니다.) super() 로넘어가게 되는인자또한
부모클래스에서정의한signature와동일해야합니다. 물론별도로정의하지
않으면부모클래스의constructor를따라갑니다.

11. Override method
Developer 클래스에서해당메소드구현하게 되면부모클래스의메소드를
override 하게 됩니다.
class Developer extends Person {
constructor(name: string) {
super(name);
}
sayName() {
cosole.log(`I'm developer, ${this.name}`);
}
}
const devPerson: Developer = new Developer("jbee");
devPerson.sayName(); // I'm developer, jbee

12. sayName 이라는메소드는 Developer 클래스에서재정의된형태로
console에출력합니다.
부모클래스를override하게 되면부모클래스에서정의된메소드를재
정의할수있습니다.

13. 한가지짚고 넘어가자면, 자바에서지원되는overloading이지원되지않습니
다. 따라서다음과 같은메소드는추가할수없습니다.
class Developer extends Person {
// ...
sayName(position) { // Error!
// ...
}
}

14. [!] Types of property 'sayName' are incompatible. 라는에러
가 발생합니다. 자식클래스에서부모클래스와메소드의이름은동일하고
signature가 다른메소드는정의할수없습니다. 이미부모클래스에
sayName 이라는메소드가 존재하기 때문에해당메소드와동일한signature
로override하지않는이상, 다른signature로또다른메소드를정의할수없
습니다.
[!] 하지만 any 라는타입과 함께오버로딩을메소드내부에서if 문또
는switch 문으로분기하여비슷하게 구현할수있습니다. 바로다음에
다룰Function 포스팅에서다루겠습니다.

15. 3. Access Modifier
TypeScript에서는클래스의프로퍼티또는메소드에접근제어자를추가할수
있습니다.

16. public (by default)
타입스크립트에서아무접근 제어자를추가하지않으면기본적으로 public
접근제어자와동일하게 동작합니다. ES6에서와마찬가지로클래스내부, 외부
에서모두접근할수있는프로퍼티를정의할때사용합니다. getter ,
setter 를별도로만들지않아도접근이가능합니다. 위에서정의한
Person 클래스를사용하여예시를보겠습니다.
const p1 = new Person("jbee");
console.log(p1.name); // "jbee"
프로퍼티에바로접근할수있는것을확인할수있습니다.

17. private
private 접근 제어자로정의된멤버는클래스밖에서접근할수없습니다.
이번예시코드에서는 getter , setter 를추가해주기 위해프로퍼티명앞
에 _ (언더바)를추가했습니다.

18. class Person {
name: string;
private _job: string;
constructor(name, job) {
// ...
}
}
const p1: Person = new Person("jbee", "Developer");
console.log(p1._job); // Error!
Property '_job' is private and only accessible within
class 'Person'. 이라는에러가 발생합니다. 클래스내부가 아닌외부에서
private 으로정의된프로퍼티에접근하려고 했기 때문에발생하는에러입
니다. 해당프로퍼티에접근하기 위해 getter 를추가하겠습니다.

19. class Person {
// ...
get job() {
return this._job;
}
}
const p1: Person = new Person("jbee", "Developer");
console.log(p1.job); // Developer
이렇게 접근할수있게 됩니다. getter , setter 를추가하는것보다접근
제어자를 public 하는것이맞는것 같습니다.
프로퍼티또는메소드에 private 이라는접근 제한자를붙이게 되면
클래스내에서만사용할수있는프로퍼티, 그리고 메소드가 됩니다.

20. protected
기본적으로는 private 접근 제어자와동일하게 동작합니다. 하지만어느한
곳에서는접근이가능한데요, 바로해당클래스를상속한클래스에서접근이
가능합니다.
class Perosn {
protected isWorking: boolean;
// ...
}
const p1: Person = new Person(true);
console.log(p1.isWorking);// Error!
[!] Property 'isWorking' is protected and only accessible
within class 'Person' and its subclasses. 라는에러가 발생합니
다. private 접근제어자와마찬가지로클래스외부에서접근할수없음을
뜻합니다.

21. class Developer extends Person {
constructor(isWorking) {
super(isWorking);
}
isWork() {
console.log(this.isWorking);
}
}
const devPerson: Developer = new Developer(true);
devPerson.isWork(); // true
위 Person 클래스를상속한클래스에서는 protected 로정의된프로퍼티
에접근할수있습니다.
프로퍼티또는메소드에 protected 이라는접근 제한자를붙이게 되
면클래스내에서와해당클래스를상속한클래스안에서만사용할수있
게 됩니다.

22. 이접근 제어자는 constructor 에도추가될수있습니다.
constructor 에해당접근제어자를추가하는경우, 해당클래스는바로인
스턴스화될수없으며이클래스를상속받은클래스에서 super 라는키워드
로호출이가능합니다.

23. class Perosn {
protected constructor() {
// ...
}
}
class Developer extends Person {
constructor() {
super();
}
}
const p1: Person = new Person(true); // Error!
const devPerson: Developer = new Developer(); // OK!
[!] Constructor of class 'Person' is protected and only
accessible within the class declaration. 라는에러가 발생하며
상속받은클래스만인스턴스화시킬수있습니다. 추상클래스(Abstract
class)도마찬가지로상속을하기 위한클래스인데요, 추상클래스는구현되지
않은메소드가 존재하는반면이방식은모든메소드가 구현되어야합니다.

24. ES.NEXT
tc39/proposal‑class‑field를참고해보시면, ECMAScript에서도
private 에대한스펙이논의중이며(stage‑3) 해당스펙은 private 이라
는키워드대신 # 이라는키워드로스펙이논의중입니다.

25. readonly
자바를공부하셨던분이라면 final 키워드를아실텐데요, TypeScript에서
는읽기 전용프로퍼티를설정하기 위해 readonly 프로퍼티를사용합니다.

26. class Person {
public readonly age: number;
// ...
set setAge(age: number) {
this.age = age; // Error!
}
}
const p1: Person = new Person(25);
p1.age = 20; // Error!
[!] Cannot assign to 'age' because it is a constant or a
read-only property. 라는에러가 발생합니다! readonly 키워드가 추
가되면상수(constant)로인식하게 됩니다.
readonly 와함께정의된프로퍼티는 constructor 에서한번결정
되면수정할수없습니다.

27. static
static 키워드는ES6에서와동일하게 사용되며사용할수있습니다. 다만
ES6에서는메소드에만해당키워드를추가하는것이가능했는데요,
TypeScript에서는 static 키워드를프로퍼티에도추가할수있습니다. 해
당키워드를프로퍼티또는메소드에추가하게 되면인스턴스를생성하지않고
접근하거나생성할수있습니다.

28. ES6 code
class Circle {
// ...
}
Circle.center = [0,0]
TypeScript code
class Circle {
static center: number[];
//...
}

29. 마무리
TypeScript에서사용하는클래스에대해알아봤습니다. 잘사용하던ES6에
서의클래스가 조금 덜떨어져보일수있습니다!
감사합니다.