타입으로 쓸 수 있는 것을 구분하자

값(Value)과 타입(Type)의 차이, 그리고 typeof 활용

타입스크립트를 배우다 보면 값과 타입의 개념이 헷갈릴 수 있다. 값은 일반적으로 자바스크립트에서 사용하는 값을 가리키고, 타입은 타입을 위한 구문에서 사용하는 타입을 가리킨다.

 

타입을 값으로 사용할 수는 없다!  그러므로 우리는 타입으로 사용할 수 있는 값과 타입으로 사용할 수 없는 값만 구분하면 된다

 

구분	설명
값(Value)	실제 프로그램에서 사용하는 데이터 (3, 'hello', {} 등)
타입(Type)	변수, 함수, 객체 등이 가질 수 있는 값의 형식을 정의하는 것

 

const num: number = 123;  // ✅ 'number'는 타입
const str: string = "hello"; // ✅ 'string'은 타입

const obj = { key: "value" };  // ✅ 'obj'는 값 (객체)
const obj2: { key: string } = { key: "value" }; // ✅ '{ key: string }'은 타입

 

리터럴 값 (primitive values) → 타입으로 사용 가능

• number, string, boolean, null, undefined, symbol
• "hello", 42, true 등의 리터럴 값도 타입으로 사용 가능 (리터럴 타입)

const value = 123;
const test: value = 123; // ❌ 에러! (값을 타입으로 사용할 수 없음)

 

❌ 일반 변수(변수 이름)는 타입으로 사용할 수 없음

• 변수를 타입으로 사용하려 하면 에러 발생

const str1: String = "hello";  // ❌ 비권장! (래퍼 객체)
const str2: string = str1; // ❌ 'String'은 'string'과 다름

 

하지만 String, Number 등의 래퍼 객체는 타입으로 사용하지 말 것! String, Number 객체 대신 string, number 등의 원시 타입을 사용하자. 

 

 

클래스, 내장 객체는 타입으로 사용 가능

• Date, Math, Error, Object, Number, Boolean 같은 내장 객체는 타입으로 사용할 수 있다 

 

 

타입으로 쓸 수 있는 값, 쓸 수 없는 값을 외우기 어렵다면 일단 타입으로 표기해보면 된다. 실수로 타입으로 쓸 수 없는 값을 타입으로 사용하면 타입스크립트가 친절하게 에러 메시지로 알려 주기 때문! 

 

typeof를 사용해서 타입 추론

어떤 값을 타입으로 사용하고 싶다면, typeof를 사용하면 해결 가능하다. 

 

function add(x: number, y: number) {
  return x + y;
}

const add2: typeof add = (x, y) => x + y;  // ✅ typeof를 사용하면 함수 타입을 가져올 수 있음

 

하지만 함수의 반환값을 타입으로 직접 사용할 수 없다! 

 

const result1: add(1, 2) = add(1, 2);  // ❌ 에러 발생!
const result2: typeof add(1, 2) = add(1, 2);  // ❌ 에러 발생!

 

이 때 ReturnType 유틸리티 타입 사용하면 함수의 반환값을 타입으로 가져올 수 있다. 

 

type AddReturnType = ReturnType<typeof add>; // ✅ 함수의 반환값을 타입으로 가져오기

 

 

클래스(Class)는 타입으로 사용 가능하다

 

클래스 이름은 별도의 typeof 없이 타입으로 사용할 수 있음.

 

class Person {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
}

const person: Person = new Person("zero");  // ✅ 클래스 이름은 타입으로 사용 가능!

 

구분	값으로 사용 가능한가?	타입으로 사용 가능한가?	설명
number, string 등	✅ 가능	✅ 가능	일반적인 값과 타입으로 사용 가능
"hello", 42 등 리터럴 값	✅ 가능	✅ 가능	리터럴 타입으로 사용 가능
일반 변수 (예: const value = 123;)	✅ 가능	❌ 불가능	변수 자체는 타입으로 사용할 수 없음
Date, Math 등 내장 객체	✅ 가능	✅ 가능	일부 내장 객체는 타입으로도 사용 가능
String, Number 등 래퍼 객체	✅ 가능	❌ 권장하지 않음	string, number를 대신 사용할 것
클래스(Class)	✅ 가능	✅ 가능	클래스는 타입으로 바로 사용 가능
typeof 변수	✅ 가능	✅ 가능	typeof를 사용하면 변수의 타입을 추론 가능