🔥 원시 타입: string/number/boolean/bigint/symbol
작은 한 줄에 손이 멈췄다
bunx tsc --noEmit 을 돌렸을 때 나는 null 이 string 에 들어가지 않는다는 에러에서 잠깐 멈췄다. 내 머릿속에서는 문자열 값이 없다는 뜻이면 null 도 당연히 들어갈 것 같았다. 그런데 TS 6.0 strict 기본에서는 그 줄을 그냥 넘기지 않았다. 내가 원시 타입을 다시 살핀 이유는 이 지점이었다. string, number, boolean 처럼 쉬워 보이는 이름도 실제로는 값의 범위를 구체적으로 제한한다.
원시 타입은 객체가 아닌 값의 기본 단위다. TypeScript 에서 먼저 익힐 값은 string, number, boolean, bigint, symbol 다섯 가지다. ECMAScript 사양에는 null 과 undefined 도 원시 값에 들어가지만, 두 값은 strict 기본에서 다른 타입에 자동으로 들어가지 않는 별도 검사 대상이다. 콜론으로 타입을 적는 표기는 앞에서 이미 다뤘다.
다섯 가지 원시 타입
다섯 가지 원시 타입은 값의 종류를 직접 제한한다. 문자열은 string, 숫자는 number, 참거짓은 boolean 으로 받는다. 큰 정수는 bigint 로 받는다. 매번 새로 만드는 고유한 값은 symbol 로 받는다.
// file: primitives.ts
export {};
const title: string = "TypeScript";
const score: number = 99.5;
const isPublished: boolean = true;
const largeId: bigint = 9007199254740993n;
const uniqueKey: symbol = Symbol("user-id");
console.log(title, score, isPublished, largeId, uniqueKey);// file: primitives.ts
export {};
const title: string = "TypeScript";
const score: number = 99.5;
const isPublished: boolean = true;
const largeId: bigint = 9007199254740993n;
const uniqueKey: symbol = Symbol("user-id");
console.log(title, score, isPublished, largeId, uniqueKey);string 은 따옴표로 감싼 텍스트를 받는다. number 는 정수와 소수를 함께 받는다. boolean 은 true 와 false 두 값만 받는다. 이 셋은 자바스크립트 코드에서 가장 자주 나온다.
bigint 는 정수 전용 타입이다. 리터럴 끝에 n 을 붙여 1n 처럼 적는다. number 와 섞어 계산하지 않는다. 큰 식별자나 정밀한 정수 계산처럼 소수점이 필요 없는 값에 맞는다.
symbol 은 고유한 키가 필요할 때 사용한다. Symbol("user-id") 의 문자열은 설명일 뿐이고, 같은 설명을 넣어도 새 값은 서로 다르다. 그래서 일반 문자열 키와 달리 충돌을 피하는 데 쓴다.
null 과 undefined 는 자동으로 섞이지 않는다
null 과 undefined 는 값이 없다는 상황을 표현하지만, strict 기본에서는 다른 타입에 자동으로 들어가지 않는다. string 이라고 적은 변수에는 문자열만 들어간다. 값이 없을 가능성까지 받으려면 타입에 그 가능성을 직접 적어야 한다.
// file: null-vs-undefined.ts
export {};
let displayName: string = "Mejoo";
// displayName = null;
let nullableName: string | null = null;
let optionalName: string | undefined = undefined;
function loadName(found: boolean): string | null {
if (found) {
return "Mejoo";
}
return null;
}
console.log(displayName, nullableName, optionalName, loadName(false));// file: null-vs-undefined.ts
export {};
let displayName: string = "Mejoo";
// displayName = null;
let nullableName: string | null = null;
let optionalName: string | undefined = undefined;
function loadName(found: boolean): string | null {
if (found) {
return "Mejoo";
}
return null;
}
console.log(displayName, nullableName, optionalName, loadName(false));주석을 풀어 displayName = null 을 넣으면 TS 6.0 strict 기본에서 컴파일러가 멈춘다. 메시지는 Type 'null' is not assignable to type 'string'. 이다. 이 메시지는 null 값을 string 변수에 넣을 수 없다는 뜻이다. strictNullChecks 가 이 차이를 실제 검사로 다룬다. TypeScript 는 string 과 null 을 별개의 타입으로 본다.
값 없음까지 허용하려면 유니온 타입을 쓴다. string | null 은 문자열 또는 null 을 받겠다는 뜻이다. string | undefined 도 같은 방식으로 읽는다. 이 표기는 값이 없을 수 있는 함수 반환값, 아직 채워지지 않은 상태값, 외부 입력을 다룰 때 중요하다.
null 과 undefined 를 같은 뜻으로 섞으면 분기 조건이 모호하다. null 은 보통 일부러 비워 둔 값에 맞고, undefined 는 아직 값이 없거나 프로퍼티가 빠진 상황에 맞다. 프로젝트마다 규칙은 다를 수 있지만, 타입에는 허용 범위를 직접 적어야 한다는 점은 같다.
void 는 반환 타입에서 읽는다
void 는 값의 종류라기보다 반환값을 쓰지 않겠다는 약속에 가깝다. 함수가 호출자에게 의미 있는 값을 돌려주지 않을 때 (): void 라고 적는다. 그래서 변수에 담을 값의 타입으로 익히기보다 함수 시그니처에서 먼저 읽는 편이 낫다.
// file: void-fn.ts
export {};
type LogLine = (message: string) => void;
const log: LogLine = (message) => {
console.log(message);
return message.length;
};
function announce(message: string): void {
console.log(message);
// return message.length;
}
log("saved");
const result = announce("ready");
console.log(result);// file: void-fn.ts
export {};
type LogLine = (message: string) => void;
const log: LogLine = (message) => {
console.log(message);
return message.length;
};
function announce(message: string): void {
console.log(message);
// return message.length;
}
log("saved");
const result = announce("ready");
console.log(result);LogLine 은 콜백의 반환값을 호출자가 쓰지 않는다는 뜻이다. 그래서 콜백 본문이 숫자를 반환해도 호출 결과는 TypeScript 에서 void 로 취급되어 사용할 수 없다 (자바스크립트 런타임은 그 값을 그대로 반환하지만, 타입 검사 단계에서는 보이지 않는다). 반면 announce 처럼 함수 선언에 : void 를 직접 붙이면 본문에서 의미 있는 값을 반환할 수 없다. 주석을 풀면 Type 'number' is not assignable to type 'void'. 메시지가 나온다. 이 메시지는 숫자 반환값을 void 반환 타입으로 볼 수 없다는 뜻이다.
void 와 undefined 는 같은 말이 아니다. undefined 는 실제 값이고 타입 이름이기도 하다. void 는 반환값을 신경 쓰지 않는 함수 계약에 더 가깝다. 그래서 이벤트 핸들러, 로그 함수, 콜백 타입에서 자주 나온다.
작은 타입 이름이 큰 검사를 만든다
원시 타입 이름은 짧지만 검사 범위는 분명하다. string, number, boolean 은 일상적인 값의 대부분을 받는다. bigint 는 큰 정수 계산을 따로 분리한다. symbol 은 고유한 키를 만든다.
null 과 undefined 는 strict 기본에서 원시 타입 안으로 자동 편입되지 않는다. 값 없음이 정상 입력이라면 string | null 처럼 허용 범위를 직접 넓힌다. void 는 반환 타입에서 읽는다. 이 기준을 잡아 두면 변수 선언과 함수 시그니처에서 타입 이름이 훨씬 또렷하다.
YouTube 영상
