[TS] 클래스 메서드

function함수와 this 키워드

타입스크립트의 function 키워드로 만든 함수는 Function이라는 클래스의 인스턴스, 즉 함수는 객체라고 했다.
객체지향 언어에서 인스턴스에서는 this 키워드를 사용할 수 있다.
function키워드로 만든 함수에 this키워드를 사용할 수 있다.
반면 화살표 함수에는 this 키워드를 사용할 수 없다.

메서드란?

타입스크립트에서 메서드는 function으로 만든 함수 표현식을 담고 있는 속성이다.

다음 코드에서 클래스 A는 value와 method라는 두 개의 속성을 가진다. value에는 1이라는 값을 설정하지만, method는 () => void 타입의 함수 표현식을 설정한다.
여기서 method구현 내용 중 특이한 부분은 this.value이다.

export class A {
	value: number = 1
    method: () => void = function(): void {
    	console.log(`value: ${this.value}`)
    }
}

이제 다음과 같은 테스트 코드를 만들어 실행해보자.
A.ts에서 value를 1로 설정했으므로 value: 1 이라는 문자열이 출력된다.

import {A} from './A'

let a: A = new A
a.method() // value: 1

클래스 메서드 구문

앞에서 작성한 클래스 A는 구현하기도 번거롭고 가독성도 떨어진다.
타입스크립트는 클래스 속성 중 함수 표현식을 담는 function키워드를 생략할 수 있게 하는 단축 구문을 제공한다.
B클래스는 타입스크립트답게 구현한 클래스이다. 같은 동작이지만 더 간결하다.

export class B {
	constructor(public value: number = 1){}
    method: () => void = function(): void {
    	console.log(`value: ${this.value}`)
    }
}

B클래스의 생성자를 통해 전달된 2라는 값이 value에 설정되고 method가 호출되어 2라는 값이 출력된다.

import {B} from './B'

let b: B = new B(2)
b.method() // value: 2

정적 메서드

클래스의 속성은 static수정자를 속성 앞에 붙여서 정적으로 만들 수 있다.
메서드 또한 속성이므로 이름 앞에 static 수정자를 붙여 정적 메서드를 만들 수 있다.

export class C{
	static whoAreYou(): string {
    	return `I'm class C`
    }
}

export class D{
	static whoAreYou(): string {
    	return `I'm class D`
    }
}

console.log(C.whoAreYou()) // I'm class C
console.log(D.whoAreYou()) // I'm class D

메서드 체인

제이쿼리와 같은 라이브러리는 객체의 메서드를 계속 이어서 호출하는 방식의 코드를 작성할 수 있다.
이러한 방식을 메서드 체인이라고 한다.

타입스크립트로 메서드 체인을 구현하려면 메서드가 항상 this를 반환하게 한다.