[TypeScript] 함수의 반환 타입과 함수 타입 구문(function type)

[TypeScript] 함수의 반환 타입과 함수 타입 구문(function type)

 

 

📌 반환 타입

함수의 반환문이 함수의 반환 타입으로 할당할 수 없는 값을 반환하는 경우, 다음과 같이 할당 가능성 오류를 표시한다.

function home(todo: string): string | indefined {
    switch (todo) {
        case "러닝 타입스크립트":
            return `${todo} 공부하고 블로그 정리`; // Ok
        case "리액트 프로젝트":
            return 100;
            // Error 🔥: Type 'number' is not assignable to type 'string'.
        defualt:
            return undefined; // Ok
    }
}

두번째 case 에서 반환값은 100인데, home 함수의 반환값은 string | undefined 이므로 number 타입은 string 타입에 할당할 수 없다는 에러가 발생한다.

 

📌 함수 타입 구문(function type)

함수 타입(Function Type)은 타입스크립트에서 함수에 대한 타입을 정의하기 위한 구문이다.

함수 타입은 매개변수와 반환값에 대한 타입 정보를 명시하여 함수의 시그니처(signature)를 정의하는 역할을 한다.

 

함수 타입 구문은 다음과 같이 사용된다. 화살표 함수와 유사하지만 함수 본문 대신 타입이 있다.

(parameter1: type1, parameter2: type2, ...) => returnType

 

함수 타입은 변수의 타입으로 사용하거나, 다른 함수의 매개변수 타입이나 반환 타입으로 활용할 수 있다.

type AddFunction = (x: number, y: number) => number;

AddFunction은 함수 타입을 나타내는 타입(alias)이다.

함수 타입은 (x: number, y: number) => number로 정의되어 있으며, x와 y는 모두 숫자 타입의 매개변수이고, 반환값은 숫자 타입이다.

또한 함수 타입은 고차 함수(higher-order function)를 작성할 때 유용하게 사용된다.

 

✏️ 함수 타입 괄호

let todoList: (() => string) | undefined;

todoList 변수는 함수 또는 undefined 값을 가질 수 있다.

| 연산자를 사용해 undefined 도 todoList 변수에 할당될 수 있는 값 중 하나로 표시했다. 따라서 todoList 가 undefined 일 경우 반환값은 정의되어 있지 않다.

이러한 유형 선언은 함수 또는 undefined 값을 허용하는 변수를 나타내는데 유용하다.

 

✏️ 매개변수 타입 추론

선언된 타입의 위치에 제공된 함수의 매개변수 타입을 유추할 수 있다.

let singer: (song: string) => string;

singer = function (song) {
    // song: stirng
    return 'Singing: ${song.toUpperCase()}!'; // Ok
}

singer 변수는 string 타입의 매개변수를 갖는 함수로 알려져있으므로 나중에 singer 가 할당되는 함수 내의 song 매개변수는 string 으로 예측된다.

 

forEach 메서드의 콜백 함수에서는 매개변수 song과 index의 타입이 명시되지 않았다. 그러나 TypeScript는 문맥과 코드의 구조를 기반으로 타입을 추론한다.

song 과 index 매개변수는 타입스크립트에 따라 각각 string 과 number 로 유추된다.

const songs = ["Call Me", "Jolene", "The Chain"];

// song: string
// index: number
songs.forEach((song, index) => {
    console.log(`${song} is at index ${index}`);
})

콜백 함수의 첫 번째 매개변수 song은 songs 배열의 각 요소를 나타내므로, TypeScript는 songs 배열이 문자열로 구성되어 있으므로 song의 타입을 자동으로 문자열로 추론한다.

forEach 함수 두 번째 매개변수 index는 배열의 인덱스를 나타내므로, TypeScript는 forEach 메서드를 호출한 배열의 인덱스 타입을 유추하여 index의 타입을 숫자로 추론합니다.

 

✏️ 콜백 매개변수

함수 타입은 콜백 매개변수(함수로 호출되는 매개변수)를 설명하는 데 자주 사용된다.

const todos = ["자바스크립트", "리액트", "타입스크립트"];

function todo(getTodos: (index: number) => string) {
    for (let i = 0; i < todos.length; i+=1){
        consolw.log(getTodos(i));
    }
}

function getTodos(index: number){ // 매개변수가 number이다.
    return `${todos[index]}`; // 반환값이 배열의 인수 즉 string 이다.
}

todo(getTodos); // Ok

function logTodo(log: string){ // 매개변수가 string이다.
    return `${log}`; // 반환값이 string이다.
}

todo(logTodo);
// Error 🔥: Argument of type '(log: string) => string' is not
// assignable to parameter of type '(idex: number) => string'. => 두 함수의 타입 출력
//   Types of parameters 'log' and 'index' are incompatible. => 일치하지 않는 부분을 지정
//     Type 'number' is not assignable to type 'string'. => 일치하지 않는 부분에 대한 정확한 할당 가능성 오류를 출력

함수의 매개변수로 함수가 올 수 있는데, 이 함수의 매개변수의 타입을 지정해줄 수 있다.

즉, 함수의 매개변수로 들어온 함수(콜백 매개변수)의 타입을 지정해줄 수 있다.

만약 함수에서 지정한 매개변수로 들어온 함수의 타입이 일치하지 않으면 에러가 발생한다.

 

 

 

---

참고 : 러닝 타입스크립트를 읽고, chat GPT 의 도움을 받아 학습한 내용을 간단하게 정리한 내용입니다.
잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.