답변.

선택적 함수 매개변수는 매개변수 이름 뒤에 물음표(?)를 붙여 표시합니다. 객체(인터페이스 또는 타입)의 선택적 속성도 마찬가지입니다.

함수의 경우:

function greet(name?: string) {
  console.log(`Hello, ${name ?? 'stranger'}`);
}
greet(); // Hello, stranger
greet('John'); // Hello, John

객체의 경우:

interface User {
  id: number;
  nickname?: string;
}
const u1: User = { id: 1 };
const u2: User = { id: 2, nickname: 'Bob' };

주요 사항:

선택적 매개변수는 함수 호출 시 전달하지 않아도 되며, 그 경우 값은 undefined가 됩니다.
선택적 속성은 객체에 존재하지 않을 수 있습니다.
혼동하지 마세요: 인터페이스에서 속성이 선택적이지 않게 정의된 경우 필수입니다!
선택적 매개변수는 함수의 인수 목록에서 마지막에 위치해야 합니다.

함정이 있는 질문.

문자열 타입의 선택적 매개변수를 가진 함수가 (function fn(x?: string)) 명시적으로 undefined로 호출할 수 있나요? fn()과 fn(undefined)의 차이는 무엇인가요?

답변: 네, undefined로 호출할 수 있습니다: fn(undefined)와 fn()은 결과가 동일하지만 함수 내부에서는 x === undefined가 됩니다. 그러나 기본값이 시그니처에서 정의되면:

function fn(x: string = 'demo') {
  console.log(x);
}
fn(); // demo
fn(undefined); // demo
fn('abc'); // abc

만약 매개변수가 선택적으로 정의되지 않았다면 (물음표 ?나 기본값이 없음), fn() 호출은 컴파일 오류가 됩니다.

주제에 대한 미숙지로 인해 발생한 실제 오류의 예.

사례

인터페이스 user에서 속성 phone: string(물음표 없이)를 지정했지만, 객체 인스턴스를 생성할 때 이를 추가하는 것을 잊어버렸습니다. 결국 TypeScript 컴파일러는 필수 속성의 부재에 대해 오류를 발생시켰습니다. 일시적인 해결책으로 phone: undefined를 추가했지만, 이는 타입과 맞지 않아서 string !== undefined가 되어 더 많은 유효성 검사 오류를 발생시켰습니다.

사례

함수에 여러 선택적 매개변수를 정의했지만, 이를 인수 목록의 끝에 배치하지 않았습니다. 이로 인해 TypeScript가 오류를 표시했고, 매개변수 위치 변경으로 인해 전달된 값과 매개변수 간의 일치 순서가 달라져 혼동과 잘못된 함수 동작을 초래했습니다.

사례

외부 API에 대한 데이터 타입 설명 중 선택적 필드를 놓쳤습니다 (예: 성이 고객? string). 이로 인해 한쪽에서는 이 필드가 사라졌고, 다른 쪽에서는 undefined 확인 없이 이를 읽으려 할 때 코드가 오류가 발생했습니다.

TypeScript에서 선택적 함수 매개변수와 선택적 객체 속성은 어떻게 작동하며, 이들의 차이점과 사용 시 주의할 점은 무엇인가요? 일반적인 문제와 오류의 예를 제시해주세요.

답변.

함정이 있는 질문.

주제에 대한 미숙지로 인해 발생한 실제 오류의 예.