<div id="readability-page-1" class="page"><div><h2 id="함수를-정의하는-방법">함수를 정의하는 방법</h2>
<h2 id="function-type-expression">Function type expression</h2>
<ul>
<li>함수를 정의하는 가장 간단한 방법</li>
<li>화살표 함수와 유사하다.</li>
</ul>
<img src="https://images.velog.io/images/jujube0/post/a8cec61c-62fd-42cf-ba39-ca16911aad5d/image.png">첫번째 <code>greeter</code> 함수는 string type의 a라는 하나의 parameter를 가지면서 return 값이 없는 함수임을 의미한다.
<img src="https://images.velog.io/images/jujube0/post/959e9cdb-5c02-49f8-a457-899db50f5f74/image.png">함수를 type으로 만들 수도 있다.
<h2 id="call-signature">Call Signature</h2>
<img src="https://media.vlpt.us/images/jujube0/post/461f4495-df04-47fe-948f-12c78617cf1f/image.png">
<ul>
<li><code>type</code> 을 이용하여 함수를 정의하는 새로운 방법</li>
<li>하지만 모양이 다르다. <code>=&gt;</code> 대신 <code>:</code> 를 이용한다.</li>
<li>function type expression 이 <code>function</code> 타입으로 새로운 타입을 만들었다면,</li>
<li>call signature 방식은 여러 property를 갖는 object 에 callable(호출 능력)을 부여하는 것이다.</li>
<li><code>fn.description</code>으로 property에 접근도 가능하고, <code>fn(6)</code> 로 함수처럼 호출을 할수도 있다.</li>
</ul>
<img src="https://images.velog.io/images/jujube0/post/1f390bc9-321a-4a29-9ee1-ddded96e859d/image.png"><ul>
<li>call signature 앞에 <code>new</code> 키워드를 추가하여 callable 기능을 추가할 수도 있다.</li>
<li>역시 다른 property를 추가할 수 있다.</li>
</ul>
<h2 id="generic">Generic</h2>
두 값 사이의 연관성을 설명하고 싶을 때 generics 을 이용할 수 있다.
<img src="https://media.vlpt.us/images/jujube0/post/3a741117-0b25-4503-ac31-b2e8b3a97c1f/image.png">
짠, type parameter인 <code>Type</code> 을 추가하여 input parameter인 <code>arr</code> 의 타입과 return type을 연결했다.
<ul>
<li>type parameter를 여러개 추가할 수도 있다. 
<img src="https://media.vlpt.us/images/jujube0/post/43902aec-f565-42b4-aa74-730750c6a07f/image.png"> 
새롭게 정의한 <code>newMap</code> 함수는 첫번째 parameter인 <code>arr</code> 을 통해 <code>Input</code> 이 무슨 타입인지 추론하고, 두번째 parameter인 <code>func</code> 를 통해 <code>Output</code>(그리고 <code>Input</code>도) 추론한다.</li>
</ul>
<h2 id="constraints">Constraints</h2>
<ul>
<li>기본적으로 type parameter에는 어떤 타입이든 올 수 있다.</li>
<li>이러한 type parameter에 올 수 있는 것을 한정하기 위해 쓸 수 있는 것이 <code>constraints</code></li>
<li>예를 들어 <code>Type extends { length: number }</code> 라는 type parameter에는 <code>length(number)</code> 속성을 가지는 type, 예를 들어 array object 같은 것만 올 수 있다.</li>
<li>추가적으로, <code>Type</code> 이라는 type parameter가 <code>length</code> 속성을 갖도록 명시했음으로, <code>Type</code>을 타입으로 갖는 변수의 <code>length</code>에 접근이 가능하다.</li>
<li></li>
</ul>
<img src="https://media.vlpt.us/images/jujube0/post/11a92cd2-de94-48ca-9cef-b52fc6921f60/image.png">
<ul>
<li>위 코드에서 <code>#1</code> 은 Type 'string' is not assignable to type 'number'. 라는 에러를 발생시킨다.</li>
<li>첫번째 <code>arr1</code> 변수의 타입인 number가 <code>Type</code> 으로 지정된 탓이다. 이 경우 두번째 처럼 <code>Type</code> 을 명시적으로 지정해줌으로써 해결할 수 있다.</li>
</ul>
<blockquote>
type parameter가 여러 값들의 type을 연결시키기 위해 존재함을 기억하자. 의미없는 type parameter의 남발과, constraint의 추가는 코드를 복잡하게 만든다.
</blockquote>
<h2 id="optional-parameter">optional parameter</h2>
<img src="https://images.velog.io/images/jujube0/post/e0038371-ca4a-41f4-9ea0-b3840a476674/image.png"><code>?</code> 를 사용하여 optional parameter를 추가할 수 있다. 이 경우 <code>parameter</code>가 없으면 x는 <code>undefined</code>이다.
<img src="https://images.velog.io/images/jujube0/post/3258ab9c-a7a3-4ffa-887a-a3b932852af5/image.png">default 값을 설정할 수도 있다. <code>undefined</code>이면 (<code>parameter</code>가 없으면) x의 값은 default로 설정한 값이 된다.
<blockquote>
callback 에 optional parameter를 추가하는 것은 지양하자
</blockquote>
<pre><code>function myForEach(arr: any[], callback: (arg: any, index?: number) =&gt; void) {
 for (let i = 0; i &lt; arr.length; i++) {
 callback(arr[i]);
 }
}
myForEach([1, 2, 3], (a) =&gt; console.log(a));
myForEach([1, 2, 3], (a, i) =&gt; console.log(a, i));
myForEach([1, 2, 3], (a, i) =&gt; {
 console.log(i.toFixed())
});</code></pre>
<ul>
<li>result 
<img src="https://media.vlpt.us/images/jujube0/post/6c25735f-cc35-4280-b14c-240a4d0e9415/AEF8E436-071D-44EE-A538-37B0821C33ED.png"></li>
</ul>
<h2 id="function-overloads">Function Overloads</h2>
<img src="https://media.vlpt.us/images/jujube0/post/a9705e53-35fa-4450-87a2-9c22054198d8/image.png">
<ul>
<li><code>#1</code> : overload signature</li>
<li><code>#2</code> : implementation signature(body of the function) 
직접 호출될 순 없다. (<code>#5</code> 처럼 overload에서 정의되지 않은 함수는 호출할 수 없다)</li>
<li>implementation signature은 모든 overload signature에 적용이 가능해야 한다.</li>
</ul>
<img src="https://media.vlpt.us/images/jujube0/post/fdf72f76-44ce-48ad-b08f-e74c185e55c7/72F47F34-691A-4165-A2F1-D20AC28A26C4.png">
<ul>
<li>가능하다면 union type을 쓰는 것이 더욱 직관적이다.</li>
</ul>
<h2 id="declaring-this-in-a-function">Declaring <code>this</code> in a function</h2>
<a href="https://www.typescriptlang.org/docs/handbook/2/functions.html">문서 바로가기</a> 
아직 <code>this</code> 를 함수에서 써본적이 없어서 스킵했다.
<h2 id="other-types">Other types</h2>
<ul>
<li>
<code>void</code> 
값을 반환하지 않는 함수를 의미한다. JavaScript에서 값을 반환하기로 되어있는 함수에 <code>return</code>이 없으면 <code>undefined</code>를 return하게 된다. 하지만 <code>void</code>와 <code>undefined</code>가 다르다는 것을 알아두자. 자세한 것은 뒤에서.
</li>
<li>
<code>object</code> 
primitive(<code>string</code>, <code>number</code>, <code>boolean</code>, <code>symbol</code>, <code>null</code>, <code>undefined</code>)를 제외한 다른 모든 값들. 
함수도 object이다.
</li>
<li>
<code>unknown</code> 
모든 값을 표현할 수 있다. 하지만 <code>any</code>와는 달리 <code>unknown</code> 타입의 값으로 할 수 있는 것에는 제한이 있다. 
<img src="https://media.vlpt.us/images/jujube0/post/fda82496-475f-4db3-b129-3faf37b5620a/935B66DB-B81B-4DB9-8651-035419D23EF5.png">
</li>
</ul>
return 값으로 <code>unknown</code> type을 리턴하면, 리턴 받은 값에 대한 주의를 요구할 수 있다. 
<img src="https://media.vlpt.us/images/jujube0/post/5ba1a61f-8f58-4363-b9f8-a913ebf14929/image.png">
<ul>
<li><code>never</code> 
<code>never</code>는 존재해서는 안되는 값이다. 함수의 return값으로 <code>never</code>이 존재한다는 것은, 함수가 예외를 던지거나, 프로그램을 종료시키는 함수라는 의미이다.</li>
</ul>
<h2 id="rest-parameter-and-argument">Rest Parameter and Argument</h2>
<ul>
<li>
Rest Parameter 
<code>...</code> 를 통해 정해지지 않은 개수의 argument들을 받는 함수를 만들 수 있다. 
<img src="https://media.vlpt.us/images/jujube0/post/bb98fba6-286c-4e46-a5e9-45571acf9830/image.png">
</li>
<li>
같은 함수에서 <code>number[]</code> 타입의 변수 <code>x</code>를 넣어보면, <code>Expected 2 arguments, but got 0 or more.</code> 라는 에러가 뜬다(<code>#1</code>). 이는 typescript가 array를 변경 가능한 값으로 인지하기 때문. 
해당 함수는 <code>n(number)</code> 변수를 필수로 가져야 하기 때문에 최소 하나 이상의 argument를 받아야 한다. 하지만 mutable한 array는 값이 0개일 수도 있기 때문에 에러를 발생시키는 것 
<img src="https://media.vlpt.us/images/jujube0/post/c399a905-da9d-45c4-8c1f-6c95be4178da/image.png">
</li>
<li>
하지만 <code>x</code> 에 <code>as const</code> 를 추가(객체 전체를 literal type으로 변경 )하면 <code>x</code> 가 리터럴 타입이 되면서 에러가 사라진다(<code>#2</code>). 또는, 함수의 input을 모두 _optional_로 변경해주는 방법도 있다. 
<img src="https://media.vlpt.us/images/jujube0/post/a3886665-f461-4568-91c7-99a9960ab2a9/image.png">
</li>
</ul>
<h2 id="parameter-destructuring">Parameter Destructuring</h2>
<ul>
<li>object를 효과적으로 언팩하기위한 방법. javascript에서는 보통 다음과 같이 이용했다.</li>
</ul>
<pre><code>function sum({ a, b, c }) {
 console.log(a + b + c);
}
sum({ a: 10, b: 3, c: 9 });</code></pre>
<ul>
<li>타입스크립트에서는 다음과 같이 이용한다. 
<img src="https://media.vlpt.us/images/jujube0/post/90f1efc9-8351-4810-9c20-95d18e9eaf1a/image.png"></li>
</ul></div></div>

jujube0

함수를 정의하는 방법
Function type expression
함수를 정의하는 가장 간단한 방법
화살표 함수와 유사하다. 
첫번째 greeter 함수는 string type의 a라는 하나의 parameter를 가지면서 return 값이 없는 함수임을 의미한다.
함수를 type으로 만들 수도 있다.
Call Signature
type 을 이용하여 함수를 정의하는 새로운 방법
하지만 모양이 다르다. => 대신 : 를 이용한다. 
function type expression 이 function 타입으로 새로운 타입을 만들었다면,
call signature 방식은 여러 property를 갖는 object 에 callable(호출 능력)을 부여하는 것이다. 
fn.description으로 property에 접근도 가능하고, fn(6) 로 함수처럼 호출을 할수도 있다.
call signature 앞에 new 키워드를 추가하여 callable 기능을 추가할 수도 있다. 
역시 다른 property를 추가할 수 있다.
Generic
두 값 사이의 연관성을 설명하고 싶을 때 generics 을 이용할 수 있다.
짠, type parameter인 Type 을 추가하여 input parameter인 arr 의 타입과 return type을 연결했다. 
type parameter를 여러개 추가할 수도 있다. 
새롭게 정의한 newMap 함수는 첫번째 parameter인 arr 을 통해 Input 이 무슨 타입인지 추론하고, 두번째 parameter인 func 를 통해 Output(그리고 Input도) 추론한다.
Constraints
기본적으로 type parameter에는 어떤 타입이든 올 수 있다.
이러한 type parameter에 올 수 있는 것을 한정하기 위해 쓸 수 있는 것이 constraints
예를 들어 Type extends { length: number } 라는 type parameter에는 length(number) 속성을 가지는 type, 예를 들어 array object 같은 것만 올 수 있다. 
추가적으로, Type 이라는 type parameter가 length 속성을 갖도록 명시했음으로, Type을 타입으로 갖는 변수의 length에 접근이 가능하다.
위 코드에서 #1 은 Type 'string' is not assignable to type 'number'. 라는 에러를 발생시킨다. 
첫번째 arr1 변수의 타입인 number가 Type 으로 지정된 탓이다. 이 경우 두번째 처럼 Type 을 명시적으로 지정해줌으로써 해결할 수 있다. 
type parameter가 여러 값들의 type을 연결시키기 위해 존재함을 기억하자. 의미없는 type parameter의 남발과, constraint의 추가는 코드를 복잡하게 만든다.
optional parameter
? 를 사용하여 optional parameter를 추가할 수 있다. 이 경우 parameter가 없으면 x는 undefined이다. 
default 값을 설정할 수도 있다. undefined이면 (parameter가 없으면) x의 값은 default로 설정한 값이 된다.
callback 에 optional parameter를 추가하는 것은 지양하자
function myForEach(arr: any[], callback: (arg: any, index?: number) => void) {
 for (let i = 0; i < arr.length; i++) {
 callback(arr[i]);
 }
}
myForEach([1, 2, 3], (a) => console.log(a));
myForEach([1, 2, 3], (a, i) => console.log(a, i));
myForEach([1, 2, 3], (a, i) => {
 console.log(i.toFixed())
});
result
Function Overloads
#1 : overload signature
#2 : implementation signature(body of the function) 
직접 호출될 순 없다. (#5 처럼 overload에서 정의되지 않은 함수는 호출할 수 없다)
implementation signature은 모든 overload signature에 적용이 가능해야 한다. 
가능하다면 union type을 쓰는 것이 더욱 직관적이다.
Declaring this in a function
문서 바로가기
아직 this 를 함수에서 써본적이 없어서 스킵했다.
Other types
void
값을 반환하지 않는 함수를 의미한다. JavaScript에서 값을 반환하기로 되어있는 함수에 return이 없으면 undefined를 return하게 된다. 하지만 void와 undefined가 다르다는 것을 알아두자. 자세한 것은 뒤에서.
object 
primitive(string, number, boolean, symbol, null, undefined)를 제외한 다른 모든 값들.
함수도 object이다.
unknown
모든 값을 표현할 수 있다. 하지만 any와는 달리 unknown 타입의 값으로 할 수 있는 것에는 제한이 있다. 
return 값으로 unknown type을 리턴하면, 리턴 받은 값에 대한 주의를 요구할 수 있다. 
never
never는 존재해서는 안되는 값이다. 함수의 return값으로 never이 존재한다는 것은, 함수가 예외를 던지거나, 프로그램을 종료시키는 함수라는 의미이다. 
Rest Parameter and Argument
Rest Parameter
... 를 통해 정해지지 않은 개수의 argument들을 받는 함수를 만들 수 있다. 
같은 함수에서 number[] 타입의 변수 x를 넣어보면, Expected 2 arguments, but got 0 or more. 라는 에러가 뜬다(#1). 이는 typescript가 array를 변경 가능한 값으로 인지하기 때문. 
해당 함수는 n(number) 변수를 필수로 가져야 하기 때문에 최소 하나 이상의 argument를 받아야 한다. 하지만 mutable한 array는 값이 0개일 수도 있기 때문에 에러를 발생시키는 것
하지만 x 에 as const 를 추가(객체 전체를 literal type으로 변경 )하면 x 가 리터럴 타입이 되면서 에러가 사라진다(#2). 또는, 함수의 input을 모두 _optional_로 변경해주는 방법도 있다. 
Parameter Destructuring
object를 효과적으로 언팩하기위한 방법. javascript에서는 보통 다음과 같이 이용했다. 
function sum({ a, b, c }) {
console.log(a + b + c);
}
sum({ a: 10, b: 3, c: 9 });
타입스크립트에서는 다음과 같이 이용한다.

Typescript : functions

댓글