강의

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

김준희님의 프로필 이미지
김준희

작성한 질문수

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

함수 타입 표현식과 호출 시그니쳐

안녕하세요, 7:33초 하이브리드 타입 설명 관련하여 질문드립니다.

해결된 질문

작성

·

44

·

수정됨

0

아래는 해당 강의내용 코드입니다.

type Operation2 = {
  (a: number, b: number): number;
  name:string
};

const add2: Operation2 = (a, b) => a + b;
const sub2: Operation2 = (a, b) => a - b;
const mult2: Operation2 = (a, b) => a * b;
const div2: Operation2 = (a, b) => a / b;

이 때 name 프로퍼티는 string으로 명시적으로 선언되었는데, 함수 타입이 Operaiton2 라고 정의된 oper2 꼴의 함수들에 name 프로퍼티를 정의하지 않았음에도 에러가 나지않는 이유가 궁금합니다!

감사합니당

답변 2

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

AI 인턴의 답변대로 자바스크립트에서는 변수에 함수를 할당하면서, 동시에 다른 프로퍼티의 값을 할당하는 동작은 가능하지 않습니다. 따라서 함수 할당 이후에 별도로 할당하는 쪽으로 프로퍼티를 추가 할당해 주어야 합니다. 그리고 타입스크립트에서도 이런 자바스크립트의 설계에 맞춰 이런 코드를 오류로 평가하지 않습니다.

0

안녕하세요, 인프런 AI 인턴입니다. 김준희님.

타입스크립트에서 타입 정의에 프로퍼티를 포함하면서도 함수 타입을 구현할 때 프로퍼티가 누락되어도 에러가 발생하지 않는 이유에 대해 설명드리겠습니다.

타입스크립트의 하이브리드 타입

하이브리드 타입은 함수 타입과 객체 타입이 결합된 형태입니다. Operation2 타입은 함수와 프로퍼티name을 동시에 가지는 하이브리드 타입입니다.

하지만, 함수 타입을 직접 변수에 할당하면서 객체 속성을 부여하는 것은 일반적으로 타입 수준에서는 가능하지 않으며 이러한 부분은 런타임 시점에 사용하려는 경우에 에러를 발생시킬 가능성이 높습니다.

코드에서는 함수에 대해 주로 타입만을 지정하고 있으므로, 타입스크립트는 함수 부분만 검증합니다. 이는 객체 리터럴 형태로 할당하는 것이 아니기 때문에 객체 속성이 할당되지 않았음에도 컴파일러가 체크를 누락할 수 있습니다.

프로퍼티 할당과 관련한 권장 사항

이러한 하이브리드 타입을 사용할 경우, 함수뿐만 아니라 name과 같은 프로퍼티도 함께 사용해야 할 때 명시적으로 설정하는 것이 권장됩니다. 이 경우 함수로 할당한 후에 별도의 프로퍼티를 추가하는 방법을 사용할 수 있습니다:

const add2: Operation2 = ((a, b) => a + b) as Operation2;
add2.name = "Addition";

console.log(add2(1, 2)); // 정상 작동
console.log(add2.name); // "Addition"

관련 질문 및 학습 자료

비슷한 상황에서 에러가 발생하는 이유 또는 특정 타입 특성에 관한 더 많은 이론적 배경을 이해하려면 아래 링크의 자료 및 강의를 참조하실 수 있습니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

김준희님의 프로필 이미지
김준희

작성한 질문수

질문하기