#8 타입 공간과 값 공간의 심벌 구분하기

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리

📍Intro

심벌은 이름이 같더라도 타입 또는 값을 나타낼 수 있으며 서로 관련이 없다

// Cylinder = 타입
interface Cylinder {
    radius: number;
    height: number;
}

// Cylinder = 값
const Cylinder = (radius: number, height: number) => ({radius, height})

 

- 모든 값은 타입을 갖지만, 모든 타입이 값을 갖는 것은 아니다.

- type, interface 키워드는 타입 공간에만 존재한다

- "foo" 는 문자열 리터럴 이거나, 문자열 리터럴 타입일 수 있다

 

📍class, enum

- class와 enum은 상황에 따라 타입과 값 두 가지 모두 가능하다

- class가 타입으로 쓰일 때는 프로퍼티와 메서드만 사용되고,

값으로 쓰일 때는 constructor가 사용되어야 한다

// class가 타입으로 쓰였을 때
class Cylinder {
    radius = 1;
    height = 1;
}

function calculateVolume(shape: unknown) {
    if (shape instanceof Cylinder) {
        shape; // 타입: Cylinder
        shape.radius; // 타입 : number
    }
}

 

📍typeof 연산자

- typeof 연산자는 타입과 값 둘 다에 쓰일 수 있다

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

const p: Person = { first: "Jane", last: "Jacobs" };

function email(p: Person, subject: string, body: string): Response {
    // ...
}

type T1 = typeof p; // 타입 = Person
type T2 = typeof email; // 타입 = (p: Person, subject: string, body: string) => Response

const v1 = typeof p; // 값 = "object"
const v2 = typeof email; // 값 = "function"

 

- 원래 자바스크립트에서는 typeof 연산자는 런타임에서의 값의 타입을 반환한다

 

- typeof 연산자가 반환하는 타입 6가지

- string, number, boolean, function, object, undefined

(null 은 object로 반환된다)

 

- 이외에 프로퍼티 참조 연산자 [] 와 this 도 값, 타입 2가지 모두에 쓰인다