Front-end/Typescript

Typescript에서 함수 선언하기

아지송아지 2022. 2. 22. 22:07

오늘은 typescript에서 함수를 선언하는 방법에 대하여 알아보겠습니다.

 

javascript


function sum(a, b){
	return a + b;
};
sum(1, 2);

js에서 일반적으로 함수를 선언하는 방법입니다.

타입이 선언되어있지 않기 때문에 숫자, 문자열, 오브젝트 등 모든 타입을 넣을 수 있습니다.

이렇게 되면 원하는 기존의 의도와는 다르게 함수가 작동할 가능성이 있습니다.

 

 

 

 

typescript


function

function sum(a: number, b: number):number {
	return a + b;
}
sum(1, 2); // 성공
sum(1); // 오류 . 두번째 매개변수가 없습니다.
sum("hello", 100); // 오류

ts에서는 매개변수와 리턴하는 타입 모두 정의해 주어야 합니다.

만약 매개변수를 덜 넣거나 더 넣으면 오류가 납니다.

number가 아닌 string형식을 넣으면 코드 작성 단계에서부터 오류가 납니다.

 

 

void

function logText(a: number, b: number):void {
	console.log(a, b);
}

만약 리턴값이 없을 경우에는 void를 사용하시면 됩니다.

 

 

optional parameter

function logText(a: number, b?: number):void {
	console.log(a);
	console.log(b);
}
sum(1, 2); // 성공
sum(1); // 성공

개발을 하다 보면 매개변수가 선택적으로 들어가야 할 때가 있습니다.

타입을 정의할 때?: 를 사용하시면 됩니다.

 

function defaultParams(a:number, b=100){
    console.log(a, b);
}
defaultParams(1, 2); // 1, 2
defaultParams(1); // 1, 100

위와 같은 형식으로 사용하면 매개변수를 넣지 않거나 undefuned를 넣었을 때 기본값이 들어갑니다.

 

 

 

 

참고 : 

https://typescript-handbook-ko.org/pages/functions.html

'Front-end > Typescript' 카테고리의 다른 글

Typescript enum 정리  (0) 2022.02.28
Typescript 유니온, 인터섹션 타입  (0) 2022.02.28
Typescript type alias & interface  (0) 2022.02.24
Typescript에서 변수 선언하기  (0) 2022.02.19
Typescript란 무엇인가  (0) 2022.02.17