TypeScript 선택적 매개변수

Javascript에서 함수에 4개의 매개변수가 있고 3개만 사용하는 경우 큰 문제가 되지 않습니다. Javascript는 누락된 매개변수를 무시하고 마치 undefined 인 것처럼 함수를 실행합니다.

TypeScript에서는 상황이 약간 다릅니다. 함수가 실제로 가지고 있는 것과 다른 수의 매개변수로 함수를 실행하려고 하면 오류가 발생합니다. 예를 들어 다음을 고려하십시오.

const myFunction = (a: string, b: string, c?: string) => {
    return a + " " + b + " " + c;
}

let runFunction = myFunction("Hello", "there");

위의 코드는 다음 오류를 발생시킵니다.

Expected 3 arguments, but got 2.

TypeScript는 오류를 줄이기 위해 이렇게 합니다. 호출하는 함수에서 매개변수를 남겨두면 때때로 함수가 중단될 수 있기 때문입니다. 따라서 함수에 정의한 매개변수 중 하나 이상이 선택적임을 TypeScript에 구체적으로 알려야 합니다. 이를 위해 매개변수 뒤에 ?를 사용하여 실제로는 선택적 매개변수임을 나타냅니다.

예를 들어 원래 함수에서 c를 선택 사항으로 만들고 싶다면 다음과 같이 작성할 수 있습니다. 그러면 오류가 발생하지 않습니다.

const myFunction = (a: string, b: string, c?: string) => {
    return a + " " + b + " " + c;
}

let runFunction = myFunction("Hello", "there");

console.log(runFunction);

이제 함수가 예상대로 실행되지만 출력은 Hello there undefined 입니다. 이것은 원하는 동작이 아닐 수 있으며, 이것이 바로 TypeScript에 이러한 컨트롤이 있는 이유입니다. 특정 매개 변수를 요구하여 원하지 않는 결과를 방지하는 데 도움이 될 수 있습니다.

그러나 TypeScript에서는 선택적 매개변수 뒤에 필수 매개변수가 올 수 없습니다. 예를 들어 다음 코드는 작동하지 않습니다.

const myFunction = (a: string, b?: string, c: string) => {
    return a + " " + b + " " + c;
}

다음 오류가 발생합니다.

A required parameter cannot follow an optional parameter.

이 선택 사항을 typeof operator의 사용과 결합하여 의미 있는 코드를 생성할 수 있습니다. 예를 들어 c가 선택 사항이고 정의되지 않은 경우 다음과 같이 무시할 수 있습니다.

const myFunction = (a: string, b: string, c?: string) => {

    if(c === undefined) {
        return a + " " + b;
    }

    return a + " " + b + " " + c;
}

let runFunction = myFunction("Hello", "there");

console.log(runFunction);

이제 코드의 출력은 Hello there 이지만 c 로 실행하여 다른 출력을 생성할 수도 있습니다. 예를 들면 다음과 같습니다.

const myFunction = (a: string, b: string, c?: string) => {

    if(c === undefined) {
        return a + " " + b;
    }

    return a + " " + b + " " + c;
}

let runFunction = myFunction("How", "are", "you?");

// Returns "How are you?"
console.log(runFunction);