[Typescript] 함수에 타입 지정하는 법 & void 타입

함수에 타입 지정하는 법 & void 타입

함수는 총 두 군데 타입지정이 가능하다

1. 파라미터 (함수로 들어오는 자료)
2. return (함수에서 나가는 자료)

함수의 파라미터와 return에 타입지정 해 주기

파라미터 타입지정은 파라미터 옆에 적으면 되고, return 타입지정 하고 싶으면 함수명() 우측에 적어준다.

// 파라미터 타입지정 number, return값 타입지정 number
function 함수 (x:number) : number {
 return x * 2
}

 

타입스크립트에서 타입지정 된 함수가 자바스크립트와 다른 점 

- 파라미터에 타입을 지정하면 필수 입력 해야 한다.

function 함수(x: number): number {
  return x * 2
}

함수() // (X)
함수(2) // (O)

 

파라미터를 옵션으로 하고 싶다면 '?' 사용

파라미터에 타입을 지정하면 필수로 입력해야 하는데 파라미터 없이 쓸 경우도 있다. 그럴 경우 파라미터가 옵션임을 정의해 줘야 한다.

파라미터에 우측에 ?를 붙여 타입을 지정해 주면 된다. 그럼 함수()를 사용할 때 파라미터 없이도 쓸 수 있다.

function 함수(x?:number):number {

}
함수() // (O)
함수(2) // (O)

 

'?' 연산자는 들어올 수도 있다'라는 뜻이긴 한데 정확히 얘기하면 'x: number | undefined' 와 같은 의미다. number가 들어올 수도 있고 undefined가 들어올 수 도 있다는 뜻이기 때문에 아래 두 함수의 의미는 동일하다.

(파라미터가 정의가 안되면 자동으로 undefined가 되는 것)

 🎈🎈🎈

// 동일한 의미
function 함수(x?:number):number {}
function 함수(x:number|undefined):number {}

 

함수에서 return 값을 사용하지 않는 경우 'void' 사용

return 타입을 void로 설정해 주면 된다. return 할 자료가 없는 함수의 타입으로 사용 가능하고 return을 안 쓰는 함수에서 실수로 return 하는 걸 사전에 막을 수 있다.

function 함수(x: number| string):void {
	console.log(x)
}

 

함수도 예외 없는 Union type

function 함수(x:number | string) {
	return x +1 // 에러
}

자바스크립트에서는 문자나 숫자 모두 +1이 가능하지만 타입스크립트에서는 변수의 타입이 'number | string' 과 같은 union type인 경우 에러가 발생한다. 아직 이 파라미터의 타입이 확실하지 않으니 파라미터의 조작을 금지하는 것이다.

 

function 함수(x?:number):number {
	return x * 2; // 에러
}

파라미터 x는 옵션이고, 옵션인 파라미터는 number | undefined 이런 식으로 타입정의가 되기 때문에 파라미터가 확실하지 않기 때문에 에러가 발생한다.