Photo by Imani Bahati on Unsplash
git init -y
package.json의 main 프로퍼티 삭제 script안의 프로퍼티 삭제
npm i -D typescript
-D -> package.json 의 debDependencies에 추가됨
소스폴더와 index.ts
파일을 아래와 같이 생성
tsconfig.json
파일도 생성 (반드시 이름이 tsconfig.json이어야함)
컴파일 테스트를 위해 테스트코드 작성
vscode가 tsconfig.json파일은 인지하고 편의기능(자동완성,툴팁.. 등) 제공
이제부터 vscode에서 다양한 옵션을 제공해줌
tsconfig 작성
{
"include":["src"],
"compilerOptions": {
"outDir": "build",
"target": "ES3"
}
}
어디에 ts파일이 있음? 을 알려주는 include
include:[]
[]
안에 js로 컴파일할 모든 폴더 혹은 파일 집어넣기
compilerOptions
outDir:
자바스크립트 파일이 생성될 디렉터리 지정
package.json
스크립트에 아래와 같이 입력
"scripts": {
"build": "tsc"
},
터미널에 npm run build 입력
아래와 같이 build폴더와 컴파일 된 index.js가 생성됨
컴파일 셋팅도 바꿀 수 있음 (js 버전을 입맛대로)
tsconfig.json 에가서 "target"을 만들어 주면 다양한 옵션 제공
const와 화살표함수가 존재하는 ES6로 설정하고
다시 npm run build를 해보면
js가 const와 화살표함수를 사용할 수 있음
index.ts
npm run build 후
index.js
typescirpt | tsconfig#target
#Target -target
최신 브라우저는 모든 ES6 기능을 지원하므로 ES6는 좋은 선택입니다. 만약 코드가 이전 환경에서 배포된 경우라면 더 낮은 버전을, 최신 환경에서 실행이 보장되는 경우 더 높은 버전을 선택할 수 있습니다.