프로그래밍풀스택 개발자 / 프론트엔드 개발자

TypeScript에서 콜백 함수의 유형 지정은 어떻게 작동하며, 콜백의 매개변수 및 반환 값 유형을 지정할 때 고려해야 할 사항은 무엇입니까?

Hintsage AI 어시스턴트로 면접 통과

답변

TypeScript에서는 콜백 함수의 유형을 명확하게 설명하는 것이 권장됩니다. 매개변수와 반환 값의 유형을 정의하면 오류를 예방하는 데 도움이 됩니다:

type Callback = (event: string, id: number) => boolean; function useCallback(cb: Callback) { // ... }
  • 모든 매개변수와 반환 값은 명시적으로 유형 지정하는 것이 좋습니다.
  • 함수가 void를 반환할 수 있는 경우(아무것도 반환하지 않음) 이를 명시해야 합니다: () => void.
  • 클로저, this 및 오버로드도 유형 지정 시 고려해야 합니다.
  • 콜백과 함께 사용되는 함수가 외부 상호 작용(예: React/Node.js)과 관련이 있는 경우, 유형은 외부 선언과 일치해야 합니다.

속임수 질문

TypeScript가 자동으로 유형을 유추할 수 있는 경우, 콜백 함수 정의에서 매개변수 및 반환 값의 유형을 반드시 명시해야 합니까?

답변: 필수는 아닙니다. TypeScript는 콜백 인자의 유형을 유추할 수 있지만, 공개 API 및 복잡한 조합 함수의 경우 모든 유형을 명확하게 지정하는 것이 매우 바람직합니다. 이는 유지 보수를 용이하게 하고 함수 계약의 변경 시 원치 않는 오류를 방지하는 데 도움이 됩니다.

주제의 미세한 차이로 인한 실제 오류 사례


이야기

프로젝트에서 반환 값의 유형을 명시하지 않고 콜백을 사용했으며, 한 개발자가 함수에서 기대하는 불리언 대신 문자열을 반환하기 시작했습니다. 이는 기본값이 any 때문에 컴파일 단계에서 오류를 발생시키지 않았지만, 함수의 동작이 깨져서 프로덕션에서 버그가 발생했습니다.


이야기

대형 React 프로젝트에서 이벤트 콜백의 매개변수를 명확하게 유형 지정하는 것을 잊었습니다. 새 버전의 React로 업그레이드할 때 이벤트 유형이 변경되어 코드가 오류와 함께 컴파일 되었습니다. 모든 페이지에서 콜백 함수를 긴급 수정해야 했습니다.


이야기

Node.js 애플리케이션에서 비동기 함수와 함께 사용할 콜백이 유형 지정되지 않았습니다: 수신된 값이 string으로 잘못 인식되었고, 사실은 error 객체였습니다. 유형 불일치로 인해 오류를 올바르게 처리할 수 없었습니다.