typescript docs 번역본 #3 (functions)

아래 링크는 원본입니다. 해석이 부족해도 양해 부탁드립니다..ㅎㅎ

www.typescriptlang.org/docs/handbook/functions.html#this-parameters

Handbook - Functions

 

```

Js에서 함수들은 기본 구성 요소입니다.. 그것들은 추상화 계층, 클래스 모방, 정보 숨김 및 모듈들을 빌드하게 해줍니다. Ts에서 class, namespace, module들이 있지만, 여전히 함수들은 어떻게 하는지 묘사하는 핵심 역할을 합니다. Ts는 그들을 더 쉽게 하기 위해, 기존 Js에 새로운 기능을 추가합니다

 

 

Functions

시작하기 위해, js처럼 Ts 함수들은 이름 있는 함수나 이름 없는 함수로 생성될 수 있습니다. 이것은 api 함수나 일회성 함수 리스트를 만드는 것과 상관없이, 당신이 어플에 더 적절한 접근을 선택하도록 합니다.

 

두 접근방식이 Js에서 어떻게 보이는지 빠르게 요약하면:

 

Js에서처럼, 함수들은 함수 밖에서 변수를 선언할 수 있습니다. 그렇게 하면, 이러한 변수를 포착한다고 합니다.  이것이 어떻게 작동하는지(그리고 이 기술을 사용할 때 장단점을) 아는 것은 이 글의 범위 밖이지만, 이것이 어떻게 돌아가는지 견고히 이해하는 것은  Ts와 Js로 작업하는데 있어 매우 중요합니다.

 

 

Function Types

 

Typing the function

우리의 간단한 예제에 type을 적용해봅시다.

 

우리는 함수의 각 파라미터와 리턴하는 type에 type들을 추가할 수 있습니다.  Ts는 리턴 상태를 보고 리턴 타입을 알 수 있기 때문에, 여러 경우에 이것을 선택적으로 해제할 수 있습니다.

 

 

Writing the function type

우리는 함수를 작성했고, 함수 type의 각 부분을 살펴보면서 전체 함수 유형을 작성해 보겠습니다.

 

함수의 타입은 독립변수 타입과 리턴 타입, 두 부분이 있습니다. 전체 함수 타입을 작성할 때, 모든 부분이 요구됩니다. 우리는 파라미터 리스트처럼, 각각 이름과 타입이 있는 파라미터 type들을 작성합니다. 이름은 읽기 쉽게 합니다. 우리는 이렇게도 작성할 수 있습니다.

 

파라미터 타입이 있는 한, 함수 타입의 파라미터에 준  이름과 상관없이, 그것은 유용한 함수 타입으로 간주됩니다.

 

두 번째 부분은 리턴 타입입니다. 파라미터와 리턴 타입 사이에 =>을 둠으로써 무엇이 리턴 타입인지 구분할 수 있습니다. 이전에 언급했듯이 이것은 함수 type에 필요하기에, 만약 함수가 아무것도 리턴하지 않으면, 빈 공간 대신 void를 사용하세요.

 

오직 파라미터와 리턴 타입만이 함수 타입을 구성할 수 있습니다. 캡처된 변수들은 type에 반영되지 않습니다. 실제로 캡처된 변수는 모든 함수의 ‘숨겨진 상태’의 일부이며 해당 api를 구성하지 않습니다.

 

 

Infering the types

예시를 보면, Ts 컴파일러가 당신이 한쪽 방정식에만 type을 가지고 있어도 type들을 이해할 수 있다는 것을 눈채 채셨을 것입니다.

 

이것은 타입 추론 양식인 ‘텍스트 typing’이라 불립니다. 이것은 프로그램을 입력하는 노력을 줄여줍니다.

 

 

Optional and Default parameters

Ts에서 모든 파라미터는 함수에게 필요하다고 간주됩니다. 이것은 null이나 undefined가 주어질 수 없음을 의미하는게 아니라, 함수가 호출될 때 컴파일러는 각 유저가 파라미터들을 제공했는지 확인할 것입니다. 또한 컴파일러는 이 파라미터들이 함수를 통과할 유일한 파라미터들이라고 가정합니다. 정리하면, 함수에 주어진  독립변수의 수는 함수가 기대하는 파라미터의 수와 일치해야합니다.

 

Js에서 모든 파라미터는 선택적이고, 만약 그들이 맞다면  유저들은 그들을 제거합니다. 그들이 그렇게 할 때 이 값은 undefined 입니다. 우리는 Ts에서 선택적이길 원하는 파라미터들의 끝에 ?를 더함으로써, 이것을 함수적으로 할 수 있습니다. 예를 들면, 위 예시의 마지막 파라미터가 선택적이길 원한다고 말해봅시다.

 

선택적 파라미터들은 요구된 파라미터를 따라야 합니다. 우리가 마지막 대신 첫 번째를 선택적으로 하고 싶었다면, 첫번째를 마지막으로 놓아 함수 파라미터 순서를 바꾸면 됩니다

 

Ts에서 유저가 제공하지 않거나 undefined를 제공할 때, 파라미터가 지정되도록 값을 설정할 수 있습니다. 이것은 기본 초기화된 파라미터들이라 불립니다. 이전 예제를 보고 마지막에 “Smith”를 기본으로 설정하겠습니다.

 

모든 요구된 파라미터들 뒤에 따르는 기본 초기화된 파라미터들은, 함수를 호출할 때 생략될 수있는  선택적 파라미터들처럼, 선택적으로 다뤄집니다. 이것은 선택적 파라미터들과 기본 파라미터들은 타입 관련한 공통성을 공유할 것을 의미합니다.

 

그리고

 

(firstName: string, lastName?: string) => string type을 공유하세요. 파라미터는 선택적이라는 사실뒤에 남겨져 있으면서, lastName의 기본값은 사라졌습니다.

 

순수 선택적 파라미터와 다르게, 기본 초기화 파라미터들은 요구된 파라미터 이후에 발생하지 않아도 됩니다. 만약 기본 초기화 파라미터가 요구된 파라미터 이전에 있으면, 유저들은 기본 초기화된 값을 갖기 위해, undefined를 명확하게 통과시키길 원합니다. 예를 들면, 우리는 firstName에만 기본 초기화가 적용된 마지막 예시를 적어볼 수 있습니다.

 

 

Rest parameters

요구된, 선택적인, 기본 파라미터들은 한가지 공통된 사안(한번에 한 파라미터에 대해 얘기한)을 가지고 있습니다. 종종, 당신은 다중 파라미터들을 그룹으로써 작업하길 원하거나 함수가 궁극적으로 가질 파라미터들이 얼마만큼인지 모를 수 있습니다. Js에서 당신은 함수 안을 볼 수 있는 모든 독립변수 변수들을 직접적으로 사용하면서 독립변수들과 작업할 수 있습니다.

 

Ts에서 당신은 독립변수들을 변수로 모을 수 있습니다.

 

Rest 파라미터들은 갯수 제한이 없는 선택적 파라미터들로 다뤄집니다. Rest 파라미터로 독립변수를 통과시킬 때, 당신은 당신이 원하는 만큼 사용할 수 있습니다. 심지어 아무것도 패스하지 않아도 됩니다. 컴파일러는 함수 안에서 당신이 사용할 …이후 이름이 통과되는 독립변수 배열을  빌드할 것입니다.

 

…은 rest 파라미터가 있는 함수 타입에도 사용됩니다.

 

 

this

Js에서 this 사용법을 배우는 것은 통과 의례입니다. Ts는 Js의 상위버전이기에, Ts 개발자들은 this를 어떻게 사용할지와 옳게 사용되지 않을 때를 발견하는 법을 필요로 합니다. 운이 좋게도, Ts는 다양한 기술로 잘못된 this 사용을 잡도록 해줍니다. 만약 Js에서 this가 어떻게 작동하는지 배우고 싶으면,  Yehuda Katz의 Understanding JavaScript Function Invocation and “this”을 먼저 읽으세요. Yehuda의 글을 this의 동작원리를 매우 잘 설명하기에, 여기서는 간단하게 다룰 것입니다.

 

 

This and arrow functions

Js에서, this는 함수가 호출될 때 설정되는 변수입니다. 이것은 그것을 매우 강력하고 유연한 특징으로 만들지만, 함수가 실행중인 내용을 항상 알아야 하는 비용이 따라옵니다. 이것은 특히 함수를 리턴하거나 함수를 독립변수로 통과시킬 때, 악명 높게 복잡합니다.

 

예시를 봅시다.

 

createCardPicker은 자체적으로 함수를 리턴하는 함수임을 명심하세요. 만약 예시를 실행하면, 기대한 알람 박스대신 에러가 발생할 겁니다. 왜냐하면 this가 deck 객체대신 window를 사용할 createCardPicker에 의해 생성된 함수에서 사용되었기 때문입니다. 이는, cardPicker()자체를 호출했기 때문입니다. 이러한 상위 비 메소드 구문 호출은 this보다 window을 사용합니다.(notice: strict 모드에서 this는 window대신 undefinde가 될것입니다.)

 

우리는 나중에 사용할 함수를 리턴하기 전에, 함수가 올바른 this에 바운드 되어있는지 확실히 함으로써 이를 해결할 수 있습니다. 이를 위해, 함수 표현 식을 ECMAS6 arrow 문법으로 바꿉니다. Array 함수들은 그것이 투입된 곳보다, 함수가 생성된 곳에서 this를 파악합니다. 

 

더 좋게, 만약 –noImplicitThis가 컴파일러를 통과하는 실수를 할 때, Ts는 당신에게 경고합니다. 이것은 this.suits[pickedSuit]속 this의 type은 any라는 점을 지적합니다.

 

 

This parameters

불행하게도, this.suits[pickedSuit]의 type은 여전히 any입니다. 이는 객체 리터럴속 함수 표현식으로부터 this가 생겼기 때문입니다. 수정하기 위해, 당신은 명확한 this 파라미터를 제공할 수 있습니다. This 파라미터들은 함수의 파라미터 리스트의 첫 번째로 오는 거짓 파라미터 입니다.

 

type들을 깔끔하고 재사용하기 쉽게 하기 위해 위 예시, Card와 Deck에 다중 인터페이스들을 더해봐요

 

이제 Ts는 createCardPicker이 Deck객체로 불리기를 기대한다는 것을 압니다. 이는, Deck type의 this는 any가 아니므로 –noImplicitThis는 에러를 일으키지 않을 것을 의미합니다.

 

 

This parameters in callbacks

나중에 호출하는 라이브러리에 함수들을 통과할 때, 콜벡에서 this로 에러를 겪을 수 있습니다. 콜벡을 호출하는 라이브러리는 그것을 보통 함수처럼 호출하기 때문에, this는 undefined일 것입니다. 약간의 작업으로 당신은 콜벡에서도 에러를 막기 위해 this 파라미터들을 사용할 수 있습니다.

 

This:void는 addClickListener이 this type을 요구하지 않는 onclick을 기대함을 의미합니다. 두번째로, 당신의 호출 코드에 this 주석을 다세요.

This 주석과 함께, onClickBad는 Handler 인스턴스에서 호출되야 합니다. 그런 다음, Ts는 this:void를 가진 함수를 요구하는 addClickListener를 추적할 것입니다. 에러를 고치기 위해, this의 type을 바꾸세요.

 

onClickGood가 this type을 void로 하기 때문에, addClickListener을 통과하는 것은 불법입니다. 물론, this.info를 사용할 수 없음을 의미합니다. 모두 원하면, arrow 함수를 사용해야합니다.

 

Arrow 함수는 바깥 this를 사용하기 때문에 이것은 작동합니다. 그러므로 당신은 this:void를 기대하는 것에 그것들을 통과시킬 수 있습니다. 단점은 arrow 함수는 Handler type의 객체마다 한 개씩 생성되는 것입니다. 반면에, 메소드들은 한번 생성되고 Handler의 속성에 붙습니다. 그들은 Handler type의 객체 간에 모두 공유됩니다.

 

 

Overloads

Js는 본질적으로  동적인 언어입니다. Js함수가 통과된 독립변수의 모양을 기반으로 다른 객체 타입을 리턴하는 모습은 드문 일이 아닙니다.

 

여기 유저가 통과시킨 것에 기초해 다른 두 가지를 리턴하는 pickCard 함수가 있습니다. Deck을 표현하는 객체를 통과시키면, 함수는 card를 집습니다. 만약 유저가 card를 집는다면, 그들이 어떤 카드를 집었는지 그들에게 말할 겁니다. 하지만, 우리는 어떻게 이것을 type 시스템에 표현할 수 있을까요?

 

정답은 overload 리스트로써 동일한 함수에 여러 함수 타입을 지원하는 것입니다. 이 리스트는 컴파일러가 함수 호출을 해결하기 위해 사용할 것입니다. pickCard가 수용하고 리턴할 것을 묘사하는 중복 리스트를 만들어 봅시다.

 

이 변화로, overload들은 pickCard 함수에 대한 타입 확인 호출을 제공합니다.

 

컴파일러가 옳은 type 체크를 선택하기 위해, 그것은 Js를 기반으로 유사한 과정을 따릅니다. 그것은 overload 리스트를 보고, 첫번째 overload를 보면서 제공된 파라미터로 함수를 호출합니다. 만약 동일하다면, 그것은 이것을 맞는 overload로 선택합니다. 이러한 이유로, 더 구체적인 것부터 덜 구체적인 것까지 overload를 나열하는 것은 관례적입니다

 

Function pickCard(x): any는 overload 리스트의 부분이 아니고, 객체와 숫자를 다루는 두 overload를 가지고 있음을 주의하세요. 다른 파라미터 type으로 pickCard를 호출하면 에러가 발생합니다.