DIL: 이펙티브 타입스크립트

스터디: 월간 CS, https://github.com/monthly-cs/2024-05-effective-typescript
작성일: 2024-05-16
작성자: dusunax

---

아이템 8: 타입 공간과 값 공간의 심벌 구분하기 Know How to Tell Whether a Symbol Is in the Type Space or Value Space

• symbol은 타입 공간(type space)이나 값 공간(value space) 중 한 곳에 위치
  • 이름이 같더라도, 속하는 공간에 따라 다른 것을 나타낼 수 있다

타입 공간과 값 공간의 심벌

interface Cylinder {
  radius: number;
  height: number;
} // Cylinder는 타입. Type space

const Cylinder = (radius: number, height: number) => ({ radius, height }); // Cylinder는 함수. Value space

// 오류 상황
function calculateVolume(shape: unknown) {
  if (shape instanceof Cylinder) {
    shape.radius;
    //    ~~~~~~ Property 'radius' does not exist on type '{}'
    // 런타임에 Cylinder 심볼을 값으로 연산하려 했으므로, 값 공간의 함수 Cylinder를 참조한다
  }
}

• symbol이 value인지 type인지는 문맥을 살펴 알아내야 한다
• typescript playground를 활용하면서 컴파일된 자바스크립트 결과물을 함께 보면서 type space & value space 개념 잡기
  • type, interface는 type
  • const, let, var는 value
  • 자바스크립트 컴파일 후 제거되면 type 정보
  • 자바스크립트 컴파일 후 남으면 value 정보
  • 타입 선언 또는 단언문 다음에 나오는 심벌은 type
  • = 다음에 나오는 심벌은 value
  • class와 enum은 상황에 따라 type 또는 value

interface Person {
  first: string;
  last: string;
}
const jane: Person = { first: "Jane", last: "Jacobs" };
//    ――――           ――――――――――――――――――――――――――――――――― Values
//          ―――――― Type

function email(to: Person, subject: string, body: string): Response {
  //     ――――― ――          ―――――――          ――――                    Values
  //               ――――――           ――――――        ――――――   ―――――――― Types
  // ...
}

class, enum

• 클래스가 타입으로 쓰일 때는: 형태(속성과 메서드)가 사용됨
• 클래스가 값으로 쓰일 때는 생성자가 사용됨

class Cylinder {
  radius: number;
  height: number;
  constructor(radius: number, height: number) {
    this.radius = radius;
    this.height = height;
  }
}

function calculateVolume(shape: unknown) {
  if (shape instanceof Cylinder) {
    // Cylinder를 값으로 연산
    // 생성자가 사용됨
    shape;
    // ^? (parameter) shape: Cylinder, 타입으로 참조
    // 형태(속성과 메서드)가 사용됨
    shape.radius;
    //    ^? (property) Cylinder.radius: number, 타입으로 참조
  }
}

• typeof는 값을 읽어서, 타입을 반환합니다
  • type space(타입 공간)의 typeof는 subset으로 사용할 수 있고, type 구문으로 이름을 붙이는 용도로 사용할 수 있다.
  • value space에서, typeof는 자바스크립트 런타임의 typeof이 된다.
    • 6개의 런타임 타입만 존재해왔다. (string, number, boolean, undefined, object, function)

interface Person {
  first: string;
  last: string;
}
const jane: Person = { first: "Jane", last: "Jacobs" };
const email = (to: Person, subject: string, body: string) => {};

type T1 = typeof jane;
//   ^? type T1 = Person
type T2 = typeof email;
//   ^? type T2 = (to: Person, subject: string, body: string) => Response

const v1 = typeof jane; // Value is "object"
const v2 = typeof email; // Value is "function"

console.log(v1, v2); // "object",  "function"

클래스와 타입

class Cylinder {
  radius: number;
  height: number;
  constructor(radius: number, height: number) {
    this.radius = radius;
    this.height = height;
  }
}

const v = typeof Cylinder; // Value is "function"
// 클래스가 자바스크립트에서는 함수로 구현되기 때문에, v는 function이다.
type T = typeof Cylinder; // Type is typeof Cylinder
// T의 Cylinder는 인스턴스의 타입이 아니라, 생성자 함수이다.
// T를 value space에서는 확인할 수 없음. (타입이기 때문)

console.log(v); // "function"

• 예제의 코드(그런데? 타입만 선언하면 런타임 오류: fn is not defined)
  • declare
    • declare는 타입스크립트에서 변수, 함수, 클래스 등이 이미 다른 곳에서 정의되어 있다고 선언하는 키워드
    • 컴파일러에게 해당 식별자에 대한 정보를 제공하고 실제 구현을 제공하지 않는 것
  • InstaceType 제너릭을 사용해 생성자 타입과 인스턴스 타입을 전환

declare let fnA: T; // 타입이 생성자 typeof Cylinder임을 확인 가능(fn is not defined)
let fnB: T = Cylinder; // 선언과 함께 값을 할당해주면 함수를 실행할 수 있음
type fnC = InstanceType<typeof Cylinder>; // 타입이 생성자 typeof Cylinder임을 확인 가능(fn is not defined)

const c = new fnB(10, 5);
console.log(v, c);