# function / union / void 타입

## 함수 매개변수 타입 <a href="#parameters" id="parameters"></a>

다음 코드는 JavaScript에서 아무런 문제가 없지만 `tsconfig.json`에 설정된 [`noImplicitAny`](/typescript/cli-env/tsconfig.md#tsconfig-json) 설정 값이 `true`일 경우, 명시적으로 타입 설정을 하지 않아 컴파일 시 다음과 같은 오류를 출력합니다.

```typescript
// [오류]
// [ts] 'id' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다.
// (parameter) id: any
// [ts] 'name' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다.
// (parameter) name: any
function setInfo(id, name) {
  return { id, name };
}

let product_one = setInfo(120912, '스노우보드');
```

{% hint style="info" %}
**noImplicitAny** 설정 값이 **true**이면, \
**암시적인 any 사용 시, 오류 메시지를 출력**합니다.
{% endhint %}

오류 메시지에서 말한 `any` 타입이 아닌, `number`, `string` 타입으로만 인자를 전달 받으려면 매개변수에 다음과 같이 설정해 사용합니다.

```typescript
function setInfo(id:number, name:string) {
  return { id, name };
}

let product_one = setInfo(120912, '스노우보드');
```

### 실습 <a href="#practice" id="practice"></a>

{% embed url="<https://stackblitz.com/edit/ts-function-params?embed=1&file=index.ts&hideExplorer=1&hideNavigation=1&view=editor>" %}

## 유니온 타입 <a href="#union" id="union"></a>

`id` 매개 변수에 설정 가능한 타입 값을 `number`, `string` 모두 가능하게 하려면 파이프(`|`)를 사용하여 설정합니다. 이를 유니온(union) 타입이라고 부릅니다.

```typescript
function setInfo(id:number|string, name:string){
  return { id, name };
}
```

### 실습 <a href="#practice" id="practice"></a>

{% embed url="<https://stackblitz.com/edit/ts-union?embed=1&file=index.ts&hideExplorer=1&hideNavigation=1&view=editor>" %}

## 함수 리턴 타입 <a href="#return" id="return"></a>

`void`는 결과 값을 반환하지 않는 함수에 설정합니다. 반면 **결과 값을 반환하는 함수**의 경우 **명시적으로 반환 값의 타입을 기술할 수 있습니다.** 아래 코드를 살펴보세요.

```typescript
// 리턴 값 타입이 명시적으로 설정되지 않는 함수
function assignClass(name:string): void {
  document.documentElement.classList.add(name);
}

// 리턴 값 타입이 숫자인 함수
function factorial(n:number): number {
  if (n < 0) { return 0; }
  if (n === 1) { return 1; }
  return n * factorial(n-1);
}

// 리턴 값 타입이 문자인 경우
function repeat(text:string, count:number=1): string {
  let result:string = '';
  while(count--) { result += text; }
  return result;
}
```

{% hint style="info" %}
void 0은 undefined와 같습니다. 명시적으로 반환 값을 설정하지 않는 함수는 undefined를 반환하기에 TypeScript에서는 void를 명시합니다.
{% endhint %}

### 실습 <a href="#practice" id="practice"></a>

{% embed url="<https://stackblitz.com/edit/ts-function-return?embed=1&file=index.ts&hideExplorer=1&hideNavigation=1&view=editor>" %}

## 함수 식 <a href="#function-expression" id="function-expression"></a>

변수에 함수 값을 할당하는 식(Expression)은 컴파일 과정에서 오류를 발생시키지는 않습니다.

```typescript
let assignClass = function(name) {
  document.documentElement.classList.add(name);
};
```

하지만 보다 명시적으로 함수에 설정 가능한 타입을 정의하고자 한다면 다음과 같이 작성할 수 있습니다.

```typescript
// 변수에 함수 매개변수, 리턴 타입에 대한 명시적 설정
let assignClass: (n:string) => void;

// 변수에 함수 값 할당
assignClass = function(name) {
  document.documentElement.classList.add(name);
};
```

변수에 명시적 타입 설정과 함수 값 할당 구문을 별도로 나누지 않고, 한번에 정의할 수도 있습니다.

```typescript
let factorial:(n:number)=>number = function (n) {
  if (n < 0) { return 0; }
  if (n === 1) { return 1; }
  return n * factorial(n-1);
};
```

ES6 화살표 함수 식을 사용하면 다음과 같이 기술할 수도 있습니다.

```typescript
let factorial:(n:number)=>number = n => {
  if (n < 0) { return 0; }
  if (n === 1) { return 1; }
  return n * factorial(n-1);
};
```

문이 아닌 식으로 화살표 함수를 활용하면 다음과 같이 작성해도 결과는 동일합니다. 하지만 읽기는 불편해집니다.

```typescript
let factorial:(n:number)=>number = n => n < 0 ? 0 : n === 1 ? 1 : n * factorial(n-1);
```

### 실습 <a href="#practice" id="practice"></a>

{% embed url="<https://stackblitz.com/edit/ts-function-expression?embed=1&file=index.ts&hideExplorer=1&hideNavigation=1&view=editor>" %}

## 참고 <a href="#reference" id="reference"></a>

{% embed url="<https://www.typescriptlang.org/docs/handbook/functions.html>" %}
TypeScript - 함수 데이터 타입
{% endembed %}

{% embed url="<https://www.typescriptlang.org/docs/handbook/basic-types.html#void>" %}
TypeScript - void 데이터 타입
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/typescript/types/function-union-void.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.