TS - 사용법 익히기

tsc hello.ts 파일생성 후, 아래 코드를 작성하면 hello.js파일이 생성되고, Ts파일의 내용이 컴파일 된다.

tsc hello.ts

--traget 만약 최신문법으로 컴파일 하고싶다면 target을 설정할 수 있다.

tsc hello.ts --target es6

 

--lib  promise , console과 같은 library를 사용해야 할 때 , typescript에서 '사용하겠다' 선언을해주어야 한다.

tsc hello.ts --lib es5,es2015.promise,es2015.iterable,dom

그냥 모든 걸 통틀어서 es2015,dom 으로 축약해서 쓸 수 있다.

tsc hello.ts --lib es2015,dom

node 이렇게 컴파일 된 코드는 node js 에서까지 사용할 수 있도록 컴파일된다.

 

node hello.js

 

 

--target --lib 두가지를 합쳐서 컴파일 할 수 도 있다.

tsc hello.ts --target es6 --lib es2015,dom

이 경우 즉, es6로 컴파일 된 파일은 node js에서 SyntaxError를 일으킨다 

그 이유는 node.js v12.18.3 에서는 es6문법이 적용되지 않고, common js 만 읽을 수 있기 때문이다

 

--module 원하는 모듈로 컴파일 할 수 있다.

tsc hello.ts --target es6 --lib es2015,dom --module commonjs

 

---

이러한 컴파일 옵션은 한번에 정리할 수 있지 않을까?

 

--showConfig  일단 현재 설정해 놓은 컴파일 설정을 보기.

tsc hello.ts --target es6 --lib es2015,dom --module commonjs --showConfig

{
    "compilerOptions": {
        "target": "es6",
        "lib": [
            "es6",
            "dom"
        ],
        "module": "commonjs"
    },
    "files": [
        "./hello.ts"
    ]
}

 

json 셋팅 이대로 json파일을하나 생성해서 거기에 컴파일링 setting을 해놓으면 된다.

{
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ],
    "compilerOptions": {
        "module": "commonjs",
        "rootDir": "src",
        "outDir": "dist",
        "target": "es5"
    }
}

module => es6로 설정을할 경우 index에 스크립트 type 코드 추가

{
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ],
    "compilerOptions": {
        "module": "es6",
        "rootDir": "src",
        "outDir": "dist",
        "target": "es6"
    }
}

index.html

<script type="module" src="dist/hello.js"></script>

souceMap : target을 es5으로 컴파일해도 TS에 작성된 문법이 chrome source창에 찍힌다.

removeComments : 주석 제거

noImplicitAny : 파라미터 값을 정해진 type만 받도록 설정할 수 있다.

{
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ],
    "compilerOptions": {
        "module": "es6",
        "rootDir": "src",
        "outDir": "dist",
        "target": "es5",
        "sourceMap":true,
        "removeComments": true,
        "noImplicitAny": true
    }
}