객체 래퍼 타입 지양하기 & 함수 표현식과 타입스크립트

객체 래퍼 타입

객체 래퍼 타입은 원시 타입의 값을 감싸는 형태의 객체이다. 예를 들어 string -> String, number -> Number 이런 식으로 사용한다. 기본 원시 타입들은 불변이며 메서드를 가지지 않는 점이 객체와 구분된다.

"apple".charAt(2);
// "p"

하지만 이 코드를 보면 기본 원시 타입도 메서드를 가진 것처럼 보인다. 사실 charAt는 string의 메서드가 아니고 자바스크립트 내부에서 string을 String으로 바꿔서 사용하기 때문에 charAt 같은 메서드를 사용할 수 있다. 즉, 기본형(원시 타입)과 객체 타입을 서로 자유롭게 변환 가능하다. 따라서 이 과정에서 string을 String 객체로 래핑(wrap)하고 이후 마지막으로 래핑한 객체를 버린다.

let x = "hello";
x.language = "English";
console.log(x.language); // undefined

위에서 말했듯이 마지막으로 래핑된 객체는 버려져서 위 코드의 출력값이 undefined가 나온다.

 

string은 String에 할당할 수 있지만 String은 string에 할당할 수 없다. 따라서 기본형(원시 타입)을 주로 사용하는 것이 좋은 방법이다.

---

함수 표현식

function rollDice1(sides: number): numbuer {/*...*/} // 문장
const rollDice2 = function(sides: number): number {/*...*/}; // 표현식
const rollDice3 = (sides: number): number => {/*...*/}; // 표현식

타입스크립트에서는 함수 표현식을 사용하는 것이 좋다. 그래야 재사용하기 좋다.

 

-재사용 간단한 예시

type DiceRollFn = (sides: number) => number;
const rollDice: DiceRollFn = sides => {/*...*/};

이렇게 코딩을 하고 rollDice의 sides에 마우스를 올려보면 number가 뜬다.

 

-재사용 복잡한 예시

// 재사용 안 한 코드
function add(a: number, b: number) {
  return a + b
}
function sub(a: number, b: number) {
  return a - b
}
function mul(a: number, b: number) {
  return a * b
}
function div(a: number, b: number) {
  return a / b
}

// 재사용 한 코드
type BinaryFn = (a: number, b: number) => number
const add: BinaryFn = (a, b) => a + b
const sub: BinaryFn = (a, b) => a - b
const mul: BinaryFn = (a, b) => a * b
const div: BinaryFn = (a, b) => a / b

이 코드에서만 봐도 함수 타입 선언으로 코드의 반복을 줄일 수 있다.

 

함수 매개변수에 타입 선언을 하는 것보다 함수 표현식 전체 타입을 정의하는 것이 코드의 안정성과 가독성을 높혀준다. 다른 함수의 시그니처와 동일 한 타입을 가지는 함수 작성, 동일한 타입을 가지는 여러 개의 함수를 작성할 때는 위처럼 타입을 반복하지 않고 타입 선언을 적용하면 좋다.