TypeScript Function

HYUK·2023년 3월 14일
0

typescript

목록 보기
6/6

1. 함수의 타입 명시

  • 타입스크립트에서 함수 작성시 함수의 return 타입과, 함수의 parameter 타입을 명시 할수 있다.

1-1. return 타입 명시

function sendMessage(message, userName):void {
  // void타입은 아무것도 반환(return)하지 않는 함수의 반환 값으로만 사용가능한 타입
  console.log(`${message}, ${userName}`);
}

sendMessage("hello", "kim");

----------------------------------------------------------

function sendMessage(message, userName):string[] {
  return ['hello', 'lee'];
}
// 반환되는 값이 배열인 경우 함수에 []로 타입을 명시

----------------------------------------------------------

function sendMessage(message, userName):string {
  return 'hello', 'lee';
}
// 반환되는 값이 string 경우 함수에 string으로 타입을 명시

1-2. parameter 타입 명시

function sendMessage(message : string, userName : string):void {
  console.log(`${message}, ${userName}`);
}

//parameter에 각각 string 타입을 명시

sendMessage("hello", "kim");
  • 그런데 여기서 호출된 함수에서 하나의 인자값만 전달해야 하는 경우가 있을수도 있을것이다. 이러한 경우에 하나의 인자값만 작성하게되면 에러를 발생시키게 된다. 이유는 함수에 정의된 모든 parameter가 함수에 필요하다고 가정하기 때문이다. 그러면 이러한 경우에는 어떻게 인자값을 전달하면 될까?

1-3. optional parameter(선택적 매개변수)

  • Optional Properties 처럼 parameter뒤에 '?'를 붙여주면 인자값을 하나만 전달 해 줄수 있다.
function sendMessage(message : string, userName? : string):void {
  console.log(`${message}, ${userName}`);
}

sendMessage("hello");

이렇게 선택적 매개변수를 이용하게 되면 파라미터값이 2가지가 선언이 되었어도 함수호출시 인자값을 하나만 전달해도 에러가 발생하지 않는다.

하지만 여기서 주의사항이 전달되는 parameter가 여러개이고 optional parameter가 있다면, optional parameter는 반드시 필수 parameter 뒤에 위치해야 한다.

function sendMessage(message : string, userName? : string, userId:string):void {
  console.log(`${message}, ${userName}, ${userId}`);
}

// 필수매개변수들 사이에 선택적 매개변수가 있어서 에러발생, 선택적 매개변수는 필수 매개변수 뒤에 입력해야 함

1-4 기본 매개변수

  • 선택적 매개변수를 지정하고 인자값을 필수 매개변수에만 할당한 후 console창을 확인해본다면 인자값을 전달받은 부분은 정상적으로 출력이되나 선택적 매개변수와 관련된 부분은 아무런 값이 전달되지 않아 'undefined'로 출력되는것을 확인할 수 있다. 이러한 경우에 기본 매개변수(default parameter)를 지정해주면 된다.
function sendMessage(message = 'hello', userName = 'lee'):void {
  console.log(`${message}, ${userName}, ${userId}`);
}

sendMessage() // 기본매개변수인 'hello' 'lee' 출력
sendMessage('hi') // 인자값으로 전달되 'hi' 그리고 기본매개변수로 지정된 'lee'가 출력된다.
sendMessage('goodmornig', 'kim') // 인자값으로 전달된 goodmorning, kim이 출력된다.

기본매개변수 할당은 위 코드에 있는 매개변수 부분에서 볼 수 있듯이 매개변수에 값을 바로 할당 해주면 된다. 타입은 따로 들어가지 않는이유는 타입스크립트의 타입추론적인 부분때문에 들어가지 않는데 기본 매개변수로 들어가면서 string값으로 넣어줬기때문에 string값으로 인식하고있어서 따로 타입을 지정해 주지 않고 있다.

profile
step by step

0개의 댓글