TypeScript_Project1:Target

▶ npm init -y : 새로운 nodejs Project 생성

npm init -y

script 부분 test 삭제

 

▶ npm i -D typescript : typescript 설치

 

npm i -D typescript

 

▶ src folder생성, tsconfig.json생성

• src\index.ts 생성
• tsconfig.json은 고정된 이름 : VSC가 typescript를 작업한다는 것을 알게해주며 아주 훌룡한 자동완성기능 제공

src폴더 생성 후, index.ts tsconfig.json 생성

index.ts 내용

tsconfig.json이 제공하는 자동완성 기능

▶ tsconfig.json 작성

• outDir : index.ts를 컴파일하여 생성한 자바스크립트의 위치 표기 (해당 script에선 build라는 폴더안에 생성)
• target : 생성할 자바스크립트의 버전 선택

 

▶ npm run build : index.ts를 기반으로 컴파일하여 Javascript생성

npm run build

build 성공 시, build폴더 안에 index.js 성공적으로 생성되어짐

생성된 index.js

• index.js 타입스크립트가 이 코드를 컴파일해서 낮은 버전의 자바스크립트 코드로 생성
• 어디서든 이해할 수 있는 더 호환성이 좋은 자바스크립트 코드로 생성한 것
  • ES3는 const가 존재하지 않기때문에 var가 사용된 것이며, arrow function이 존재하지 않기에 기본적인 함수로 컴파일 된것
  • 우리가 원한다면 이 코드가 어떤 버전의 자바스크립트로 바꿀지 정할 수 있음(기본꼴 : ES3 or ES5)
  • npm run build (target:ES6로 변경 후 생성된 index.js)

const와 화살표 함수를 사용하는 것 확인 가능

 

▶ index.ts - class 생성

▶ npm run build(target : "es3" 인 상태)