Web/JavaScript

[TypeScript] TSError: ⨯ Unable to compile TypeScript: Operator '+' cannot be applied to types 'T' and 'T'

wjdwwidz 2023. 10. 18. 18:01

generic 함수

여러 타입을 처리할 수 있는 generic 함수를 구현
두 개의 인자를 받아 값을 반환하는 함수를 구현

 

지시사항

  1. generic T의 타입으로 number와 string, boolean만 가능하도록 제약조건을 추가하세요.
  2. T가 number라면 두 수를 더한 값을 반환하세요.
  3. T가 string이라면 두 문자열을 이어붙인 값을 반환하세요.
  4. T가 boolean이라면 두 값을 or 연산을 한 값을 반환하세요.

실행 결과

28
hello
true

정답 코드

function add<T extends number | string | boolean>(a: T, b: T): T {
  if(typeof(a)==="boolean"){
      return a||b;
  }

  return <any>a + <any>b;
}

console.log(add<number>(13, 15));
console.log(add<string>("hell", "o"));
console.log(add<boolean>(false, true));

// console.log(add<number>(3, "5"));


의문점

타입스크립트가 자동으로 타입을 인지하는 기능도 있다고 들어서 처음엔 return에 any를 붙여주지 않고 코드를 실행했는데, 실행이 되지 않았다.


 

Sol )

input 값의 타입을 보면 num,string,boolean으로 세 가지이다. 하지만  + 연산자가 적용되는 자료 구조는 number, string 뿐이기 때문에, 만일 그 외의 타입이 들어왔을 때 + 연산자가 기능하지 못하므로 타입스크립트가 에러를 내는 것이었다. 

그래서 boolean인 경우 return a || b 해주는 처리에 속하지 못하는, 그러면서 string 또는 number가 아닌 경우가 올 때 일부러 any를 써서 타입 캐스팅을 통해 에러를 회피하게 된다. 그 말은, 타입스크립트 자동인지 기능 또한 위와 같은 조건으로 실행된다는 것을 알 수 있다. TS에서 boolean 을 +하면 논리곱이나 논리합 연산자로 적용할 줄 알았는데, 틀린 생각이었다.

 

any를 안 붙이면 실행이 안 되는 건 타입스크립트 입장에서는 지극히 당연한 결과였다.