TIR: Typescript | 함수(3) arguments - 221008

Lumpen·2022년 10월 9일
0

TIR

목록 보기
37/40

arguments

arguments는 안전하지 않다

function sum() :number {
  return Array
  			.from(arguments)
  			.reduce((total, n) => total + n, 0)
}

sum(1, 2, 3) // Error TS2554: 0개의 인수가 필요한데 3개의 인수가 제공됨

타입스크립트는 total과 n 모두를 any로 추론한다
때문에 함수 작성 시 에러를 반환하지 않고
사용할 때가 되어서야 에러를 발생시킨다

안전하게 여러 인수를 받는 방법

function sum(...numbers: number[]): number {
	return numbers.reduce((total, n) => total + n, 0) 
}

this binding

call, apply, bind

함수를 괄호 ()로 호출하는 방법도 있지만 자바스크립트에서는 두 가지 방법을 추가로 제공한다

위의 sum 함수를 호출하기 윌해서는 다음과 같이 작성할 수 있다

sum(10, 20, 30)
sum.apply(null, [10, 20, 30])
sum.call(null, 10, 20, 30)
sum.bind(null, 10, 20, 30)()

apply는 함수 안에서 값을 this로 bind하며 (여기에서는 this를 null로 한정)
두 번째 인수를 펼처 함수에 매개변수로 전달한다
call도 같은 기능을 하지만 인수를 순서대로 전달한다
bind도 call과 비슷하지만 함수를 실행하는 것이 아니라 새로운 함수를 반환한다

TSC 플래그: strictBindCallApply
코드에서  call(), apply(), bind()를 안전하게 사용하려면 tsconfig.json에서
strictBindCallApply를 활성화해야 한다 (stirct 모드를 활성화 하면 자동으로 활성화 됨	) 

this의 타입

자바스크립트의 this는 함수가 어떻게 호출됐는지에 따라 값이 달라진다
따라서 많은 개발팀은 클래스 메서드를 제외한 다른 모든 곳에서 this 사용을 금지한다
TSLint 규칙에서 no-ivalid-this를 활성화하면 this를 막을 수 있다

this의 동작은 예상과 다를 수 있다
하지만 타입스크립트가 잘 처리해준다
함수에서 this를 사용해야 한다면 this 타입을 함수의 첫 번째 매개변수로 선언한다
그러면 함수 안에서 사용되는 모든 this가 의도대로 동작함을 타입스크립트가 보장해준다
this는 예약어이므로 다른 매개변수와 완전히 다른 방식으로 처리된다

function fancyDate(this: Date) {
	return `${this.getDate()}/${this.getMonth()+1}/${this.getFullYear()}`
}

fancyDate.call(new Date) // "일/월/년" 의 날짜 제공
fancyDate() // 에러 TS2684: void 타입의 this를 메서드에 속한 Date 타입의 this에 할당할 수 없음

타입 스크립트 덕분에 런타임이 아닌 컴파일 타임에 경고를 준다

TSC 플래그: noImplicitThis
tsconfig.json에서 noImplicitThis를 활성화하면 
함수에서 항상 this 타입을 명시적으로 설정하도록 강제할 수 있다
클래스와 객체의 메소드에는 this를 지정하도록 강제하지 않는다
profile
떠돌이 생활을 하는. 실업자는 아니지만, 부랑 생활을 하는

0개의 댓글