[TypeScript] 클래스 메소드

ㅁ 클래스 메소드

- function 함수와 this 키워드

  타입스크립트의 function 키워드로 만든 함수는 Function이란 클래스의 인스턴스, 즉 함수는 객체라고 했음

  객체지향 언어에서 인스턴스는 this 키워드를 사용할 수 있음

  타입스크립트에서는 function 키워드로 만든 함수에 this 키워드를 사용할 수 있음

  반면에 화살표 함수에는 this 키워드를 사용할 수 없음

 

- 메소드란?

  타입스크립트에서 메소드(method)는 function으로 만든 함수 표현식을 담고 있는 속성임

  다음 코드에서 클래스 A는 value와 method라는 두 개의 속성을 가짐

  value에는 1이라는 값을 설정하지만, method는 () => void 타입의 함수 표현식을 설정함

  여기서 method 구현 내용 중 특이한 부분은 4행의 this.value 부분임

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

  이제 다음과 같은 테스트 코드를 만들어 실행해 보면 A.ts의 2행에서 vlaue 속성을 1로 설정했으며 4행의 this.vlaue가 되어 value: 1이라는 문자열이 출력됨

// testA.ts
import {A} from './A'
let a: A = new A
a.method()		// value: 1

 

- 클래스 메소드 구문

  앞에서 작성한 클래스 A는 구현하기도 번거롭고 가독성도 떨어짐

  타입스크립트는 클래스 속성 중 함수 표현식을 담는 속성은 function 키워드를 생략할 수 있게 하는 단축 구문(shorthand)을 제공함

  다음 코드에서 B 클래스는 타입스크립트답게 구현한 클래스 A임

  A와 B는 똑같이 동작하지만 B코드가 더 간결해 보임

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

  다음은 B 클래스를 테스트하는 코드임

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

// testB.ts
import {B} from './B'
let b: B = new B(2)
b.method()	// value: 2

 

- 정적 메소드

  클래스의 속성은 static 수정자(modifier)를 속성 앞에 붙여서 정적으로 만들 수 있음

  메소드 또한 속성이므로 이름 앞에 static 수정자를 붙여 정적 메소드를 만들 수 있음

  다음 코드는 C와 D라는 두 클래스가 whoAreYou라는 같은 이름의 정적 메소드를 구현하고 있음

  클래스 메소드는 13, 14행에서 보듯 '클래스 이름.정적 메소드()' 형태로 호출함

// static-method.ts
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

 

- 메소드 체인

  제이쿼리(jQuery)와 같은 라이브러리는 다음처럼 객체의 메소드를 이어서 계속 호출하는 방식의 코드를 작성할 수 있는데 이러한 방식을 메소드 체인(method chain)이라고 함

$("#p1").css("color", "red").slideUo(2000).slideDown(2000);

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

// method-chain.ts
export class calculator {
	constructor(public value: number = 0) {}
    add(value: number) {
    	this.vlaue += value
        retrun this
    }
    multiply(value: number) {
    	this.value *= value
        return this
    }
}

  이제 다음과 같은 테스트 코드에서 4행처럼 제이쿼리 스타일로 구현할 수 있음

// test-method-chain.ts
import {Calculator} from './method-chain'

let calc = new Calculator
let result = calc.add(1).add(2).multiply(3).multiply(4).value
console.log(result)	// (0 + 1 + 2) * 3 * 4 =36

 

[출처: Do it 타입스크립트 프로그래밍]