본문 바로가기
Front-End (web)

[Typescript] 개발 환경 만들기

by 햄과함께 2019. 7. 24.
320x100

typescript -> javascript 컴파일 해서 결과 확인하는 용도의 개발환경 만들기

$ npm install -g typescript

typescript 먼저 설치.

- test.ts
- tsconfig.json

파일은 위에 2개만 만들었다.

// tsconfig.json
{
    "compilerOptions": {
        "outDir": "./out/",
        "target": "es6",
        "strictNullChecks": true
    }
}

tsconfig는 위와 같이 적어두었다.

typescipt의 컴파일 옵션만 간단하게 설정했는데  outDir 은 컴파일 결과(.js 파일들)를 어느 폴더에 저장할지에 대한 설정이다.

 target 에는 컴파일 한 javascript의 버전을 명시한다.

 strictNullChecks 는 엄격한 null 체크에 대한 옵션이다.

이 외에 자세한 설정은 typescript handbook 참고.

test.ts에는 작성하고 싶은 typescript 를 작성하면 된다. 이름은 아무렇게나 해도 상관없고 확장자명이 .ts 면 ok.

$ tsc

만든 폴더의 루트 위치에서 위 명령어를 실행하면 tsconfig.json 옵션대로 .ts 파일들이 컴파일되어 outDir에 지정한 폴더 위치에 .js 파일들이 생성된다.

 tsc <파일이름.ts>  이렇게 하면 tsconfig.json 옵션이 적용되지 않는다.

컴파일 옵션 파일 추가하는 명령어 옵션이 있을 것 같은 느낌은 드는데 이건 따로 찾아봐야 알 것 같다.

예시

test1.ts가 컴파일되어 out/test1.js 파일이 만들어졌다.

 

이렇게 만들어두면 간단한거는 바로바로 확인해볼 수 있어서 좋은 것 같다.

320x100

댓글