원시 자료형에도 브랜딩 기법 사용 가능

유니온 타입과 원시 타입이 합쳐졌을 때 원시 타입으로 추론되는것을 피하려면

type PluginId_2 = 'basic' | 'svg-to-3d' | (string & {})

와 같이 (원시타입 & {}) 로 원시타입도 허용하면서 선언된 유니온 타입도 추론되게끔 설정 가능

원시 자료형 브랜딩 기법

자바스크립트에서는 할 수 없었던 것을 가능하게 하는 타입스크립트만의 기법

• string, number 같은 원시 자료형 타입도 더 세밀하게 구분 가능

function kmToMile(km: number) {
  return km * 0.62;
}
const mile = kmToMile(3);

• 자바스크립트 입장에서 3이라는 수자가 있을 때 이게 3이 킬로미터 단위인지 마일 단위인지 알 수가 없다.

  • 숫자라는 타입은 있고 킬로미터, 마일이라는 타입은 없기 때문

• 이 때 브랜딩 기법을 사용해서 더 구체적인 타입을 지정 가능

Brand Type

브랜딩기법을 통해 타입을 세분화

type Brand<T, B> = T & { _brand: B };

• T는 원래 자료형을 의미, B는 새로 만들 자료형을 의미

• & 연산자로 원래 자료형과 새로 만들 자료형을 합친다.

• 객체 타입이 아니더라도 & 연산자를 사용 가능

• 원래부터 존재하던 타입이 아니므로 as로 강제 변환해야 한다.

• 타입을 더 정밀하게 활용할수록 안정성도 더 올라가므로 애용하자.

type KM = Brand<number, 'km'>;
type Mile = Brand<number, 'mile'>;

function kmToMile(km: KM) {
  return km * 0.62 as Mile;
}

const km = 3 as KM;
const mile = kmToMile(km); // mile
const mile2 = 5 as Mile;
// error, Argument of type 'Mile' is not assignable to parameter of type 'KM'
kmToMile(mile2);