[TypeScript] 함수 타입 지정

윤지·2024년 11월 18일

TypeScript

목록 보기
3/12
post-thumbnail

함수의 타입 지정: 매개변수와 반환값의 타입을 명확히 지정하는 것


함수 선언문과 함수 표현식

함수 선언문

  • 함수의 이름과 매개변수 타입, 반환 타입을 명시
function greet(name: string): string {
    return `Hello, ${name}!`;
}

함수 표현식

  • 익명 함수 또는 이름이 있는 함수로 표현
const expr = function (name: string): string {
    return `Hello, ${name}!`;
};

화살표 함수

  • 간결한 문법으로 함수 표현을 줄이는 방법
const exprArrow = (name: string): string => `Hello, ${name}!`;

함수 타입 지정

  • 함수 표현식에서 타입을 명시적으로 지정하는 방법
const expr2: (name: string) => string = function (name) {
    return `Hello, ${name}!`;
};

반환값이 없는 함수 (void 타입)

void리턴값이 없는 함수

function greet(name: string): void {
    console.log(`Hello, ${name}!`);
}

const expr = function (name: string): void {
    console.log(`Hello, ${name}!`);
};

const exprArrow = (name: string): void => console.log(`Hello, ${name}!`);

매개변수의 기본값과 옵셔널

옵셔널 매개변수

  • ?를 사용해 선택적으로 매개변수를 받는 방법
function sum(n1: number, n2?: number): number {
    return n1 + (n2 || 0);
}
sum(10); // n2는 기본값 0으로 처리

기본값 매개변수

  • 매개변수에 기본값을 설정하는 방법
function sum(n1: number, n2: number = 0): number {
    return n1 + n2;
}

나머지 매개변수 (Rest Parameters)

숫자 타입 예제

function sum(...rest: number[]): void {
    console.log(rest);
}
sum(1, 2, 3, 4, 5);

여러 타입을 받을 경우

  • 튜플을 사용해 각 매개변수의 타입을 지정하는 방법
function printValue(...rest: [number, string, number, string]): void {
    console.log(rest);
}
printValue(1, "a", 2, "b");

콜백 함수와 타입 지정

콜백 함수

  • 콜백 함수의 매개변수와 반환값에도 타입을 지정하는 방법
const printUser = (callback: (name: string) => void): void => {
    callback("John");
};

printUser((name) => {
    console.log(name);
});

콜백 함수와 조건 처리

function compareNumbers(
    n1: number,
    n2: number,
    callback: (result: string) => void
): void {
    if (n1 === n2) {
        callback("equal");
    } else {
        callback("not equal");
    }
}

compareNumbers(10, 20, (result) => {
    console.log(`The numbers are ${result}`);
});

반환값이 함수인 경우

함수의 반환값으로 또 다른 함수를 반환 가능. 이런 패턴은 클로저에서 많이 사용

function createMultiplier(factor: number): (num: number) => number {
    return (num) => num * factor;
}

const func = createMultiplier(10);
console.log(func(5)); // 50

never 타입

never절대 반환되지 않는 함수를 나타냄. 예를 들어, 무한 루프에러를 던지는 함수에 사용

function errorFunc(message: string): never {
    throw new Error(message);
}

출처: 수코딩

profile
프론트엔드 공부 기록 아카이빙🍁

0개의 댓글