아이템 8

값 공간과 타입 공간

// 타입으로 쓰인 Cylinder
interface Cylinder {
  radius: number;
  height: number;
}

// 값으로 쓰인 Cylinder
const Cylinder = (radius: number, height: number) => ({ radius, height });

위 예제는 에러가 나지 않는다. 왜냐면
두 Cylinder는 다르다. 위의 Cylinder는 타입으로 쓰였고, 아래 const Cylinder는 값으로 쓰였다.

=>타입스크립트에서 값 공간과 타입 공간이 다르다.

예시)

// instanceof는 javascript 런타임 연산자이고 해당 표현은 값에 대해 연산한다. => 여기서 Cylinder는 타입이다.
function calculateVolume(shape: unknown) {
  if (shape instanceof Cylinder) {
    // shape.radius;  => 에러
  }
}

일반적으로 :는 타입을 나타내고 =는 값을 나타낸다.

class와 enum은 타입 공간과 값 공간 모두 가능하다.

class Cylinder {
  radius = 1;
  height = 1;
}

function calculateVolume2(shape: unknown) {
  if (shape instanceof Cylinder) {
    shape.radius; // 에러 발생 X => 값 공간으로 사용
  }
}

typeof는 타입으로 쓰일 때와 값으로 쓰일 때 다르게 동작한다.

interface Person {
  first: string;
  last: string;
}

const p: Person = { first: "JANE", last: "JACOBS" };

// typeof는 타입으로 쓰일 때와 값으로 쓰일 때가 다른 기능을 한다.
type T1 = typeof p; // 타입은 Person8

const v1 = typeof p; // 값은 'object' => 런타임의 typeof 연산자

InstanceType<>은 생성자 함수의 리턴타입을 반환한다.

이러한 성질을 이용하여 생성자 타입과 인스턴스 타입을 전환할 수 있다.

const v = typeof Cylinder; // 값이 'function'

type T8 = typeof Cylinder; // 타입이 typeof Cylinder  =>  === Cylinder 생성자 함수

// InstanceType: 생성자 함수의 리턴 타입을 얻는다.
// InstanceType 제네릭을 이용하여 생성자 타입과 인스턴스 타입을 전환할 수 있다.

type C = InstanceType<typeof Cylinder>; // 타입이 Cylinder

[]를 이용하여 속성의 타입에 접근할 수 있다.

const first: Person8["first"] = p["first"]; // []를 이용하여 속성의 타입에 접근 가능하다.

출처 - 이펙티브 타입스크립트 (댄 밴더캄 지음, 장원호 옮김)