TypeScript란 무엇인가: JavaScript와 차이 정리

실습 경로: 개발 환경 확인 → TypeScript 로컬 설치 → 첫 파일 실행 → 현재 ZIP → 전체 코드. 처음이라면 위에서부터 순서대로 진행하세요.

Node.js와 npm부터 확인합니다

TypeScript를 npm으로 설치해 사용하려면 먼저 Node.js 환경이 필요합니다. VS Code에서 터미널을 열고 다음 두 명령을 실행하세요.

node -v
npm -v

두 명령 모두 버전 번호가 출력되면 준비된 상태입니다. 명령을 찾을 수 없다는 메시지가 나오면 Node.js를 먼저 설치해야 합니다. 이 글에서는 특정 Node.js 버전을 강제하지 않고, 현재 지원되는 Node.js 환경에서 학습하는 것을 기준으로 합니다.

학습용 프로젝트를 만들고 TypeScript를 설치합니다

처음부터 직접 환경을 만드는 흐름을 한 번 경험해보겠습니다. 새 폴더를 만들고 npm 프로젝트를 초기화한 뒤 TypeScript를 개발 의존성으로 설치합니다.

mkdir typescript-study
cd typescript-study
npm init -y
npm install -D typescript
npx tsc --version

npm install -D typescript는 현재 프로젝트에 TypeScript를 설치합니다. 전역 설치에 의존하지 않으므로 프로젝트마다 사용할 TypeScript 버전을 관리하기 쉽습니다. 설치가 끝난 뒤 npx tsc --version에서 버전이 출력되면 컴파일러를 사용할 준비가 된 것입니다.

첫 TypeScript 파일을 컴파일하고 실행합니다

프로젝트 폴더에 hello.ts를 만들고 아래 코드를 입력합니다.

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

이제 TypeScript 파일을 JavaScript로 변환하고 Node.js로 실행합니다.

npx tsc hello.ts
node hello.js

터미널에 Hello TypeScript가 출력되면 설치부터 컴파일, 실행까지 첫 환경 준비가 끝났습니다. .ts 파일을 작성하고 TypeScript 컴파일러가 검사·변환한 JavaScript를 실행한다는 기본 흐름을 먼저 기억하면 됩니다.

현재 실습 프로젝트를 실행합니다

이제 아래 ZIP을 풀고 package.json이 있는 폴더를 VS Code로 엽니다. 이 실습에는 필요한 TypeScript 버전과 실행 스크립트가 이미 정의되어 있으므로 다음 명령을 차례로 실행하면 됩니다. 이 실습은 브라우저 화면 대신 터미널 출력을 사용합니다.

npm install
npm run build
npm start

정상 결과는 25000입니다. check.ts에서 30000과 5000을 받아 할인 금액을 계산합니다. 설정 파일은 첫 실행에서는 수정하지 않아도 됩니다. check.ts 전체 코드

숫자를 문자열로 바꾸고 오류를 고칩니다

1. check.ts에서 console.log(getDiscountPrice(30000, 5000));를 찾습니다.
2. 첫 번째 값만 "30000"으로 바꾸고 npm run build를 실행합니다.
3. 문자열 인수를 숫자 매개변수에 전달할 수 없다는 오류를 확인합니다. 이 단계의 실패는 의도한 결과입니다.
4. 다시 숫자 30000으로 고친 뒤 빌드·실행하여 25000을 확인합니다.

전체 파일에 있는 오류 예제: typeChecks 안의 @ts-expect-error는 다음 줄의 타입 오류를 예상한다는 표시입니다. 그 줄의 오류를 직접 보고 싶으면 바로 위 주석을 지우세요. 이 함수는 호출하지 않으므로 정상 실행 중에는 잘못된 코드를 실행하지 않습니다.

실습 전체 코드

처음 읽을 파일은 check.ts입니다. 아래 코드는 수정 전후 비교용 파일이 아니라 처음 실행할 수 있는 완성본입니다. check.ts 전체 코드

function getDiscountPrice(price: number, discount: number): number {
  return price - discount;
}
console.log(getDiscountPrice(30000, 5000));
function typeChecks() {
  // @ts-expect-error 문자열은 number 인수로 전달할 수 없습니다.
  getDiscountPrice("30000", "5000");
  const user = { name: "해비", age: 30 };
  // @ts-expect-error email 속성이 없습니다.
  console.log(user.email);
}
void typeChecks;

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "CommonJS",
    "outDir": "dist",
    "noEmitOnError": true,
    "types": []
  },
  "files": ["check.ts"]
}

{
  "private": true,
  "scripts": {
    "build": "tsc -p tsconfig.json",
    "start": "node dist/check.js"
  },
  "devDependencies": {
    "typescript": "7.0.2"
  }
}

타입은 값의 약속을 검사합니다

price: number는 price에 숫자를 전달하겠다는 약속입니다. 함수 호출에서 문자열을 전달하면 계산을 시작하기 전에 타입 검사기가 알려줍니다. 값을 숫자로 자동 변환하는 기능은 아닙니다.

function getDiscountPrice(price: number, discount: number): number {
  return price - discount;
}

변환된 dist/check.js를 열면 매개변수의 : number가 없어집니다. 브라우저가 실행하는 것은 JavaScript이며, 타입 검사와 실행은 별도 과정입니다. Node.js의 타입 제거 실행도 타입 검사 자체를 대신하지 않습니다.

타입 검사로 잡지 못하는 문제도 있습니다

서버에서 받은 실제 값의 형태, 빈 배열의 평균, 할인 금액이 가격보다 큰 경우는 별도 확인이 필요합니다. number에는 NaN도 포함됩니다. 타입이 맞는다는 사실과 서비스 규칙에 맞는다는 사실을 구분하세요.

객체에서 존재하지 않는 속성을 읽는 실수는 타입 검사로 찾을 수 있습니다. 예제의 user.email은 객체에 없는 속성입니다. 이후 타입 좁히기 글에서 외부 값을 안전하게 확인하는 방법을 학습합니다.

완료 기준과 다음 학습

• Node.js와 npm이 동작하는지 확인했습니다.
• 학습용 프로젝트에 TypeScript를 로컬로 설치하고 컴파일러 버전을 확인했습니다.
• hello.ts를 컴파일하고 JavaScript 결과를 실행했습니다.
• 현재 실습 프로젝트에서 정상 빌드와 출력 25000을 확인했습니다.
• 문자열 인수를 넣었을 때 오류를 읽고 숫자로 고쳤습니다.
• 출력 JavaScript에서 타입 주석이 사라지는 것을 확인했습니다.

다음에는 기본 타입 글에서 객체·배열·함수의 형태를 표현합니다. 제네릭과 조건부 타입은 그 뒤에 배워도 됩니다.

검증 범위와 기존 참고 이미지

기존 완성본은 Node.js 24.19.0·TypeScript 7.0.2에서 타입 검사와 25000 출력을 확인한 자료입니다. 이번 재구성에서도 동일한 코드와 ZIP을 사용합니다. 아래 이미지는 개념 비유이며 실제 오류 메시지는 터미널에서 확인합니다.

참고 자료와 다음 학습

• 2026 프론트엔드 개발자 로드맵
• TypeScript 공식 설치 안내
• TypeScript 공식 소개
• basic-types.html#erased-types
• typescript.html#type-stripping
• TypeScript Literal Narrowing 문서
• TypeScript 실무 로드맵