일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- C++
- dotenv
- VUE
- property
- loop
- bash
- BOJ
- 보안
- Clone
- nginx
- C#
- npm
- git
- AI
- condition
- docker
- leetcode
- webpack
- JavaScript
- vue.js
- type
- security
- var
- 앙상블
- machine learning
- Python
- TypeScript
- generic
- scss
- vuetify
Archives
- Today
- Total
ice rabbit programming
[JS][TS] Typescript에서의 Class 본문
지난 글에서 인터페이스에 대해 다루었다. 이번 글에서는 객체지향의 가장 중요한 개념 중 하나인 클래스를 다룰 것이다.
C++이나 C#에서의 Class 사용법과 비슷하다. 관례적으로 한 파일에 한 클래스를 사용하는 것도 비슷하다. 아래 class 작성 예시를 보면서 차이점을 보도록 하자.
class Person {
private _age: number // 관례적으로 private 변수에는 _ 를 붙인다.
public name: string = 'ice' // class 내에서 초기화 가능
address: string // default가 public이다.
static country: string = 'Korean' // 전역으로 사용 가능
constructor(name: string, age: number) {
console.log("생성자")
this.name = name
this._age = age
}
hello = () => { // hello() : void { ... 와 같다.
console.log("hello")
}
}
주석에 각 줄의 의미를 다 달았는데, 풀어서 설명을 다시 한 번 적도록 하겠다.
- 멤버의 default 값은 public이다. 그러므로 위의 address 변수는 지정해주지 않았으므로 public이 된다.
- private 멤버의 경우에는 관례적으로 _ 를 prefix로 붙여준다. python(관례가 아니라 아예 룰이지만)에서 protected, private에 각각 _와 __를 붙여주는 것과 비슷하다.
- class 내에서 변수에 값을 넣어주는 것도 가능하다.
- 만약 property나 멤버 변수가 선언만 되어 있고, 초기화를 해주지 않는다면 undefined가 된다. javascript에서 undefined는 아예 존재하지 않는 경우이다(null과는 다르다). 예를 들어 위에서 address를 초기화 해주지 않았는데, 만약 아래와 같이 접근하면 아예 없는 멤버로 접근이 되지 않는다.
let p = Person()
console.log(p.address) // undefined
- C++이나 C#을 했다면 class 이름을 가진 시그니쳐의 생성자가 익숙할 텐데, typescript에서는 constructor()를 이용하여 생성자를 정의한다.
- 멤버 함수는 일반적인 함수 정의와 같다. 물론 arrow function도 활용 가능하다.
- 그 외의 특성(상속, protected 등)은 C계열의 언어와 동일하다.
- static 프로퍼티는 클래스 자체의 멤버 변수이므로, 전역적으로 사용할 수 있다. C++이나 C#에서와 동일한 키워드로 사용할 수 있다.
위에서 본 몇 가지를 제외하면 여느 OOP에서 활용하는 class와 동일하다. 아래에서 두 가지 특성만 더 보고 마무리하도록 하겠다.
private 변수의 get, set 접근
C#을 사용해보았다면 property를 get; set;으로 자주 사용했을 것이다(여기 참고).
완전히 같지는 않지만, 비슷한 느낌으로 typescript에서도 사용할 수 있다.
// ...
private _name: string
get name() // _name 반환
set name(name:string) // _name 초기화
private constructor
얼핏 보면 생성자가 private이라니? 라고 생각이 들 수도 있는데, 외부에서 생성할 수 없게 되므로 싱글톤 패턴을 사용할 때 이용한다. 아래 예시를 보면 이해가 갈 것이다.
// ...
private static Instance: Person = null // static으로 instance 보유
public static getInstatnce(): Person { // 없다면 새로, 있다면 instance 반환
if(Person.Instance === null ) {
Person.Instance = new Person()
}
return Person.Instance
}
private constructor() {}
// ...
static 개념을 이용해 외부에서 새 instance 생성을 차단하고, 싱글톤 패턴으로 활용이 가능하다. 결국 동작은 instance를 export 해주는 것과 동일한데, 유일한 차이점은 생성 타이밍이다. export는 파일을 만들 때 instance가 생성되고, 싱글톤 패턴은 instance가 사용될 때 생성된다.
다음 글에서는 역시나 중요한 개념인 Generic에 대해서 다루도록 하겠다.
'Development > JavaScript' 카테고리의 다른 글
[JS][Vue] vue-cli 3에서 환경변수(dotenv) 활용하기 (0) | 2020.12.29 |
---|---|
[JS][TS] Typescript에서의 Generic(Feat. keyof) (0) | 2020.12.28 |
[Vue] Vuetify에 theme 색상 지정하기 (0) | 2020.12.26 |
[Vue] Vuetify 설치하기(feat. typescript) (0) | 2020.12.26 |
[JS][TS] Typescript에서의 Interface (0) | 2020.12.08 |