TypeScript 완전정복 1화: JavaScript에 타입이 필요한 이유

JavaScript로 개발하다 보면 가끔 이런 기묘한 장면을 만나게 됩니다.

const price = "10000";
const deliveryFee = 3000;

console.log(price + deliveryFee);

우리가 기대한 결과는 다음과 같습니다.

13000

하지만 JavaScript가 내놓은 대답은 조금 다릅니다.

100003000

JavaScript는 아무렇지도 않은 표정으로 말합니다.

개발자는 숫자 계산을 기대했지만, JavaScript는 문자열 연결로 이해했습니다.

코드는 정상적으로 실행됐습니다.오류 메시지도 나타나지 않았습니다.

그런데 결과는 완전히 잘못됐습니다.

바로 이런 순간, 무대 뒤에서 조용히 등장하는 언어가 있습니다.

TypeScript

TypeScript는 JavaScript에게 잔소리를 하기 위해 태어난 언어가 아닙니다.

개발자가 실수할 만한 부분을 코드가 실행되기 전에 발견해 주는, 꽤 꼼꼼한 동료에 가깝습니다.

이번 시간에는 TypeScript가 무엇인지, JavaScript에 왜 타입이 필요한지, TypeScript 코드는 어떻게 실행되는지 차근차근 알아보겠습니다.

이번 편에서는 다음 질문에 답합니다.

* TypeScript는 JavaScript와 완전히 다른 언어일까?* 타입이 있으면 무엇이 좋아질까?* TypeScript 코드는 브라우저에서 바로 실행될까?* JavaScript만 사용해도 되는데 TypeScript를 배우는 이유는 무엇일까?* TypeScript를 사용하면 모든 오류가 사라질까?

이제 JavaScript의 자유로운 세계에 TypeScript라는 안전요원을 투입해 보겠습니다.

1. 먼저 JavaScript의 특징부터 알아보자

JavaScript는 매우 자유로운 언어입니다.

변수를 만들 때 그 변수에 어떤 종류의 값이 들어갈지 미리 선언하지 않아도 됩니다.

let userName = "김타입";

userName = 100;
userName = true;
userName = { name: "김타입" };

하나의 변수에 문자열, 숫자, 불리언, 객체를 차례대로 넣어도 JavaScript는 크게 불평하지 않습니다.

이런 특징을 동적 타입 언어라고 합니다.

변수의 타입이 코드를 실행하는 과정에서 결정되기 때문입니다.

JavaScript의 자유로움은 작은 프로그램을 빠르게 만들 때 아주 편리합니다.

let message = "안녕하세요";
console.log(message);

변수 타입을 일일이 작성하지 않아도 바로 실행할 수 있습니다.

하지만 프로그램이 커지면 자유로움이 조금씩 다른 얼굴을 드러내기 시작합니다.

다음 함수를 살펴보겠습니다.

function add(a, b) {
  return a + b;
}

console.log(add(10, 20));
console.log(add("10", 20));
console.log(add(true, 20));

실행 결과는 다음과 같습니다.

30
1020
21

첫 번째 결과는 자연스럽습니다.

add(10, 20);

숫자 10과 숫자 20을 더했으니 30이 나옵니다.

두 번째부터 분위기가 이상해집니다.

add("10", 20);

문자열 `"10"`과 숫자 `20`이 만나 `"1020"`이 됩니다.

세 번째는 더욱 독특합니다.

add(true, 20);

JavaScript는 `true`를 숫자 `1`처럼 취급해 `21`을 만듭니다.

JavaScript는 코드를 멈추기보다는 가능한 방법을 찾아 실행하려고 합니다.

친절해 보이지만, 개발자가 의도하지 않은 결과까지 조용히 만들어 낼 수 있습니다.

2. TypeScript란 무엇인가?

TypeScript는 Microsoft가 개발한 프로그래밍 언어입니다.

가장 중요한 특징은 다음 한 문장으로 정리할 수 있습니다.

JavaScript와 완전히 떨어진 별개의 언어가 아닙니다.

기존 JavaScript 문법을 그대로 사용하면서 변수, 함수, 객체 등에 타입을 지정할 수 있습니다.

JavaScript 코드가 다음과 같다면,

let userName = "김타입";

TypeScript에서는 다음처럼 작성할 수 있습니다.

let userName: string = "김타입";

변수 이름 뒤에 있는 `: string`은 다음 의미입니다.

userName 변수에는 문자열만 저장할 수 있습니다.

이제 숫자를 넣어 보겠습니다.

let userName: string = "김타입";

userName = 100;

TypeScript는 코드가 실행되기 전에 문제를 알려줍니다.

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

사람의 언어로 바꾸면 다음과 같습니다.

JavaScript에서는 실행한 뒤에야 이상한 결과를 발견할 수 있지만, TypeScript에서는 코드를 작성하는 단계에서 실수를 발견할 수 있습니다.

3. 타입이란 무엇인가?

타입은 값의 종류를 나타냅니다.

우리가 일상생활에서 물건을 분류하는 것과 비슷합니다.

* 이름은 문자열* 나이는 숫자* 로그인 여부는 참 또는 거짓* 관심 분야는 여러 값을 담는 배열* 사용자 정보는 여러 속성을 묶은 객체

TypeScript에서는 다음과 같이 표현합니다.

const userName: string = "김타입";
const age: number = 25;
const isLoggedIn: boolean = true;
const skills: string[] = ["JavaScript", "TypeScript"];

각 변수의 타입을 표로 정리하면 다음과 같습니다.

| 변수 | 값 | 타입 || ------------ | ------- | ---------- || `userName` | `"김타입"` | `string` || `age` | `25` | `number` || `isLoggedIn` | `true` | `boolean` || `skills` | 문자열 목록 | `string[]` |

타입은 변수에 붙이는 단순한 꼬리표가 아닙니다.

그 값으로 무엇을 할 수 있는지 알려주는 사용 설명서 역할도 합니다.

타입을 자판기에 비유해 보겠습니다.

숫자 전용 자판기가 있다고 가정해 보겠습니다.

let score: number = 100;

이 자판기는 숫자만 받을 수 있습니다.

score = 200;

숫자를 넣었으므로 정상입니다.

하지만 문자열을 넣으면 어떻게 될까요?

score = "만점";

TypeScript는 투입구를 닫습니다.

숫자 전용입니다. 문자열은 받을 수 없습니다.

프로그램이 실행된 뒤 자판기가 폭발하는 것보다, 값을 넣는 순간 알려주는 편이 훨씬 안전합니다.

4. TypeScript는 JavaScript의 확장판이다

TypeScript를 설명할 때 자주 등장하는 표현이 있습니다.

영어로는 Superset이라고 합니다.

쉽게 말하면 JavaScript에서 사용할 수 있는 대부분의 문법을 TypeScript에서도 사용할 수 있다는 뜻입니다.

다음 코드는 JavaScript 코드이면서 동시에 유효한 TypeScript 코드입니다.

const greeting = "Hello";
console.log(greeting);

TypeScript에서는 여기에 타입 기능을 추가할 수 있습니다.

const greeting: string = "Hello";
console.log(greeting);

관계를 간단히 표현하면 다음과 같습니다.

JavaScript 문법
        +
타입 검사 기능
        +
개발 편의 기능
        =
TypeScript

JavaScript라는 집을 철거하고 TypeScript라는 새집을 짓는 것이 아닙니다.

기존 JavaScript 집에 안전장치와 안내 표지판을 설치하는 쪽에 가깝습니다.

5. TypeScript가 실수를 잡아내는 순간

상품 가격을 계산하는 함수를 만들어 보겠습니다.

function calculateTotal(price, quantity) {
  return price * quantity;
}

calculateTotal(10000, 3);
calculateTotal("만원", 3);

첫 번째 호출은 정상입니다.

calculateTotal(10000, 3);

결과는 `30000`입니다.

하지만 두 번째 호출에서는 `"만원"`이라는 문자열이 전달됩니다.

calculateTotal("만원", 3);

JavaScript는 코드를 실행한 뒤 `NaN`이라는 결과를 만들어 냅니다.

`NaN`은 숫자가 아니라는 의미입니다.

문제는 함수에 값을 전달하는 순간에는 특별한 경고가 없다는 것입니다.

function calculateTotal(
  price: number,
  quantity: number
): number {
  return price * quantity;
}

calculateTotal(10000, 3);
calculateTotal("만원", 3);

TypeScript는 `"만원"` 부분에서 오류를 표시합니다.

Argument of type 'string' is not assignable to parameter of type 'number'.

번역하면 다음과 같습니다.

프로그램을 실행하기도 전에 실수를 발견했습니다.

이것이 TypeScript가 제공하는 가장 중요한 가치입니다.

6. 정적 타입 검사란 무엇인가?

TypeScript는 정적 타입 검사를 지원합니다.

정적 타입 검사란 프로그램을 실행하기 전에 코드에 타입 문제가 없는지 확인하는 것을 말합니다.

다음 코드를 보겠습니다.

const age: number = "스무 살";

이 코드는 실행 결과가 잘못된 것이 아닙니다.

실행하기 전부터 타입 규칙에 맞지 않는 코드입니다.

TypeScript는 컴파일 과정에서 문제를 발견합니다.

코드 작성
   ↓
TypeScript 타입 검사
   ↓
문제가 있으면 오류 표시
   ↓
문제가 없으면 JavaScript로 변환
   ↓
브라우저 또는 Node.js에서 실행

정적 타입 검사는 공항 보안 검색대와 비슷합니다.

위험한 물건이 비행기 안에 들어간 뒤 발견되는 것이 아니라, 탑승하기 전에 확인합니다.

물론 모든 사고를 막아 주지는 못하지만, 많은 실수를 출발 전에 걸러낼 수 있습니다.

7. TypeScript 코드는 바로 실행되지 않는다

여기서 매우 중요한 사실이 하나 있습니다.

브라우저가 이해하는 언어는 JavaScript입니다.

따라서 TypeScript 코드는 실행되기 전에 JavaScript 코드로 변환되어야 합니다.

TypeScript 코드가 다음과 같다고 가정해 보겠습니다.

const age: number = 25;

console.log(age);

TypeScript 컴파일러가 이 코드를 JavaScript로 변환하면 다음과 비슷한 결과가 만들어집니다.

const age = 25;

console.log(age);

`number`라는 타입 정보가 사라졌습니다.

타입 정보는 개발 과정에서 코드를 검사하는 데 사용되고, 실제 실행되는 JavaScript 코드에는 포함되지 않습니다.

TypeScript 코드가 실행되는 과정은 다음과 같습니다.

app.ts
  ↓
TypeScript 컴파일러
  ↓
app.js
  ↓
브라우저 또는 Node.js

`.ts` 파일은 설계도입니다.

`.js` 파일은 실제로 실행할 수 있도록 만들어진 결과물입니다.

이 변환 과정을 컴파일 또는 트랜스파일이라고 부릅니다.

자세한 컴파일 과정은 이후 회차에서 직접 실습할 예정입니다.

8. 그렇다면 타입은 실행할 때 아무 역할도 하지 않을까?

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

const score: number = 100;

JavaScript로 변환하면 다음처럼 됩니다.

const score = 100;

`: number`가 사라졌습니다.

그렇다면 타입은 쓸모가 없는 것일까요?

그렇지 않습니다.

타입은 코드가 실행되기 전 개발 단계에서 강력한 역할을 합니다.

* 잘못된 값 대입 발견* 잘못된 함수 호출 발견* 존재하지 않는 속성 접근 발견* 함수의 반환값 확인* 코드 자동 완성 제공* 변경된 코드의 영향 범위 확인

타입은 실제 공연에 등장하지는 않지만, 리허설 과정에서 배우의 동선과 대사를 점검하는 연출가에 가깝습니다.

9. TypeScript가 자동 완성을 똑똑하게 만드는 이유

다음과 같은 사용자 객체가 있다고 가정해 보겠습니다.

const user = {
  id: 1,
  name: "김타입",
  email: "type@example.com"
};

에디터에서 다음처럼 입력합니다.

user.

TypeScript는 객체 안에 어떤 속성이 있는지 알고 있습니다.

따라서 다음과 같은 목록을 자동으로 보여줄 수 있습니다.

id
name
email

존재하지 않는 속성에 접근하면 오류도 알려줍니다.

console.log(user.phone);

Property 'phone' does not exist.

JavaScript에서도 자동 완성이 어느 정도 동작하지만, 타입 정보가 명확할수록 에디터는 더 정확한 도움을 줄 수 있습니다.

TypeScript는 코드 검사기인 동시에 개발자를 위한 내비게이션 역할을 합니다.

10. 프로젝트가 커질수록 타입이 중요해지는 이유

작은 프로그램에서는 변수 몇 개만 기억하면 됩니다.

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

하지만 실제 프로젝트에서는 수많은 데이터가 등장합니다.

사용자 정보
상품 정보
주문 정보
결제 정보
게시글 정보
댓글 정보
API 응답 데이터
서버 오류 데이터

사용자 객체 하나만 해도 여러 속성을 가질 수 있습니다.

const user = {
  id: 1,
  name: "김타입",
  email: "type@example.com",
  age: 25,
  isAdmin: false,
  interests: ["coding", "coffee"]
};

시간이 지나 누군가 속성 이름을 바꿨다고 가정해 보겠습니다.

email

이 속성을 다음 이름으로 변경했습니다.

emailAddress

JavaScript 프로젝트에서는 기존에 `email`을 사용하는 코드를 개발자가 직접 찾아야 할 수 있습니다.

TypeScript는 변경으로 인해 문제가 생긴 위치를 오류로 표시해 줍니다.

프로젝트가 커질수록 TypeScript의 진짜 힘이 드러나는 이유입니다.

11. 협업에서 TypeScript가 주는 장점

다른 개발자가 다음 함수를 만들었다고 가정해 보겠습니다.

function createUser(data) {
  // 사용자 생성
}

이 함수만 보면 어떤 값을 전달해야 하는지 알기 어렵습니다.

createUser("김타입");
createUser(100);
createUser({});

이름만 전달해야 할까요?

객체를 전달해야 할까요?

이메일도 필요할까요?

TypeScript에서는 필요한 데이터 구조를 명확하게 표현할 수 있습니다.

type UserData = {
  name: string;
  email: string;
  age: number;
};

function createUser(data: UserData) {
  console.log(data);
}

함수를 사용하는 개발자는 필요한 값을 쉽게 확인할 수 있습니다.

createUser({
  name: "김타입",
  email: "type@example.com",
  age: 25
});

타입이 곧 문서 역할을 하는 것입니다.

문서가 오래되어 코드와 달라지는 문제도 줄일 수 있습니다.

12. TypeScript를 사용하면 얻는 대표적인 장점

let count: number = 10;
count = "열 개";

실행 전에 타입 오류를 확인할 수 있습니다.

객체의 속성, 함수의 매개변수, 반환값을 에디터가 더 정확하게 안내합니다.

function getUser(id: number): User

이 선언만 보더라도 숫자 ID를 받아 사용자 정보를 반환한다는 사실을 추측할 수 있습니다.

속성 이름이나 함수 구조를 변경했을 때 영향을 받는 코드를 빠르게 찾을 수 있습니다.

함수와 객체가 어떤 데이터를 주고받아야 하는지 타입으로 표현할 수 있습니다.

13. TypeScript를 사용하면 불편한 점도 있다

TypeScript가 마법 지팡이는 아닙니다.

장점이 많은 만큼 추가로 배워야 할 것도 있습니다.

JavaScript 문법에 더해 타입 문법까지 익혀야 합니다.

type User = {
  id: number;
  name: string;
};

처음에는 기호가 많아 보여 낯설 수 있습니다.

TypeScript 컴파일러를 설치하고 `tsconfig.json` 같은 설정 파일을 관리해야 합니다.

간단한 오류는 이해하기 쉽지만, 제네릭이나 복잡한 타입에서 발생하는 오류 메시지는 길어질 수 있습니다.

Type 'X' is not assignable to type 'Y'...

처음 보면 컴파일러가 갑자기 장문의 항의문을 제출한 것처럼 느껴질 수 있습니다.

다음 코드는 타입상으로는 문제가 없습니다.

function divide(a: number, b: number): number {
  return a / b;
}

console.log(divide(10, 0));

두 매개변수 모두 숫자이므로 타입 오류는 없습니다.

하지만 0으로 나누는 논리적 문제는 여전히 존재합니다.

TypeScript는 타입 관련 오류를 줄여 주지만, 모든 버그를 자동으로 제거해 주는 도구는 아닙니다.

14. 오류 박물관

const price: number = "10000";

오류 이유:

number 타입 변수에 string 값을 넣었습니다.

수정:

const price: number = 10000;

const product = {
  name: "키보드",
  price: 50000
};

console.log(product.stock);

오류 이유:

product 객체에 stock 속성이 없습니다.

수정:

const product = {
  name: "키보드",
  price: 50000,
  stock: 10
};

console.log(product.stock);

function double(value: number): number {
  return value * 2;
}

double("10");

오류 이유:

숫자를 받아야 하는 함수에 문자열을 전달했습니다.

수정:

double(10);

15. TypeScript에 대한 흔한 오해

반드시 그렇지는 않습니다.

const language = "TypeScript";

타입을 직접 작성하지 않았지만 TypeScript는 값을 보고 `language`가 문자열이라는 것을 추론합니다.

이를 타입 추론이라고 합니다.

그렇지 않습니다.

TypeScript는 JavaScript를 기반으로 합니다.

변수, 함수, 객체, 배열, 조건문, 반복문, 비동기 처리 같은 JavaScript 개념을 먼저 이해해야 TypeScript도 제대로 사용할 수 있습니다.

큰 프로젝트에서 효과가 더 크지만, 작은 프로젝트에서도 코드 자동 완성, 함수 사용법 안내, 실수 방지에 도움이 됩니다.

TypeScript는 타입 오류를 줄여 줍니다.

비즈니스 로직 오류, 네트워크 오류, 잘못된 계산, 서버 데이터 문제까지 모두 해결해 주지는 않습니다.

16. JavaScript와 TypeScript 비교

| 구분 | JavaScript | TypeScript || -------- | ------------- | ------------------- || 타입 검사 | 주로 실행 중 확인 | 실행 전에 확인 가능 || 타입 작성 | 별도 타입 문법 없음 | 타입 명시 가능 || 실행 방식 | 바로 실행 가능 | JavaScript로 변환 후 실행 || 자동 완성 | 가능 | 타입 정보로 더 정확하게 가능 || 초기 학습 | 비교적 간단 | 타입 문법 추가 학습 필요 || 대규모 프로젝트 | 관리가 어려워질 수 있음 | 구조와 데이터 관계 파악에 유리 |

둘 중 하나가 무조건 우월하다는 의미는 아닙니다.

간단한 테스트나 짧은 스크립트에서는 JavaScript가 빠르고 편리할 수 있습니다.

복잡한 데이터와 여러 기능을 다루는 프로젝트에서는 TypeScript가 코드의 안전성과 유지보수성을 높이는 데 큰 도움을 줍니다.

17. TypeScript는 언제 사용하면 좋을까?

다음과 같은 상황이라면 TypeScript 사용을 적극적으로 고려할 수 있습니다.

* 프로젝트 규모가 점점 커지고 있을 때* 여러 개발자가 함께 작업할 때* API 데이터를 많이 다룰 때* React, Vue, Node.js 프로젝트를 개발할 때* 객체 구조가 복잡할 때* 함수의 입력값과 반환값을 명확하게 관리하고 싶을 때* 코드 변경으로 인한 오류를 줄이고 싶을 때* AI가 생성한 코드를 더 안전하게 검토하고 싶을 때

특히 API를 사용할 때 TypeScript는 유용합니다.

type Product = {
  id: number;
  name: string;
  price: number;
};

서버에서 받아오는 데이터 구조를 타입으로 정의하면, 어떤 속성을 사용할 수 있는지 쉽게 확인할 수 있습니다.

18. TypeScript 한 줄 요약

TypeScript를 가장 짧게 설명하면 다음과 같습니다.

조금 더 풀어서 표현하면 다음과 같습니다.

JavaScript의 유연함은 유지하고
타입 검사 기능은 추가하며
개발자가 코드를 더 쉽게 이해하고
안전하게 변경할 수 있도록 도와주는 언어

TypeScript는 JavaScript의 자유를 빼앗는 언어가 아닙니다.

자유롭게 달릴 수 있도록 도로에 차선과 표지판을 설치하는 언어입니다.

19. 타입 탐정사무소

다음 코드에서 TypeScript가 오류를 표시할 부분을 찾아보세요.

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

age = "스물다섯";

범인은 마지막 줄입니다.

age = "스물다섯";

`age` 변수는 `number` 타입인데 문자열을 대입했기 때문입니다.

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

age = 25;

20. 미니 퀴즈

TypeScript에 대한 설명으로 올바른 것은 무엇일까요?

1. JavaScript와 아무 관련이 없는 언어다.2. 브라우저가 TypeScript를 그대로 실행한다.3. JavaScript에 타입 검사 기능을 추가한 언어다.4. TypeScript를 사용하면 모든 버그가 사라진다.

정답은 3번입니다.

다음 코드에서 발생하는 문제는 무엇일까요?

let score: number = "100";

정답:

`number` 타입 변수에 `string` 타입 값을 대입했습니다.

수정 코드는 다음과 같습니다.

let score: number = 100;

TypeScript 코드가 브라우저에서 실행되기 전에 필요한 과정은 무엇일까요?

정답:

TypeScript 코드를 JavaScript 코드로 변환하는 과정이 필요합니다.

21. 오늘의 핵심 정리

* TypeScript는 JavaScript에 타입 기능을 추가한 언어입니다.* 타입은 값의 종류와 사용할 수 있는 기능을 나타냅니다.* TypeScript는 코드를 실행하기 전에 타입 오류를 확인합니다.* TypeScript 코드는 JavaScript로 변환된 뒤 실행됩니다.* 타입 정보는 자동 완성, 코드 이해, 협업, 리팩터링에 도움을 줍니다.* TypeScript가 모든 버그를 막아 주는 것은 아닙니다.* JavaScript를 이해해야 TypeScript도 제대로 활용할 수 있습니다.

22. 다음 편 예고

TypeScript가 무엇인지 알았으니 이제 직접 코드를 실행해 볼 차례입니다.

하지만 `.ts` 파일을 만들기만 한다고 브라우저가 알아서 실행해 주지는 않습니다.

다음 편에서는 Node.js와 TypeScript 컴파일러를 설치하고, 첫 번째 TypeScript 프로그램을 만들어 보겠습니다.

const message: string = "Hello, TypeScript!";

console.log(message);

과연 이 코드는 어떤 과정을 거쳐 실행될까요?

다음 이야기:

[TypeScript 완전정복 #2] 개발 환경 설치하기 | Node.js부터 VS Code까지 한 번에 준비