내 컴퓨터에서 검사하고 돌리기

내 컴퓨터에서 타입스크립트를 검사하고 돌리려면, 과목이 주는 두 파일(package.json · tsconfig.json)을 작업 폴더에 두고 npm install → npx tsc → node main.ts 차례로 칩니다. 레슨과 같은 판 · 같은 설정이라 오류 번호와 문장, 찍히는 값이 레슨과 같습니다.

설치는 선택입니다. 설치가 막혀도 레슨은 폰으로 결과를 맞혀 보며 끝까지 배울 수 있습니다. Windows나 macOS 컴퓨터와, 자바스크립트 과목에서 설치한 Node가 있어야 합니다.

JS 다시 보기: 작업 폴더를 편집기로 열고, 편집기의 터미널에서 node main.js로 파일을 실행했습니다(JS '내 컴퓨터에서 돌려 보기').

 added 2 packages, and audited 3 packages in 2s found 0 vulnerabilities

가격 4500원

1작업 폴더와 파일 셋

새 작업 폴더를 편집기로 열고 파일 셋을 만듭니다. 둘은 과목이 주는 설정 파일이고, 하나는 검사하고 돌릴 코드입니다.

첫째는 package.json입니다. 손으로 치지 말고 복사해 붙여 넣은 뒤 저장합니다.

{
  "type": "module",
  "devDependencies": {
    "typescript": "7.0.2"
  }
}

"type": "module"은 자바스크립트 과목의 package.json과 같은 줄이고, devDependencies(만드는 동안 쓰는 도구 목록)에 타입스크립트 판을 7.0.2로 정해 둡니다.

둘째는 검사기 tsc가 읽는 설정 파일 tsconfig.json입니다. 이 과목의 모든 예제를 이 설정으로 검사했으니 이것도 복사해 붙여 넣습니다.

{
  "compilerOptions": {
    "strict": true,
    "target": "esnext",
    "module": "nodenext",
    "types": [],
    "noEmit": true,
    "moduleDetection": "force",
    "verbatimModuleSyntax": true,
    "erasableSyntaxOnly": true,
    "allowImportingTsExtensions": true,
    "skipLibCheck": true
  }
}

"strict": true는 이 과목이 보이는 엄한 검사를 켜고, "noEmit": true는 검사만 하고 .js 파일은 만들지 않게 합니다. 나머지 줄의 뜻은 10단원에서 읽습니다.

셋째는 main.ts입니다. 다음 절의 네 걸음을 마치면 터미널에 아래 실행 결과가 나옵니다.

const price: number = 4500;
console.log(`가격 ${price}원`);

가격 4500원

2네 걸음 — 받고, 검사하고, 실행한다

편집기의 터미널을 열면 작업 폴더에서 시작합니다. 명령은 한 줄씩 치고 Enter를 누릅니다.

1. 두 파일과 main.ts를 저장합니다. 1절의 세 파일입니다.
2. npm install을 칩니다. Node와 함께 깔린 도구 npm이 package.json에 적힌 typescript 7.0.2를 받아 이 폴더에 깝니다. added 2 packages로 시작하는 줄과 found 0 vulnerabilities⁠가 나오면 됩니다.
3. npx tsc를 칩니다. npx는 이 폴더에 깐 도구를 찾아 실행합니다. tsc가 tsconfig.json을 읽고 폴더의 .ts 파일을 검사하고, 검사 오류가 없으면 아무것도 찍지 않습니다.
4. node main.ts를 칩니다. Node가 타입 글자를 지우고 실행해 가격 4500원을 찍습니다.

npm install은 폴더마다 처음 한 번만 하고, 그때 생기는 node_modules 폴더와 package-lock.json 파일은 손대지 않습니다. 그 뒤로는 코드를 고칠 때마다 저장하고 3 · 4를 되풀이합니다. Node는 검사하지 않으니 늘 npx tsc를 먼저 칩니다.

터미널의 글은 레슨 상자와 꼴이 조금 다릅니다. 검사 오류는 타입 오류 읽기 4절의 꼴이라, 1번 줄의 4500을 '4500'으로 바꾸면 main.ts:1:7 - error TS2322⁠로 시작하고 코드 줄 · 물결 밑줄 · Found 1 error in main.ts:1⁠이 붙습니다. 실행 중 오류는 자리 앞에 file:///…/main.ts:4처럼 폴더 경로가 붙고, node:가 든 at 줄 여럿(Node 안쪽 — 읽지 않아도 됨)과 Node.js v26.12.0이 더 찍힙니다. 오류 번호 · 문장과 오류 이름 줄은 레슨 상자와 같습니다. 판은 npx tsc --version으로 봅니다.

Version 7.0.2

3막혔을 때

터미널에 아래 글이 나오면 까닭과 할 일을 표에서 찾습니다.

TS5112는 'tsconfig.json이 있지만 명령에 파일 이름을 적으면 읽지 않는다'는 뜻입니다. 끝의 --ignoreConfig를 붙이라는 말은 따르지 않습니다 — 설정 파일을 읽지 않아 레슨과 다르게 검사하고 main.js 파일까지 만듭니다. npm install을 하지 않은 폴더에서 npx tsc를 치면 npx가 tsc라는 이름의 다른 꾸러미를 받을지 먼저 묻습니다. 받지 말고 npm install부터 칩니다.

4플레이그라운드와 다른 점

앞 레슨들의 '해 보기'에서 쓴 플레이그라운드는 설치 없이 되지만, 코드 맨 위에 export {}; 한 줄을 더해야 하고 판이 6.0이라 오류 문장 몇 개가 7.0과 다릅니다. 내 컴퓨터의 네 걸음에는 이 두 가지가 없습니다. 편집기의 물결 밑줄은 편집기에 든 검사기가 긋습니다. 그 판이 7.0.2와 다를 수 있으니, 레슨과 맞춰 볼 때는 npx tsc의 검사 결과를 기준으로 삼습니다.

예제

이 main.ts로 npx tsc를 치면 몇 번 줄에서 검사 오류가 나고, 이어서 node main.ts를 치면 무엇이 찍힐까요? 먼저 적어 본 뒤 펼쳐 보세요. 맞혀 보기는 점수에 들지 않습니다.

const item: string = '라테';
const price: number = '4500';
console.log(item, price);

main.ts(2,7): error TS2322: Type 'string' is not assignable to type 'number'.

라테 4500

자주 틀리는 곳

틀린 생각: npx tsc가 아무것도 찍지 않으면 검사가 되지 않은 것이다.

명령이 끝나면 보통 무언가 알려 주니, 아무 글도 없으면 멈추거나 실패한 것처럼 보입니다. 그러나 1절 main.ts처럼 검사 오류가 없는 코드로 npx tsc를 치면 아무 글 없이 다음 입력 줄이 나옵니다. 레슨의 검사 결과 상자가 '오류 없음'인 것과 같은 뜻입니다.

맞는 규칙: tsc는 검사 오류가 없으면 아무것도 찍지 않습니다. 글 없이 다음 입력 줄이 나오면 검사 오류가 0이니, 이어서 node main.ts를 칩니다.

틀린 생각: package.json은 npm init -y로 새로 만들어도 된다.

npm을 쓰는 글에서 흔히 보는 npm init -y는 package.json에 "type": "commonjs" 줄을 넣어 옛 방식으로 읽게 합니다. 지금 레슨들의 코드는 그대로 돌지만, 파일을 나눠 import를 쓰는 날(10단원) TS1295 오류가 납니다. typescript 판도 적혀 있지 않아 레슨과 다른 판을 받을 수 있습니다.

맞는 규칙: 과목의 package.json에는 모듈 방식("type": "module")과 검사기 판(7.0.2)이 함께 적혀 있습니다. 새로 만들지 말고 과목 파일을 그대로 붙여 넣습니다.

확인 문제

1. 1절 main.ts의 1번 줄을 const price: number = '4500';⁠으로 바꾸고, npx tsc와 node main.ts를 차례로 쳤습니다. 각각 무엇이 나올까요? 실행 결과는 1절과 같을까요?

const price: number = '4500';
console.log(`가격 ${price}원`);

main.ts(1,7): error TS2322: Type 'string' is not assignable to type 'number'.

가격 4500원

2. 새 작업 폴더에서 처음 검사하고 돌리기까지의 차례대로 ㉠~㉣을 놓으세요.

• ㉠ node main.ts를 친다
• ㉡ npm install을 친다
• ㉢ package.json · tsconfig.json · main.ts를 저장한다
• ㉣ npx tsc를 친다

놓은 뒤에는 이것도 고르세요. ㉣이 ㉠보다 앞에 와야 하는 까닭은 무엇일까요?

• ① Node는 검사하지 않고 실행하기 때문
• ② tsc가 main.ts를 main.js로 바꿔 줘야 Node가 실행할 수 있기 때문
• ③ tsc가 타입 글자를 지워 줘야 Node가 실행할 수 있기 때문

3. 어떤 사람이 새 폴더에 세 파일을 저장한 뒤 바로 npx tsc를 쳤습니다. 꾸러미를 받을지 묻는 물음에 y를 쳤더니 이런 글이 나왔습니다. 무엇을 빠뜨렸을까요?

• ① npm install
• ② tsconfig.json
• ③ Node 26 설치

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절대로 작업 폴더를 만들고 네 걸음을 해 봅니다. 그다음 npx tsc main.ts를 치면 무엇이 나올지 먼저 적고, 쳐서 맞춰 본 뒤 npx tsc로 다시 검사합니다. 이제 1단원 레슨들의 '해 보기'도 이 폴더에서 해 볼 수 있습니다. main.ts에 그 레슨의 코드를 붙여 넣고 바꿀 곳은 하나입니다.

• 타입 검사기가 하는 일 — prise를 price로 고친 뒤 다시 검사
• 타입은 실행 전에 지워진다 — '만 원'을 10000으로 바꾸기
• 타입 적기와 넣을 수 있는지 검사 — 3번 줄을 지우고 검사
• 타입 오류 읽기 — latte를 만든 줄의 따옴표만 지우고 검사
• 적지 않아도 붙는 타입 — 추론 — let을 const로 바꿔 편집기에서 마우스 올려 보기