본문 바로가기

프론트엔드(Front-End)/TypeScript

[TypeScript] 타입스크립트의 타입 선언 : function

타입스크립트와 function의 타입 선언

타입스크립트에서는 function의 파라미터와 리턴타입 등에도 타입을 지정해줄 수 있습니다.

 

// 함수의 타입 선언

// 파라미터(parameter)의 타입 지정
function printName(name: string) { 
  console.log(name);
}

printName("hello");
// printName(123); // 오류!

 

위와 같이 함수의 파라미터에서 타입을 정해줄 수 있습니다.

만약 타입이 맞지 않는다면 아래의 그림과 같이 컴파일 단계에서 오류가 발생합니다.

 

 

함수에는 리턴 값이 존재하죠. 마찬가지로 타입스크립트에서는 리턴 타입에도 아래와 같이 타입을 지정할 수 있습니다.

 

// 리턴타입(return type)의 타입지정
function sum(value1: number, value2: number): number{
    return value1 + value2;
}

 

만약 리턴 타입에 지정한 타입이 아닌 다른 것을 리턴하려 한다면 아래의 그림과 같이 컴파일 오류가 발생합니다.

 

 

그런데, 자바스크립트 함수는 arrow function 이라는 형태로 함수 선언도 가능합니다.

타입스크립트는 마찬가지로 arrow function에서도 타입을 지정할 수 있습니다.

 

// arrow function의 타입 지정
const divide = (value1: number, value2: number): number => {
  return value1 - value2;
};

divide(1, 2);
// divide(true, 1); // 오류!

 

위와 같이 함수를 선언하고 함수에 지정한 것과 다른 타입의 값을 넣게 되면,

아래와 같이 컴파일 오류가 발생하게 됩니다.

 

 

 

타입스크립트와 rest Parameter

함수에는 정해진 개수만큼 개발자가 직접 파라미터를 주기도 하지만, 경우에 따라서 가변적일 수 있는 파라미터는 어떻게 해야할까요? 자바스크립트에서는 이를 위해 rest Parameter를 제공하는데 이 문법을 통해 1~n개의 파라미터를 간편하게 사용할 수 있습니다.

마찬가지로 rest Parameter에도 타입을 지정할 수 있는데, 이때 rest Parameter의 타입은 배열이 됩니다.

따라서, 타입을 지정할 때에는 아래와 같이 배열 타입을 지정하듯이 지정하면 됩니다.

 

function sumAll(...args: number[]): number {
  let sum = 0;
  args.map((e) => (sum += e));
  return sum;
}

console.log(sumAll(1, 2, 3, 4)); // 10
// sumAll(1, 2, "hey"); // 오류!

 

아래와 같이 타입을 잘못 입력하면 마찬가지로 컴파일 오류가 잘 나타납니다.

 

 

never 타입

타입스크립트에서 함수를 사용하여 자료형에 따라 분기를 나눌 때 절대 올 수 없는 값에 대하여 대응하는 경우를 분기하는 일이 생기곤 합니다. 타입스크립트는 엄격히 타입을 제한하기 때문에 지정한 타입 이외의 것은 허용하지 않는데요.

아래와 같이 number와 string 만을 받는 어떤 함수가 있다고 했을 때,

function print(value: string | number) {
    if (typeof value === 'string') {
        
    } else if (typeof value === 'number') {
        
    } else {
        let v = value;
    }
    
}

 

else 절에 있는 변수 value의 타입은 무엇일까요?

정답은 아무 것도 올 수 없어야 한다 입니다.

왜냐하면 타입스크립트에서 입력받는 파라미터에서 string과 number만을 허용하고 있기 때문이죠.

 

위처럼 다른 값을 넣게 되면 컴파일 오류가 발생하여, 코드를 수정하도록 가이드 해줍니다.

 

 

 

이 경우  else절의 변수 v의 타입은 never가 되며,

타입스크립트는 이처럼 절대 존재할 수 없는 타입을 위한 타입으로 never를 사용합니다.