TypeScript -13-

mh·2022년 5월 13일
0

TypeScript

목록 보기
13/17
post-thumbnail

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파일은 인지하고 편의기능(자동완성,툴팁.. 등) 제공

tsconfig 설정


이제부터 vscode에서 다양한 옵션을 제공해줌

tsconfig 작성

{
    "include":["src"],
    "compilerOptions": {
        "outDir": "build",
        "target": "ES3"
    }
}

어디에 ts파일이 있음? 을 알려주는 include

include, compilerOptions: outDir,

include:[]
[]안에 js로 컴파일할 모든 폴더 혹은 파일 집어넣기

compilerOptions
outDir:
자바스크립트 파일이 생성될 디렉터리 지정

package.json 스크립트에 아래와 같이 입력

  "scripts": {
    "build": "tsc"
  },

터미널에 npm run build 입력

아래와 같이 build폴더와 컴파일 된 index.js가 생성됨

target

컴파일 셋팅도 바꿀 수 있음 (js 버전을 입맛대로)
tsconfig.json 에가서 "target"을 만들어 주면 다양한 옵션 제공

const와 화살표함수가 존재하는 ES6로 설정하고
다시 npm run build를 해보면

js가 const와 화살표함수를 사용할 수 있음

Class를 ES3로 컴파일 해보기

index.ts

npm run build 후

index.js

typescirpt | tsconfig#target
#Target -target
최신 브라우저는 모든 ES6 기능을 지원하므로 ES6는 좋은 선택입니다. 만약 코드가 이전 환경에서 배포된 경우라면 더 낮은 버전을, 최신 환경에서 실행이 보장되는 경우 더 높은 버전을 선택할 수 있습니다.

profile
🤪🤪🤪🤪🤪

0개의 댓글