-
준비물
Node.js: TypeScript를 프로젝트에 사용하려면 Node.js가 설치되어 있어야 한다.
nodejs에 npm을 통해서 설치: NodeJs 설치;
Visual studio code 설치: Vsc, VSCode(Visual Studio Code) 설치설치 유형: '글로벌 설치' 폴더 위치와 상관없이 전역으로 사용. '로컬 설치' 해당 폴더(프로젝트 폴더)에서 개벌적으로 사용.
글로벌 설치
설치 명령어 (2가지 방법)
npm install --global typescript또는
npm i -g typescript설치 후 프로젝트에 적용
npm link typescript또는
npm link typescript -dev로컬 설치
typescript 모듈 설치는 글로벌(global), 로컬(local) 두가지 방법이 가능하지만, 권장되는 방법은 로컬 설치다
설치 명령어
방식1
npm install --save-dev typescript방식2
npm i -D typescript방식3
npm i typescript -dev설치 과정에 출력되는 Ex
PS D:\TypescriptT1> npm i -D typescript added 1 package, and audited 2 packages in 2s found 0 vulnerabilities PS D:\TypescriptT1> dir 디렉터리: D:\Temp\TypescriptT1 Mode LastWriteTime Length Name ---- ------------- ------ ---- d----- 2022-11-15 19:46 node_modules -a---- 2022-11-15 19:46 894 package-lock.json -a---- 2022-11-15 19:46 58 package.json -a---- 2022-11-15 19:42 31 t1.ts설치 후 자동으로 생성되는 폴더와 파일들
설치 확인
설치된 버전 확인 명령어
tsc -v
간단한 코드 테스트
t1.ts 파일
class C1 { name = ''; } console.log("test console.log"); //alert("aaa"); //document.write("aaa");ts파일 컴파일(로컬로 설치된 typescript 방식)
node_modules\.bin\tsc t1.ts실행하고 나면 t1.js파일이 자동으로 만들어져 있다.
var P1 = /** @class */ (function () { function P1() { this.name = ''; } return P1; }());또는 프로젝트 폴더에서 tsc만 실행하면 ts파일들이 빌드되어 dist폴더에 들어간다( tsc tsconfig.json 생성 ).
Vsc에서 Ts파일 빌드 'https://infos.tistory.com/4904'
node로 js실행
node t1.js예제 화면
기타
js파일을 html에서 불러와서 실행 확인
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> </head> <body> text1 <script src="t1.js"> </script> text2 </body>기타
launch.json로 실행 명령어 지정
{ "version": "0.2.0", "configurations": [ { "command": "node ${workspaceFolder}\\dist\\t1", "name": "Run node t1", "request": "launch", "type": "node-terminal" }, ] }Vsc에서 '실행'을 하면 node로 t1.js를 작동 시킨다.
기타
tsc빌드 환경값: tsc tsconfig.json 생성
'Typescript' 카테고리의 다른 글
Vsc & NodeJs 에서 Typescript 빌드 (0) 2022.11.20 node_modules 재설치 (0) 2022.11.18 Type casting, string to number to string (0) 2022.11.18 Vsc & Nodejs & React & Typescript 사용하기 (0) 2022.11.18 eslint Plugin "react" was conflicted between "package.json (0) 2022.11.18 Typescript Tsc 컴파일러(Compiler) 옵션 (1) 2022.11.18 any (0) 2022.11.15 tsc tsconfig.json 생성 (0) 2022.11.15