[TypeScript 기초] TypeScript 설치

TypeScript 설치하기 🛠️

TypeScript를 처음 보면
“자바스크립트도 어려운데 이건 또 뭐지?”
이런 생각이 먼저 들 수 있습니다.

그런데 TypeScript는 자바스크립트를 완전히 새로 배우는 것이 아니라,
자바스크립트를 더 안전하게 쓰기 위한 도구라고 이해하면 됩니다.

자바스크립트는 자유로운 언어입니다.
이 말은 빠르게 만들기 좋다는 뜻도 있지만,
반대로 실수해도 바로 눈에 안 띄는 경우가 많다는 뜻이기도 합니다.

예를 들어 숫자를 넣어야 하는 곳에 문자열을 넣거나,
객체에 없는 값을 꺼내 쓰거나,
함수에 잘못된 값을 전달해도
코드를 작성하는 순간에는 눈치채지 못하고
나중에 실행하다가 문제가 터지는 경우가 많습니다.

TypeScript는 바로 이 부분을 도와줍니다.
이 값은 문자열입니다,
“여기에는 숫자가 들어와야 합니다”
같이 코드에 힌트를 붙여서
실수를 더 빨리 찾을 수 있게 해줍니다.

특히 React처럼
컴포넌트가 많아지고,
props가 오가고,
상태가 많아지는 구조에서는
“지금 이 값이 뭔지”를 명확하게 적어두는 것이
생각보다 정말 중요합니다.

그래서 실무에서도
React + TypeScript 조합을 많이 사용합니다.

이번 글에서는
TypeScript를 처음 시작하는 분이
“왜 설치하는지”, “어떻게 쓰기 시작하는지”, “파일은 왜 이렇게 만드는지”까지
한 번에 이해할 수 있게 차근차근 정리해보겠습니다.

오늘 배울 내용 🎯

✔ TypeScript를 왜 배우는지
✔ TypeScript 설치 방법
✔ ts 파일이 무엇인지
✔ TypeScript가 실행되는 전체 흐름

주요 포인트 Top3

01. TypeScript를 왜 배워야 할까 🤔

처음에는
“그냥 자바스크립트로 하면 되는 거 아닌가요?”
라는 생각이 들 수 있습니다.

물론 가능합니다.
실제로 자바스크립트만으로도 웹사이트를 만들 수 있습니다.

하지만 프로젝트가 조금만 커져도
이런 문제가 자주 생깁니다.

• 이 변수에는 지금 문자열이 들어있는지 숫자가 들어있는지 헷갈림
• 함수가 어떤 값을 받아야 하는지 기억이 안 남
• 다른 파일에서 값을 넘길 때 실수함
• 코드는 돌아가는데 결과가 이상하게 나옴
• 나중에 다시 봤을 때 내가 쓴 코드인데도 이해가 잘 안 됨

이럴 때 TypeScript가 도움이 됩니다.

TypeScript는 코드에
**“이 값의 정체가 무엇인지”**를 적을 수 있게 해줍니다.

예를 들어
이 값은 문자열인지,
숫자인지,
배열인지,
객체인지
미리 표시해둘 수 있습니다.

그렇게 하면 좋은 점이 있습니다.

첫 번째, 실수를 빨리 찾을 수 있습니다.
두 번째, 코드를 읽기 쉬워집니다.
세 번째, 협업할 때 더 명확해집니다.
네 번째, React에서 props와 state를 다룰 때 훨씬 편해집니다.

즉, TypeScript는
코드를 어렵게 만드는 도구가 아니라
코드를 더 분명하게 적도록 도와주는 도구입니다.

02. 자바스크립트와 TypeScript는 뭐가 다를까 ⚡

먼저 자바스크립트 코드를 보겠습니다.

function add(a, b) {
  return a + b;
}
 
console.log(add(10, 20));
console.log(add(10, "20"));

이 코드는 문법상 큰 문제 없이 작성됩니다.
그런데 두 번째 줄처럼 10과 "20"을 같이 넣으면
우리가 기대한 숫자 계산이 아니라
문자열이 섞인 이상한 결과가 나올 수 있습니다.

왜 이런 일이 생기냐면
자바스크립트는 기본적으로
값의 타입을 매우 자유롭게 처리하기 때문입니다.

여기서 타입이란
값의 종류를 말합니다.

예를 들면 이런 것들이 타입입니다.

• "안녕하세요" → 문자열
• 10 → 숫자
• true → 불리언
• [1, 2, 3] → 배열
• { name: "철수" } → 객체

TypeScript에서는 이런 식으로 작성할 수 있습니다.

function add(a: number, b: number) {
  return a + b;
}
 
console.log(add(10, 20));

여기서 초심자가 가장 먼저 헷갈리는 부분이 바로 이것입니다.

a: number

이건
a라는 변수는 숫자여야 합니다
라는 뜻입니다.

즉, 콜론 : 뒤에 붙는 단어는
그 값의 타입을 적는 자리입니다.

• a: number → a는 숫자
• name: string → name은 문자열
• isLogin: boolean → isLogin은 참 또는 거짓

그러니까 : string, : number 같은 표시는
아무거나 막 붙이는 게 아니라
그 값의 종류를 설명하는 표시입니다.

이걸 왜 쓰냐면
코드를 읽는 사람도 바로 이해할 수 있고,
잘못된 값을 넣었을 때 TypeScript가 미리 알려주기 때문입니다.

예를 들어 아래처럼 작성하면

function add(a: number, b: number) {
  return a + b;
}
 
add(10, "20");

TypeScript는
“b는 숫자여야 하는데 문자열이 들어왔네요”
라고 알려줍니다.

즉, 실행하다가 나중에 터지는 것이 아니라
작성하는 순간부터 실수를 줄일 수 있는 것입니다.

03. TypeScript 설치하기 🛠️

이제 실제로 TypeScript를 설치해보겠습니다.

먼저 프로젝트 폴더를 하나 만들고
그 안에서 아래 명령어를 실행합니다.

npm init -y

이 명령어는
현재 폴더를 하나의 Node.js 프로젝트처럼 사용할 수 있게
기본 설정 파일을 만들어주는 역할을 합니다.

실행하면 package.json 파일이 생성됩니다.

여기서 package.json은
이 프로젝트가 어떤 도구를 사용하고 있는지,
어떤 패키지를 설치했는지,
어떤 명령어를 실행할 수 있는지 적어두는
프로젝트 설명서 같은 파일이라고 생각하면 됩니다.

이제 TypeScript를 설치합니다.

npm install -D typescript

이 명령어를 하나씩 보면 의미는 이렇습니다.

• npm install → 패키지 설치
• typescript → TypeScript 패키지 설치
• -D → 개발할 때만 사용하는 도구로 설치

여기서 중요한 점은
TypeScript는 보통 사용자가 직접 보는 기능이 아니라
개발자가 코드를 작성할 때 도움을 주는 개발 도구라는 점입니다.
그래서 -D 옵션을 붙여 개발용 패키지로 설치합니다.

설치가 끝나면
이제 TypeScript를 사용할 준비가 된 것입니다.

04. tsconfig 파일은 왜 만들까 ⚙️

TypeScript를 설치한 뒤에는
보통 설정 파일도 함께 만듭니다.

아래 명령어를 실행합니다.

npx tsc --init

그러면 tsconfig.json 파일이 생성됩니다.

이 파일은
TypeScript가 프로젝트를 검사할 때
어떤 기준으로 검사할지 정해주는 설정 파일입니다.

쉽게 말하면
TypeScript의 사용 설명서 같은 파일입니다.

예를 들어 이런 내용이 들어갈 수 있습니다.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true
  }
}

여기서 처음에는 세부 옵션을 다 외울 필요는 없습니다.
다만 아래 정도는 알고 있으면 충분합니다.

target
TypeScript를 어떤 자바스크립트 문법 수준으로 바꿀지 정합니다.
예를 들어 오래된 브라우저까지 고려할지,
최신 문법 기준으로 둘지 같은 기준입니다.

module
파일을 불러오고 내보내는 방식과 관련된 설정입니다.
React나 모듈 시스템을 사용할 때 연결됩니다.

strict
타입 검사를 얼마나 엄격하게 할지 정합니다.
이 값이 true이면
실수를 더 꼼꼼하게 잡아줍니다.

초심자라면 특히
strict: true를 켜두는 것이 좋습니다.
처음엔 에러가 많아 보여도
오히려 그 과정에서 TypeScript에 빨리 익숙해질 수 있기 때문입니다.

05. TypeScript 파일은 왜 index.ts일까 📄

이제 TypeScript 파일을 하나 만들어보겠습니다.

예를 들어 파일 이름을 이렇게 만들 수 있습니다.

index.ts

여기서 또 초심자가 헷갈릴 수 있습니다.

“왜 파일 이름이 갑자기 index.ts예요?”
“꼭 index여야 하나요?”
“뒤에 .ts는 뭐예요?”

하나씩 보면 됩니다.

먼저 index는
그냥 파일 이름입니다.
꼭 index일 필요는 없습니다.

예를 들면 아래처럼 만들어도 됩니다.

main.ts
app.ts
test.ts
hello.ts

즉, 앞부분 이름은 자유입니다.

그럼 왜 예제에서 index.ts를 많이 쓰냐면
가장 기본이 되는 시작 파일 이름으로
오래전부터 자주 사용해온 관습이 있기 때문입니다.

그리고 뒤의 .ts가 중요합니다.

.ts는
이 파일이 TypeScript 파일이라는 뜻입니다.

즉,

• .js → 자바스크립트 파일
• .ts → 타입스크립트 파일

이렇게 구분한다고 생각하면 됩니다.

만약 React 컴포넌트까지 포함되면
나중에는 .tsx라는 확장자도 보게 됩니다.
이건 React JSX 문법까지 함께 사용하는 TypeScript 파일입니다.

지금 단계에서는
.ts는 TypeScript 파일
이 정도만 정확히 기억하면 충분합니다.

06. 첫 TypeScript 코드 작성하기 ✍️

이제 index.ts 파일 안에
아래 코드를 작성해보겠습니다.

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

이 코드도 초심자 입장에서는
하나하나 뜯어봐야 이해가 됩니다.

먼저 첫 줄입니다.

const message: string = "Hello TypeScript";

이 코드는 이렇게 읽으면 됩니다.

• const → 값을 저장할 변수를 만들겠다
• message → 변수 이름은 message다
• : string → 이 변수에는 문자열이 들어간다
• = → 오른쪽 값을 왼쪽 변수에 넣는다
• "Hello TypeScript" → 실제로 넣는 문자열 값

즉 전체 뜻은

message라는 변수를 만들고,
여기에는 문자열 값을 넣겠다

라는 의미입니다.

여기서 핵심은 : string입니다.

이 부분은
“이 변수는 문자열 전용입니다”
라고 TypeScript에게 알려주는 역할을 합니다.

그래서 만약 아래처럼 숫자를 넣으면

const message: string = 123;

TypeScript는
문자열이어야 하는데 숫자가 들어왔다고 알려줍니다.

즉, : string은 그냥 장식이 아니라
변수의 타입을 명확하게 알려주는 중요한 표시입니다.

두 번째 줄은 이 코드입니다.

console.log(message);

이건 message에 들어있는 값을
콘솔 창에 출력하라는 뜻입니다.

여기서 콘솔은
브라우저 개발자 도구나 터미널에서
결과를 확인할 수 있는 출력 공간이라고 생각하면 됩니다.

07. TypeScript는 바로 실행되지 않는다 🔄

여기서 또 중요한 포인트가 있습니다.

TypeScript 파일은
보통 자바스크립트처럼 바로 실행하지 않습니다.

왜냐하면 브라우저나 Node.js는
기본적으로 자바스크립트를 실행하기 때문입니다.

그래서 TypeScript 코드는 먼저
자바스크립트 코드로 변환하는 과정이 필요합니다.

이 과정을 보통
컴파일이라고 부릅니다.

어렵게 느껴질 수 있지만
지금은 이렇게만 이해하면 됩니다.

TypeScript를 자바스크립트로 바꾸는 과정

이제 아래 명령어를 실행해봅니다.

npx tsc index.ts

이 명령어의 뜻은
index.ts 파일을 TypeScript 컴파일러로 검사하고
자바스크립트 파일로 바꿔달라는 의미입니다.

그러면 같은 폴더에 이런 파일이 생깁니다.

index.js

즉, 우리가 작성한 index.ts가
실행 가능한 자바스크립트 파일인 index.js로 변환된 것입니다.

그다음 이렇게 실행할 수 있습니다.

node index.js

이제야 실제 결과가 출력됩니다.

즉 전체 흐름은 이렇게 됩니다.

1. index.ts 작성
2. TypeScript가 코드 검사
3. index.js로 변환
4. Node.js 또는 브라우저에서 실행

이 흐름을 이해하는 것이 매우 중요합니다.
왜냐하면 앞으로 React + TypeScript를 할 때도
기본 원리는 같기 때문입니다.

08. 실무에서는 어떻게 사용할까 🚀

실무에서는 매번
npx tsc index.ts
이렇게 직접 치는 경우도 있지만,
대부분은 개발 도구가 자동으로 변환을 도와줍니다.

예를 들어 아래 명령어를 사용하면

npx tsc --watch

파일을 저장할 때마다
TypeScript가 자동으로 다시 검사하고
자바스크립트로 변환해줍니다.

그리고 React 프로젝트에서는
Vite, Next.js 같은 도구가
이 과정을 내부적으로 처리해주는 경우가 많습니다.

하지만 초심자 단계에서는
자동 도구에만 의존하기보다
TypeScript는 작성 후 검사하고 변환해서 실행된다
이 기본 흐름을 먼저 이해하는 것이 중요합니다.

그래야 나중에 React 환경으로 넘어가도
내부에서 무슨 일이 일어나는지 이해할 수 있습니다.

09. 지금 단계에서 꼭 기억해야 할 것 📌

이번 글에서 가장 중요한 내용만 다시 정리하면 이렇습니다.

첫 번째,
TypeScript는 자바스크립트를 더 안전하게 쓰기 위한 도구입니다.

두 번째,
: string, : number 같은 표시는
그 값의 타입을 적는 것입니다.

세 번째,
.ts는 TypeScript 파일 확장자입니다.

네 번째,
index.ts에서 index는 그냥 파일 이름이고
꼭 저 이름일 필요는 없습니다.

다섯 번째,
TypeScript는 보통 바로 실행하지 않고
자바스크립트로 변환한 뒤 실행합니다.

이 다섯 가지만 정확히 이해해도
처음 시작하는 단계에서는 충분히 잘 따라오고 있는 것입니다.

GOYO.’s Tip 💡

초심자가 TypeScript를 어려워하는 가장 큰 이유는
문법이 어려워서가 아니라
설명 없이 기호만 툭 던져지기 때문입니다.

예를 들어 : string을 처음 보면
이게 왜 붙는지, 꼭 써야 하는지, 어떤 역할인지
당연히 헷갈릴 수밖에 없습니다.

그래서 TypeScript를 공부할 때는
코드를 그냥 외우지 말고
항상 이렇게 생각하는 것이 좋습니다.

• 이 코드는 무슨 뜻이지?
• 이 기호는 왜 붙었지?
• 없으면 어떻게 되지?
• 자바스크립트와 뭐가 다르지?

이 질문을 계속 하면서 배우면
나중에 props, state, API 타입까지 갈 때 훨씬 덜 헷갈립니다.

마무리 🎯

이번 글에서는
TypeScript를 왜 배우는지부터
설치 방법, 설정 파일, .ts 파일의 의미,
그리고 : string이 왜 붙는지까지 자세히 알아봤습니다.

핵심은 어렵지 않습니다.

TypeScript는
코드에 값의 종류를 더 분명하게 적어서
실수를 줄이고,
읽기 쉬운 코드를 만들도록 도와주는 도구입니다.

그리고 지금 단계에서는
아래 흐름만 정확히 이해하면 됩니다.

• TypeScript 설치
• 설정 파일 생성
• .ts 파일 작성
• 타입 표시 이해
• 자바스크립트로 변환 후 실행