TypeScript 완전정복 6화: 기본 타입 완벽 이해하기

지난 시간에는 TypeScript가 개발자가 작성한 값을 보고 타입을 알아내는 타입 추론을 배웠습니다.

const userName = "김타입";
const age = 25;
const isLearning = true;

TypeScript는 위 코드를 보자마자 각각의 타입을 알아냅니다.

userName;   // string
age;        // number
isLearning; // boolean

그런데 TypeScript는 어떻게 문자열과 숫자, 참과 거짓을 구분하는 것일까요?

혹시 숫자처럼 생긴 문자열도 숫자로 인정해 줄까요?

const price = "10000";

안타깝지만 TypeScript는 외모가 아니라 실제 타입을 확인합니다.

`"10000"`은 숫자처럼 단정하게 생겼지만, 큰따옴표 안에 들어간 순간 문자열입니다.

TypeScript 세계에서는 복장보다 신분증이 중요합니다. 🪪

이번 시간에는 TypeScript에서 가장 자주 사용하는 세 가지 기본 타입을 알아봅니다.

string
number
boolean

세 타입은 단순해 보이지만 거의 모든 TypeScript 프로그램의 바닥을 이루는 기초 재료입니다.

1. 이번 시간에 배울 내용

이번 시간에는 다음 내용을 알아봅니다.

오늘의 등장인물은 세 명입니다.

string  : 말이 많은 문자열 담당
number  : 계산에 진심인 숫자 담당
boolean : 대답은 오직 true 또는 false

이제 TypeScript 기본 타입 삼총사를 만나보겠습니다.

2. 기본 타입이란?

프로그램에서는 다양한 종류의 값을 사용합니다.

const name = "김타입";
const age = 25;
const isDeveloper = true;

`"김타입"`은 문자로 이루어진 값입니다.

`25`는 계산할 수 있는 숫자입니다.

`true`는 참과 거짓 중 하나를 나타내는 값입니다.

TypeScript는 값의 종류에 따라 서로 다른 타입을 사용합니다.

타입은 값이 어떤 성격을 가졌는지 알려주는 이름표입니다.

const userName: string = "김타입";
const age: number = 25;
const isLearning: boolean = true;

TypeScript는 이 이름표를 확인해 잘못된 값이 들어오는 것을 막아줍니다.

3. `string` 타입이란?

`string`은 문자열을 나타내는 타입입니다.

문자열은 글자, 문장, 기호처럼 문자로 이루어진 값을 말합니다.

const userName: string = "김타입";
const message: string = "TypeScript를 공부합니다.";
const symbol: string = "!@#$%";

한 글자만 있어도 문자열입니다.

const grade: string = "A";

숫자처럼 보이더라도 따옴표 안에 들어 있으면 문자열입니다.

const age: string = "25";
const price: string = "10000";

`"25"`는 숫자가 아니라 문자 `"2"`와 `"5"`가 이어진 문자열입니다.

따라서 일반적인 숫자 계산에 바로 사용할 수 없습니다.

4. 문자열을 만드는 세 가지 방법

JavaScript와 TypeScript에서는 문자열을 세 가지 방식으로 표현할 수 있습니다.

const message: string = "Hello TypeScript";

const message: string = 'Hello TypeScript';

const message: string = `Hello TypeScript`;

세 방식 모두 문자열을 만들 수 있습니다.

const first: string = "큰따옴표";
const second: string = '작은따옴표';
const third: string = `백틱`;

프로젝트에서는 큰따옴표나 작은따옴표 중 하나를 정해 일관되게 사용하는 경우가 많습니다.

백틱은 문자열 안에 변수나 계산 결과를 넣을 때 특히 유용합니다.

5. 문자열 안에 따옴표 넣기

문자열 안에 같은 종류의 따옴표를 사용하면 문제가 생길 수 있습니다.

const message = "그는 "안녕하세요"라고 말했다.";

TypeScript는 어디까지가 문자열인지 구분하지 못합니다.

이럴 때는 바깥쪽과 안쪽의 따옴표를 다르게 사용할 수 있습니다.

const message = '그는 "안녕하세요"라고 말했다.';

반대 방식도 가능합니다.

const message = "It's TypeScript time!";

같은 따옴표를 사용해야 한다면 이스케이프 문자인 `\`를 사용할 수 있습니다.

const message = "그는 \"안녕하세요\"라고 말했다.";

결과는 다음과 같습니다.

그는 "안녕하세요"라고 말했다.

따옴표가 서로 충돌하기 시작하면 백틱도 좋은 해결책입니다.

const message = `그는 "TypeScript는 재미있어!"라고 말했다.`;

따옴표끼리 자리싸움을 벌일 때 백틱은 조용히 회의실을 하나 더 열어줍니다.

6. 템플릿 리터럴이란?

백틱으로 만든 문자열을 템플릿 리터럴이라고 합니다.

const message = `Hello TypeScript`;

템플릿 리터럴에서는 `${}`를 사용해 변수나 표현식을 문자열 안에 넣을 수 있습니다.

const userName: string = "김타입";
const message: string = `안녕하세요, ${userName}님!`;

console.log(message);

출력 결과는 다음과 같습니다.

안녕하세요, 김타입님!

문자열 연결 연산자를 사용하면 다음처럼 작성할 수도 있습니다.

const message = "안녕하세요, " + userName + "님!";

하지만 연결할 값이 많아지면 코드가 복잡해집니다.

const userName = "김타입";
const age = 25;

const message =
  "안녕하세요. 제 이름은 " +
  userName +
  "이고 나이는 " +
  age +
  "살입니다.";

템플릿 리터럴을 사용하면 훨씬 읽기 쉬워집니다.

const message =
  `안녕하세요. 제 이름은 ${userName}이고 나이는 ${age}살입니다.`;

`+` 기호들이 문자열 사이에서 줄다리기하는 대신, `${}`가 필요한 값을 정확한 자리에 배달합니다. 📦

7. 템플릿 리터럴에서 계산하기

`${}` 안에는 변수뿐 아니라 계산식도 넣을 수 있습니다.

const price: number = 12000;
const quantity: number = 3;

const message =
  `상품 총가격은 ${price * quantity}원입니다.`;

console.log(message);

출력 결과는 다음과 같습니다.

상품 총가격은 36000원입니다.

함수 호출도 넣을 수 있습니다.

const userName: string = "kimtype";

const message =
  `사용자 이름: ${userName.toUpperCase()}`;

console.log(message);

출력 결과:

사용자 이름: KIMTYPE

다만 `${}` 안에 너무 복잡한 로직을 넣으면 문자열이 읽기 어려워집니다.

복잡한 계산은 먼저 변수로 분리하는 편이 좋습니다.

const totalPrice = price * quantity;
const message = `상품 총가격은 ${totalPrice}원입니다.`;

8. 여러 줄 문자열 만들기

큰따옴표나 작은따옴표 문자열은 줄바꿈을 그대로 작성하기 어렵습니다.

const message = "첫 번째 줄
두 번째 줄";

이 코드는 오류가 발생합니다.

`\n`을 사용하면 줄바꿈을 표현할 수 있습니다.

const message = "첫 번째 줄\n두 번째 줄";

백틱을 사용하면 실제로 줄을 바꿔 작성할 수도 있습니다.

const message = `
첫 번째 줄
두 번째 줄
세 번째 줄
`;

긴 안내문이나 HTML 조각을 작성할 때 유용합니다.

const notice = `
안녕하세요.
TypeScript 강의에 오신 것을 환영합니다.
오늘은 기본 타입을 공부합니다.
`;

9. 문자열의 길이 확인하기

문자열의 글자 수는 `length` 속성으로 확인할 수 있습니다.

const language: string = "TypeScript";

console.log(language.length);

출력 결과:

10

공백도 문자열의 한 글자로 계산됩니다.

const message = "Hello TypeScript";

console.log(message.length);

`Hello`와 `TypeScript` 사이의 공백도 길이에 포함됩니다.

빈 문자열의 길이는 `0`입니다.

const emptyMessage: string = "";

console.log(emptyMessage.length);

출력 결과:

0

10. 문자열의 일부 가져오기

문자열의 각 글자에는 위치 번호가 있습니다.

위치 번호는 `0`부터 시작합니다.

const language = "TypeScript";

각 글자의 위치는 다음과 같습니다.

T  y  p  e  S  c  r  i  p  t
0  1  2  3  4  5  6  7  8  9

대괄호를 사용하면 특정 위치의 글자를 가져올 수 있습니다.

console.log(language[0]);
console.log(language[4]);

출력 결과:

T
S

첫 번째 글자의 위치가 `1`이 아니라 `0`이라는 점을 기억해야 합니다.

프로그래밍 세계의 첫 번째 좌석은 대부분 0번입니다.

1번 손님이 도착했는데 이미 두 번째 줄에 앉아 있는 기묘한 극장입니다. 🎭

11. 문자열 메서드 사용하기

문자열에는 다양한 기능이 준비되어 있습니다.

const language = "typescript";

console.log(language.toUpperCase());

출력 결과:

TYPESCRIPT

const language = "TypeScript";

console.log(language.toLowerCase());

출력 결과:

typescript

const message = "TypeScript is powerful";

console.log(message.includes("TypeScript"));

출력 결과:

true

const userName = "   김타입   ";

console.log(userName.trim());

출력 결과:

김타입

문자열 메서드를 사용해도 원래 문자열이 직접 변경되는 것은 아닙니다.

const language = "typescript";
const upperLanguage = language.toUpperCase();

console.log(language);
console.log(upperLanguage);

출력 결과:

typescript
TYPESCRIPT

문자열은 만들어진 뒤 내부 글자를 직접 바꿀 수 없는 값입니다.

12. 문자열 변수에 숫자를 넣으면?

다음 변수는 `string` 타입입니다.

let userName: string = "김타입";

문자열을 다시 저장하는 것은 가능합니다.

userName = "이타입";

하지만 숫자를 저장하면 오류가 발생합니다.

userName = 100;

TypeScript는 다음과 같은 오류를 알려줍니다.

Type 'number' is not assignable to type 'string'.

뜻을 풀어보면 다음과 같습니다.

TypeScript는 변수의 이름이 아니라 타입을 기준으로 판단합니다.

`userName`이라는 변수에 숫자 `100`을 넣으려고 해도 이름만 보고 모른 척해주지 않습니다.

13. `number` 타입이란?

`number`는 숫자를 나타내는 타입입니다.

const age: number = 25;
const price: number = 12000;
const temperature: number = 23.5;

TypeScript의 `number` 타입은 정수와 소수를 구분하지 않습니다.

const integerValue: number = 100;
const decimalValue: number = 3.14;
const negativeValue: number = -50;

모두 `number` 타입입니다.

다른 프로그래밍 언어에서는 정수와 소수를 각각 다른 타입으로 나누기도 합니다.

int
float
double

하지만 JavaScript와 TypeScript에서는 대부분 `number` 타입 하나를 사용합니다.

숫자 부서가 정수팀과 소수팀으로 나뉘지 않고 한 사무실에서 함께 근무하는 셈입니다.

14. 여러 형태의 숫자 표현

숫자는 다양한 방식으로 표현할 수 있습니다.

const count: number = 10;

const pi: number = 3.14;

const temperature: number = -10;

const largeNumber: number = 1e6;

`1e6`은 다음 숫자를 의미합니다.

1,000,000

큰 숫자는 밑줄을 넣어 읽기 쉽게 작성할 수 있습니다.

const population: number = 51_000_000;
const price: number = 1_250_000;

밑줄은 숫자를 읽기 쉽게 만들 뿐 실제 값에는 영향을 주지 않습니다.

console.log(1_000_000 === 1000000);

출력 결과:

true

15. 숫자의 기본 연산

숫자는 산술 연산자를 사용해 계산할 수 있습니다.

const a: number = 10;
const b: number = 3;

console.log(a + b);

결과:

13

console.log(a - b);

결과:

7

console.log(a * b);

결과:

30

console.log(a / b);

결과:

3.3333333333333335

console.log(a % b);

결과:

1

console.log(a ** b);

결과:

1000

`10 ** 3`은 10을 세 번 곱한 값입니다.

16. 연산 우선순위 이해하기

숫자 계산에는 연산 우선순위가 적용됩니다.

const result = 10 + 5 * 2;

곱셈이 덧셈보다 먼저 계산됩니다.

10 + 10

따라서 결과는 `20`입니다.

덧셈을 먼저 계산하려면 괄호를 사용합니다.

const result = (10 + 5) * 2;

결과는 `30`입니다.

복잡한 계산에서는 괄호를 적극적으로 사용하는 것이 좋습니다.

const totalPrice =
  (productPrice - discountPrice) * quantity;

컴퓨터는 우선순위를 알고 있지만, 코드를 읽는 사람은 잠시 계산기를 찾을 수도 있습니다.

괄호는 컴퓨터보다 사람을 위한 교통정리 표지판입니다. 🚦

17. 문자열과 숫자를 더하면?

다음 코드를 살펴보겠습니다.

const score: number = 100;
const message: string = "점수: " + score;

문자열과 숫자를 `+` 연산자로 연결하면 결과는 문자열이 됩니다.

console.log(message);

출력 결과:

점수: 100

다음 코드도 문자열을 만듭니다.

const result = 100 + "점";

`result`의 타입은 `string`입니다.

console.log(typeof result);

출력 결과:

string

하지만 다음 코드는 주의해야 합니다.

const result = "10" + 20;

숫자 계산처럼 보이지만 결과는 다음과 같습니다.

1020

문자열 `"10"` 뒤에 숫자 `20`이 연결된 것입니다.

숫자 계산이 필요하다면 문자열을 숫자로 변환해야 합니다.

const firstValue = Number("10");
const secondValue = 20;

const result = firstValue + secondValue;

console.log(result);

출력 결과:

30

18. 문자열을 숫자로 변환하기

문자열을 숫자로 변환할 때 `Number()`를 사용할 수 있습니다.

const inputValue: string = "100";
const numberValue: number = Number(inputValue);

console.log(numberValue);

출력 결과:

100

`parseInt()`는 문자열을 정수로 변환할 때 사용할 수 있습니다.

const value = parseInt("123");

console.log(value);

결과:

123

`parseFloat()`는 소수를 포함한 숫자로 변환할 수 있습니다.

const value = parseFloat("3.14");

console.log(value);

결과:

3.14

하지만 숫자로 변환할 수 없는 문자열도 있습니다.

const value = Number("TypeScript");

console.log(value);

결과:

NaN

19. `NaN`이란?

`NaN`은 Not a Number의 약자입니다.

숫자가 아니라는 뜻입니다.

const result = Number("Hello");

console.log(result);

출력 결과:

NaN

그런데 이상한 점이 있습니다.

console.log(typeof NaN);

출력 결과는 다음과 같습니다.

number

이름은 “숫자가 아님”인데 타입은 `number`입니다.

TypeScript 세계의 유명한 수수께끼 중 하나입니다.

숫자 부서에서 사고가 발생했지만 여전히 숫자 부서 소속인 직원과 비슷합니다.

값이 `NaN`인지 확인할 때는 `Number.isNaN()`을 사용할 수 있습니다.

const result = Number("Hello");

console.log(Number.isNaN(result));

출력 결과:

true

20. `Infinity`란?

숫자를 0으로 나누면 특별한 값이 나타납니다.

const result = 10 / 0;

console.log(result);

출력 결과:

Infinity

음수를 0으로 나누면 `-Infinity`가 됩니다.

const result = -10 / 0;

console.log(result);

출력 결과:

-Infinity

`Infinity`도 `number` 타입입니다.

console.log(typeof Infinity);

출력 결과:

number

실무에서는 계산 결과가 정상적인 유한 숫자인지 확인해야 할 때가 있습니다.

const result = 10 / 0;

console.log(Number.isFinite(result));

출력 결과:

false

21. 소수 계산의 주의점

컴퓨터에서 소수 계산은 우리가 예상한 결과와 조금 다를 수 있습니다.

const result = 0.1 + 0.2;

console.log(result);

많은 사람이 `0.3`을 예상하지만 실제 결과는 다음과 비슷합니다.

0.30000000000000004

이것은 TypeScript의 오류가 아니라 컴퓨터가 소수를 이진수로 표현하는 방식에서 발생하는 현상입니다.

금액처럼 정확한 계산이 중요하다면 정수 단위로 계산하는 방법을 사용할 수 있습니다.

const firstPrice = 10;
const secondPrice = 20;

const total = firstPrice + secondPrice;

console.log(total / 100);

여기서는 값을 원 단위보다 작은 정수 단위로 저장한 뒤 마지막에 변환하는 방식입니다.

간단한 화면 표시에는 `toFixed()`를 사용할 수도 있습니다.

const result = 0.1 + 0.2;

console.log(result.toFixed(2));

출력 결과:

0.30

단, `toFixed()`의 반환값은 문자열입니다.

const formatted = result.toFixed(2);

console.log(typeof formatted);

출력 결과:

string

숫자를 예쁘게 포장했더니 문자열 상자에 담겨 돌아온 것입니다.

22. 숫자 관련 유용한 기능

JavaScript의 `Math` 객체에는 숫자를 다루는 여러 기능이 있습니다.

const result = Math.round(3.6);

console.log(result);

결과:

4

const result = Math.floor(3.9);

console.log(result);

결과:

3

const result = Math.ceil(3.1);

console.log(result);

결과:

4

const result = Math.abs(-10);

console.log(result);

결과:

10

const result = Math.max(10, 50, 30);

console.log(result);

결과:

50

const result = Math.min(10, 50, 30);

console.log(result);

결과:

10

23. 숫자 변수에 문자열을 넣으면?

다음 변수는 `number` 타입입니다.

let age: number = 25;

다른 숫자를 저장하는 것은 가능합니다.

age = 30;
age = 30.5;
age = -1;

하지만 문자열은 저장할 수 없습니다.

age = "30";

오류 메시지는 다음과 같습니다.

Type 'string' is not assignable to type 'number'.

`30`과 `"30"`은 사람이 보기에는 비슷하지만 TypeScript에서는 완전히 다른 값입니다.

const firstValue: number = 30;
const secondValue: string = "30";

첫 번째 값은 계산할 수 있는 숫자입니다.

두 번째 값은 숫자처럼 보이는 문자열입니다.

24. `boolean` 타입이란?

`boolean`은 참과 거짓을 나타내는 타입입니다.

가질 수 있는 값은 두 가지뿐입니다.

true
false

불리언 변수는 다음과 같이 작성합니다.

const isLogin: boolean = true;
const isAdmin: boolean = false;

`boolean`은 스위치와 비슷합니다.

켜짐  → true
꺼짐  → false

중간 상태는 없습니다.

불리언은 프로그램의 조건과 상태를 표현할 때 자주 사용합니다.

const isPublished: boolean = true;
const hasPermission: boolean = false;
const isLoading: boolean = true;

25. 불리언 변수 이름 작성하기

불리언 변수는 이름만 보고도 참과 거짓을 예상할 수 있도록 작성하는 것이 좋습니다.

다음과 같은 접두어를 자주 사용합니다.

is
has
can
should

어떤 상태인지 나타냅니다.

const isLogin: boolean = true;
const isActive: boolean = false;
const isCompleted: boolean = true;

무언가를 가지고 있는지 나타냅니다.

const hasPermission: boolean = true;
const hasCoupon: boolean = false;

어떤 행동을 할 수 있는지 나타냅니다.

const canEdit: boolean = true;
const canDelete: boolean = false;

어떤 행동을 해야 하는지 나타냅니다.

const shouldUpdate: boolean = true;
const shouldRetry: boolean = false;

다음 변수는 의미를 바로 파악하기 어렵습니다.

const login: boolean = true;

다음처럼 작성하면 더 명확합니다.

const isLoggedIn: boolean = true;

좋은 불리언 변수 이름은 그 자체로 질문이 됩니다.

isLoggedIn?
hasPermission?
canDelete?

대답은 항상 `true` 또는 `false`입니다.

26. 비교 연산의 결과는 불리언

숫자나 문자열을 비교하면 결과는 `boolean` 타입이 됩니다.

const age: number = 25;
const isAdult: boolean = age >= 20;

`age >= 20`의 결과는 참이므로 `true`가 저장됩니다.

console.log(isAdult);

출력 결과:

true

자주 사용하는 비교 연산자는 다음과 같습니다.

예제를 살펴보겠습니다.

console.log(10 === 10);
console.log(10 !== 5);
console.log(10 > 5);
console.log(10 < 5);

출력 결과:

true
true
true
false

27. `===`와 `==`의 차이

JavaScript에는 값을 비교하는 두 가지 연산자가 있습니다.

==
===

`==`는 비교 과정에서 타입을 자동으로 변환할 수 있습니다.

console.log(10 == "10");

JavaScript에서는 이 결과가 `true`가 될 수 있습니다.

숫자 `10`과 문자열 `"10"`의 타입이 다른데도 값을 변환해 비교하기 때문입니다.

반면 `===`는 값과 타입을 모두 비교합니다.

console.log(10 === "10");

TypeScript에서는 서로 다른 타입을 의도 없이 비교하는 코드를 경고할 수 있습니다.

일반적으로는 `==`보다 `===` 사용을 권장합니다.

const inputValue = "10";

console.log(inputValue === "10");

TypeScript 개발자들의 비교 원칙은 비교적 엄격합니다.

28. 논리 연산자 사용하기

불리언 값은 논리 연산자와 함께 사용할 수 있습니다.

두 조건이 모두 참일 때 결과가 참입니다.

const isLoggedIn: boolean = true;
const isAdmin: boolean = true;

const canOpenAdminPage =
  isLoggedIn && isAdmin;

console.log(canOpenAdminPage);

결과:

true

하나라도 거짓이면 결과는 거짓입니다.

const isLoggedIn = true;
const isAdmin = false;

console.log(isLoggedIn && isAdmin);

결과:

false

두 조건 중 하나라도 참이면 결과가 참입니다.

const isAdmin = false;
const isManager = true;

const canManageUsers =
  isAdmin || isManager;

console.log(canManageUsers);

결과:

true

참과 거짓을 반대로 바꿉니다.

const isLoading = true;

console.log(!isLoading);

결과:

false

한 번 뒤집으면 반대가 되고, 두 번 뒤집으면 원래 값으로 돌아옵니다.

console.log(!!isLoading);

결과:

true

불리언 세계의 뒤집개는 느낌표입니다. 한 번 뒤집고, 두 번 뒤집으면 다시 원상복구됩니다.

29. 조건문에서 `boolean` 사용하기

불리언은 `if` 조건문과 함께 자주 사용됩니다.

const isLoggedIn: boolean = true;

if (isLoggedIn) {
  console.log("로그인된 사용자입니다.");
}

`isLoggedIn`이 `true`이므로 코드가 실행됩니다.

`else`를 사용하면 거짓일 때 실행할 코드도 작성할 수 있습니다.

const isLoggedIn: boolean = false;

if (isLoggedIn) {
  console.log("로그인된 사용자입니다.");
} else {
  console.log("로그인이 필요합니다.");
}

출력 결과:

로그인이 필요합니다.

다음처럼 불필요하게 비교할 필요는 없습니다.

if (isLoggedIn === true) {
  console.log("로그인되었습니다.");
}

이미 `isLoggedIn` 자체가 불리언 값이므로 다음처럼 작성하면 충분합니다.

if (isLoggedIn) {
  console.log("로그인되었습니다.");
}

거짓인 경우를 확인하려면 `!`를 사용할 수 있습니다.

if (!isLoggedIn) {
  console.log("로그인이 필요합니다.");
}

30. 값을 불리언으로 변환하기

`Boolean()` 함수를 사용하면 값을 불리언으로 변환할 수 있습니다.

console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean("hello"));
console.log(Boolean(""));

출력 결과:

true
false
true
false

JavaScript에서 거짓으로 판단되는 대표적인 값은 다음과 같습니다.

false
0
""
null
undefined
NaN

이러한 값을 Falsy 값이라고 부릅니다.

반대로 대부분의 다른 값은 참으로 판단되며 Truthy 값이라고 부릅니다.

Boolean(1);          // true
Boolean(-1);         // true
Boolean("hello");    // true
Boolean("false");    // true

특히 문자열 `"false"`는 비어 있지 않은 문자열이므로 `true`로 변환됩니다.

console.log(Boolean("false"));

결과:

true

문자열 안에 “false”라고 써 있어도 문자열 자체는 존재합니다.

TypeScript는 내용의 기분이 아니라 값의 존재 여부를 봅니다.

31. 불리언 변수에 문자열을 넣으면?

다음 변수는 `boolean` 타입입니다.

let isLogin: boolean = true;

다른 불리언 값은 저장할 수 있습니다.

isLogin = false;

하지만 문자열은 저장할 수 없습니다.

isLogin = "true";

오류가 발생합니다.

Type 'string' is not assignable to type 'boolean'.

`true`와 `"true"`는 서로 다른 타입입니다.

const firstValue: boolean = true;
const secondValue: string = "true";

첫 번째 값은 실제 불리언입니다.

두 번째 값은 `t`, `r`, `u`, `e`라는 글자로 이루어진 문자열입니다.

32. `typeof`로 타입 확인하기

JavaScript의 `typeof` 연산자를 사용하면 실행 중인 값의 타입을 확인할 수 있습니다.

const userName = "김타입";
const age = 25;
const isLearning = true;

console.log(typeof userName);
console.log(typeof age);
console.log(typeof isLearning);

출력 결과:

string
number
boolean

`typeof`의 결과는 문자열입니다.

const valueType = typeof age;

console.log(valueType);
console.log(typeof valueType);

출력 결과:

number
string

첫 번째 `number`는 `age`의 타입 이름입니다.

두 번째 `string`은 `"number"`라는 결과 자체가 문자열이라는 뜻입니다.

거울을 두 번 들여다보다가 타입의 복도에서 잠시 길을 잃을 수 있습니다. 🪞

33. 타입 추론과 함께 사용하기

지난 시간에 배운 것처럼 TypeScript는 초기값을 보고 타입을 추론할 수 있습니다.

const userName = "김타입";
const age = 25;
const isLearning = true;

굳이 다음처럼 모든 타입을 반복해서 작성할 필요는 없습니다.

const userName: string = "김타입";
const age: number = 25;
const isLearning: boolean = true;

두 방식 모두 올바릅니다.

다만 초기값만으로 타입이 명확한 경우에는 추론을 활용하는 편이 간결합니다.

const language = "TypeScript";
const version = 5;
const isPopular = true;

초기값이 없는 경우에는 타입을 직접 작성할 수 있습니다.

let userName: string;
let age: number;
let isLoggedIn: boolean;

이후 올바른 타입의 값을 저장합니다.

userName = "김타입";
age = 25;
isLoggedIn = true;

34. 함수 매개변수에 기본 타입 사용하기

함수의 매개변수에는 타입을 직접 작성하는 것이 좋습니다.

function greet(userName: string) {
  console.log(`안녕하세요, ${userName}님!`);
}

올바른 문자열을 전달하면 정상적으로 실행됩니다.

greet("김타입");

숫자를 전달하면 오류가 발생합니다.

greet(100);

숫자를 계산하는 함수도 만들 수 있습니다.

function add(
  firstNumber: number,
  secondNumber: number
): number {
  return firstNumber + secondNumber;
}

함수를 호출합니다.

const result = add(10, 20);

console.log(result);

출력 결과:

30

불리언을 반환하는 함수도 만들 수 있습니다.

function isAdult(age: number): boolean {
  return age >= 20;
}

사용 예제:

const result = isAdult(25);

console.log(result);

출력 결과:

true

35. 객체 속성에서 기본 타입 사용하기

객체의 각 속성에도 기본 타입을 사용할 수 있습니다.

const user: {
  name: string;
  age: number;
  isAdmin: boolean;
} = {
  name: "김타입",
  age: 25,
  isAdmin: false,
};

각 속성에는 정해진 타입의 값만 저장할 수 있습니다.

user.name = "이타입";
user.age = 30;
user.isAdmin = true;

잘못된 타입을 저장하면 오류가 발생합니다.

user.age = "서른 살";
user.isAdmin = "관리자";

객체와 사용자 정의 타입은 이후 PART 3에서 더욱 자세히 다룰 예정입니다.

지금은 객체 안에서도 `string`, `number`, `boolean`이 그대로 사용된다는 점만 확인하면 충분합니다.

36. 대문자 타입을 사용하면 안 될까?

TypeScript에서는 기본 타입을 소문자로 작성하는 것이 좋습니다.

string
number
boolean

다음과 같은 대문자 타입도 존재합니다.

String
Number
Boolean

하지만 대문자 타입은 JavaScript의 래퍼 객체를 나타냅니다.

일반적인 값의 타입을 작성할 때는 사용하지 않는 것이 좋습니다.

const userName: string = "김타입";
const age: number = 25;
const isLearning: boolean = true;

const userName: String = "김타입";
const age: Number = 25;
const isLearning: Boolean = true;

특히 `new Boolean()`은 예상하기 어려운 동작을 만들 수 있습니다.

const value = new Boolean(false);

if (value) {
  console.log("실행됩니다.");
}

`value` 안의 값은 `false`처럼 보이지만 객체 자체가 존재하므로 조건문이 실행됩니다.

기본 타입은 반드시 소문자로 작성한다고 기억하는 것이 안전합니다.

string, number, boolean

대문자를 사용하면 기본 타입이 갑자기 정장을 입고 객체 회의에 참석합니다.

우리가 필요한 것은 평범한 값이지, 객체로 변장한 값이 아닙니다.

37. 자주 발생하는 실수

const price: string = "10000";

이 값은 숫자가 아닙니다.

숫자로 계산하려면 변환해야 합니다.

const numberPrice = Number(price);

const result = "10" + 20;

결과는 `30`이 아니라 `"1020"`입니다.

const result = Number("10") + 20;

이제 결과는 `30`입니다.

const isLogin: boolean = "true";

`"true"`는 문자열입니다.

다음처럼 작성해야 합니다.

const isLogin: boolean = true;

const name: String = "김타입";

일반적인 기본 타입에는 소문자를 사용합니다.

const name: string = "김타입";

다음 코드는 예상과 다른 결과를 만듭니다.

console.log(NaN === NaN);

결과:

false

`NaN` 여부는 `Number.isNaN()`으로 확인합니다.

console.log(Number.isNaN(NaN));

결과:

true

38. 실습: 사용자 소개 문장 만들기

사용자 정보를 변수에 저장해 소개 문장을 만들어 보겠습니다.

const userName: string = "김타입";
const age: number = 25;
const isDeveloper: boolean = true;

개발자 여부에 따라 직업 설명을 만듭니다.

const jobMessage: string =
  isDeveloper ? "개발자입니다" : "개발자가 아닙니다";

템플릿 리터럴을 사용해 최종 문장을 만듭니다.

const introduction: string =
  `안녕하세요. 저는 ${userName}이고 ` +
  `${age}살이며 ${jobMessage}.`;

console.log(introduction);

전체 코드는 다음과 같습니다.

const userName: string = "김타입";
const age: number = 25;
const isDeveloper: boolean = true;

const jobMessage: string =
  isDeveloper ? "개발자입니다" : "개발자가 아닙니다";

const introduction: string =
  `안녕하세요. 저는 ${userName}이고 ` +
  `${age}살이며 ${jobMessage}.`;

console.log(introduction);

출력 결과:

안녕하세요. 저는 김타입이고 25살이며 개발자입니다.

세 가지 기본 타입이 모두 사용되었습니다.

userName     → string
age          → number
isDeveloper  → boolean

39. 실습: 상품 주문 계산기 만들기

상품 정보를 변수에 저장합니다.

const productName: string = "기계식 키보드";
const price: number = 120000;
const quantity: number = 2;
const hasCoupon: boolean = true;

쿠폰이 있으면 10%를 할인해 보겠습니다.

const discountRate: number =
  hasCoupon ? 0.1 : 0;

할인 전 가격을 계산합니다.

const originalPrice: number =
  price * quantity;

할인 금액을 계산합니다.

const discountPrice: number =
  originalPrice * discountRate;

최종 가격을 계산합니다.

const finalPrice: number =
  originalPrice - discountPrice;

결과를 출력합니다.

console.log(`상품명: ${productName}`);
console.log(`수량: ${quantity}개`);
console.log(`쿠폰 적용: ${hasCoupon}`);
console.log(`최종 가격: ${finalPrice}원`);

전체 코드는 다음과 같습니다.

const productName: string = "기계식 키보드";
const price: number = 120000;
const quantity: number = 2;
const hasCoupon: boolean = true;

const discountRate: number =
  hasCoupon ? 0.1 : 0;

const originalPrice: number =
  price * quantity;

const discountPrice: number =
  originalPrice * discountRate;

const finalPrice: number =
  originalPrice - discountPrice;

console.log(`상품명: ${productName}`);
console.log(`수량: ${quantity}개`);
console.log(`쿠폰 적용: ${hasCoupon}`);
console.log(`최종 가격: ${finalPrice}원`);

출력 결과:

상품명: 기계식 키보드
수량: 2개
쿠폰 적용: true
최종 가격: 216000원

상품명은 문자열, 가격과 수량은 숫자, 쿠폰 여부는 불리언으로 표현했습니다.

40. 실습: 로그인 가능 여부 판별하기

사용자의 상태를 나타내는 값을 준비합니다.

const userName: string = "kimtype";
const passwordLength: number = 12;
const isActive: boolean = true;

로그인 가능한 조건을 만들어 보겠습니다.

const hasValidUserName: boolean =
  userName.length >= 4;

const hasValidPassword: boolean =
  passwordLength >= 8;

const canLogin: boolean =
  hasValidUserName &&
  hasValidPassword &&
  isActive;

결과를 출력합니다.

console.log(`아이디 조건 충족: ${hasValidUserName}`);
console.log(`비밀번호 조건 충족: ${hasValidPassword}`);
console.log(`계정 활성화 상태: ${isActive}`);
console.log(`로그인 가능 여부: ${canLogin}`);

전체 코드입니다.

const userName: string = "kimtype";
const passwordLength: number = 12;
const isActive: boolean = true;

const hasValidUserName: boolean =
  userName.length >= 4;

const hasValidPassword: boolean =
  passwordLength >= 8;

const canLogin: boolean =
  hasValidUserName &&
  hasValidPassword &&
  isActive;

console.log(`아이디 조건 충족: ${hasValidUserName}`);
console.log(`비밀번호 조건 충족: ${hasValidPassword}`);
console.log(`계정 활성화 상태: ${isActive}`);
console.log(`로그인 가능 여부: ${canLogin}`);

출력 결과:

아이디 조건 충족: true
비밀번호 조건 충족: true
계정 활성화 상태: true
로그인 가능 여부: true

기본 타입 세 가지를 조합하면 실제 프로그램의 상태와 규칙을 표현할 수 있습니다.

41. 미니 퀴즈

다음 변수의 타입은 무엇일까요?

const age = "25";

string

숫자처럼 보이지만 따옴표 안에 있으므로 문자열입니다.

다음 코드의 출력 결과는 무엇일까요?

const result = "10" + 20;

console.log(result);

1020

문자열과 숫자를 더하면 숫자가 문자열로 변환되어 연결됩니다.

다음 코드에서 오류가 발생하는 이유는 무엇일까요?

let isAdmin: boolean = false;

isAdmin = "true";

`"true"`는 `boolean`이 아니라 `string` 타입이기 때문입니다.

올바른 코드는 다음과 같습니다.

isAdmin = true;

다음 코드의 `isAdult` 타입은 무엇일까요?

const age = 25;
const isAdult = age >= 20;

boolean

비교 연산의 결과는 `true` 또는 `false`입니다.

다음 코드의 문제를 찾아보세요.

const userName: String = "김타입";

기본 문자열 타입에는 대문자 `String`이 아니라 소문자 `string`을 사용하는 것이 좋습니다.

const userName: string = "김타입";

다음 코드의 결과는 무엇일까요?

console.log(typeof NaN);

number

`NaN`은 숫자 연산에서 발생하는 특별한 `number` 값입니다.

다음 코드의 빈칸에 알맞은 타입을 작성해 보세요.

const productName: ______ = "키보드";
const price: ______ = 50000;
const isSoldOut: ______ = false;

const productName: string = "키보드";
const price: number = 50000;
const isSoldOut: boolean = false;

42. 핵심 정리

문자열을 나타냅니다.

const userName: string = "김타입";

큰따옴표, 작은따옴표, 백틱으로 만들 수 있습니다.

"Hello"
'Hello'
`Hello`

템플릿 리터럴을 사용하면 변수와 계산 결과를 문자열 안에 넣을 수 있습니다.

const message = `안녕하세요, ${userName}님!`;

정수와 소수를 포함한 숫자를 나타냅니다.

const age: number = 25;
const temperature: number = 23.5;

사칙연산과 다양한 숫자 계산에 사용할 수 있습니다.

const total = price * quantity;

`NaN`과 `Infinity`도 `number` 타입에 속합니다.

참과 거짓을 나타냅니다.

const isLogin: boolean = true;
const isAdmin: boolean = false;

비교 연산의 결과는 불리언입니다.

const isAdult = age >= 20;

조건문과 프로그램의 상태를 표현할 때 자주 사용합니다.

다음 타입을 사용합니다.

string
number
boolean

대문자 타입은 일반적인 기본 타입 선언에 사용하지 않는 것이 좋습니다.

String
Number
Boolean

const language = "TypeScript";
const version = 5;
const isUseful = true;

TypeScript가 각각 `string`, `number`, `boolean`으로 추론합니다.

43. 다음 편 예고

지금까지 우리는 TypeScript의 가장 기본적인 세 가지 타입을 살펴봤습니다.

const userName: string = "김타입";
const age: number = 25;
const isLearning: boolean = true;

문자열은 `string`, 숫자는 `number`, 참과 거짓은 `boolean`으로 표현할 수 있었습니다.

그런데 변수에 아직 값이 정해지지 않았다면 어떻게 해야 할까요?

let selectedUser;

사용자가 선택한 값이 없거나, 서버에서 아직 데이터가 도착하지 않은 상태도 프로그램에서는 표현해야 합니다.

let selectedUser = null;
let responseData = undefined;

`null`과 `undefined`는 모두 값이 없는 상태처럼 보입니다.

그렇다면 두 값은 정확히 무엇이 다를까요?

개발자가 의도적으로 값을 비워둔 경우와 아직 값이 할당되지 않은 경우는 어떻게 구분할까요?

다음 편에서는 “값이 없음”을 표현하는 TypeScript의 두 가지 방법을 살펴보겠습니다.

다음 이야기

[TypeScript 완전정복 #7] 값이 없다는 것도 타입이다 | null과 undefined 제대로 이해하기

다음 편에서는 아무것도 없는 것처럼 보이지만 분명히 서로 다른 `null`과 `undefined`의 정체를 확인해 보겠습니다.