Typescript 환경 구축 및 ts 파일 디버깅 방법

1. TypeScript를 전역적으로 설치

cmd 창을 열고 다음 명령을 실행합니다.

npm install typescript -g

# 或者以下简写方式安装
npm i typescript -g

설치가 완료되면 명령을 실행하여 TypeScript 설치 버전을 볼 수 있습니다.

tsc -v

설치에 성공하면 설치된 버전 번호를 볼 수 있습니다.

여기에 이미지 설명 삽입

2. 디버그 ts 파일 방법 1 (먼저 컴파일 후 실행)

TypeScript 파일(이후 "ts"라고 함)을 저장할 새 폴더를 로컬로 만듭니다.

"index.ts"와 같은 새 ts 파일을 만듭니다.
여기에 이미지 설명 삽입
ts 파일을 실행하여 인쇄 결과를 봅니다. 방법:

1. ts 파일을 js 파일로 컴파일

① 단일 ts 파일을 컴파일하는 방법

주문 실행:

tsc ts文件名 --watch

# 或者简写形式
tsc ts文件名 -w

지정된 ts 파일을 컴파일하여 지정된 ts 파일을 해당 js 파일로 컴파일합니다.

예를 들어:

tsc index.ts -w

명령을 실행한 후 "ndex.ts" 파일은 그림과 같이 해당 js 파일 "ndex.js"를 생성합니다.
여기에 이미지 설명 삽입

② 여러 개의 ts 파일을 컴파일하는 방법

먼저 "tsconfig.json" 파일을 생성한 다음 "tsc -w" 명령을 실행하면
파일 이름을 지정할 필요 없이 js 파일을 직접 생성할 수 있으며 모든 ts 파일을 해당 js 파일로 컴파일할 수 있습니다.

"tsconfig.json" 파일 생성 방법:
다음 명령을 실행합니다.

tsc --init

명령을 실행하면 그림과 같이 "tsconfig.json" 파일이 생성됩니다.

여기에 이미지 설명 삽입

팁: ts 코드를 작성할 때 다음과 같은 오류 메시지가 나타납니다.

여기에 이미지 설명 삽입
마우스를 오류 위치에 놓으면 다음과 같은 오류 메시지가 나타납니다.
여기에 이미지 설명 삽입
"export {}"를 추가하면 오류 메시지가 사라집니다.

여기에 이미지 설명 삽입

2. js 파일 실행

참고: 위의 "tsc -w"를 사용하여 ts 파일을 js 파일로 컴파일한 후 이 명령으로 열린 모니터링 창을 닫지 마십시오. 그러면 ts 파일이 수정될 때마다 해당 js 파일이 제 시간에 업데이트됩니다.

js 파일을 실행하고 다음 명령을 실행합니다.

node js文件名

그림과 같이:
여기에 이미지 설명 삽입

3. ts 파일 방식을 직접 실행

1. "ts-node"를 전체적으로 설치합니다.
2. "npm init -y" 명령을 실행하여 "package.json" 파일을 생성합니다.
3. 노드 선언 파일을 설치합니다. - - - "npm i @types/node -D"
4. ts 파일을 실행하고 결과를 출력합니다. - - - "ts-node ts file name"

cmd를 열고 다음 명령을 입력하여 설치하십시오.

npm i ts-node -g

ts 파일이 있는 폴더로 이동하고 명령을 실행하여 "package.json" 파일을 생성합니다.

npm init -y

노드 선언 파일을 설치합니다.

npm i @types/node -D

설치 후 그림과 같이
여기에 이미지 설명 삽입

그런 다음 ts 파일을 직접 실행하여 출력을 볼 수 있습니다.
예:

ts-node index.ts

작업 결과는 다음과 같습니다.
여기에 이미지 설명 삽입

추천

출처blog.csdn.net/qq_39111074/article/details/131825544