TypeScript 환경설정

JavaScript로 작성된 코드를 TypeScript로 변경한다. 예전에는 언어 변경을 '포팅'이라고 많이 불렀다. 

자바스크립트에서는 parcel.js라는 번들러로 큰 설정없이 개발이 가능했다. 

타입스크립트에서도 parcel.js를 사용이 가능하지만 약간의 추가적인 설정이 필요하다. 

 

1. 이름은 app.js에서 app.js로 타입스크립트 파일이라고 선언해줘야한다.

2. tsconfig.json이라는 설정파일을 만들어줘야 한다. 타입스크립트는 트랜스 파일러다. 그래서 웹에서 동작시킬려면 js로 변환을 해줘야한다. 이 컴파일 과정에서 여러 옵션을 설정할 수 있다. (설정을 하지않으면 기본설정이 적용된다.)

{
	"compilerOptions": {
    	// 기능을 얼마나 엄격하게 적용할것인가. false로 해두면 자스파일에서도 아무런 오류없이 작동한다.
        // 하지만 true일때는 타스문법적으로 틀리면 이 부분을 타이핑해야된다고 알려준다.
        "strict": true,	
        "target": "ES5",
        "module": "CommonJS",
        "alwaysStrict": true,
        // 타입이 정해지지않으면 암묵적으로 타입을 정해주는데 그게 Any다. 끄고키는 기능. 명확하게 어떤 타입인지 선언해야한다.
        "noImplicitAny": true,
        "noImplicitThis": true,
        "sourceMap": true,
        "downlevelIteration": true
    }
}

타입스크립트로 변환을하게되면 dist라는 폴더가 생성되는데 타입스크립트 파일을 컴파일한 결과를 보관하는 폴더이다. 

타입스크립트 파일을 컴파일러가 자바스크립트 파일로 변환해서 웹에서 사용해서 변환된 js파일이 저장된다. 

그러다보니 sourceMap이라는 파일이 필요하다.  파일명.js.map이라는 이름으로 폴더안에 들어있는데. 

코드작성은 ts로하고 실행은 js로 하다보니 어디서 어떤오류가 발생했는데 소스의 연결이되서 어느부분이 문제가 있는지 맵핑되게된다.