1. 타입스크립트를 위한 환경 설정
이전에 사용했던 app.js와 index.html 파일을 가지고 적용한다.
일단, app.js 파일의 확장자를 .ts로 변경한다. html 태그 부분을 변경한다.
타입스크립트와 관련된 설정 파일을 생성한다. tsconfig.json 으로 생성한다.
타입스크립트는 브라우저에서 실행할 수 없으므로, 자바스크립트로 변환해야 하며, 변환시 여러가지 옵션을 적용할 수 있다.
이것을 compile이라고 하며, 어떤 기능을 적용 유무, 활성화 비활성화 유무를 강력하게 적용, 느슨하게 적용 할지를 설정할 수 있다.
이러한 항목을 compilerOptions에 설정할 수 있다.
-strict : 타입스크립트가 알려주는 정보량
-noimplycitAny / noImplicitThis : strict 모드 하위에 있는 세부 옵션
-> 자바스크립트 파일을 타입스크립트 파일로 전환시 변환되지 않은 자바스크립트 파일 내 타입들은 명시적으로 작성된것이 아니라 암묵적으로 타이핑된 상태, 기본적으로 어떤 타입이든 다된다는 Any, 타이핑 되지 않을 시 Any로 설정 옵션을 끄면 타입을 명확히 기술해야함
-target / module : 자바스크립트 버전 몇의 문법 체계를 쓸 것인가
https://www.typescriptlang.org/tsconfig을 활용하면 configuration 정보를 확인 할 수 있다.
dist 폴더에 .map은 sourceMap이라는 파일인데, 브라우저에서 앱을 실행했을때, 타입스크립트는 브라우저가 알 수 없기 때문에 코드에 문제가 있을 경우, 문제를 발견하기가 쉽지 않다. 타입스크립트로 작성을 하고 자바스크립트로 실행하는데, 실제 브라우저에서 작성한 원본 코드를 보면서 문제점을 찾을 수 있는 연결정보를 갖고 있는 파일이다.
기존에 파일은 3개 밖에 없었지만(app.ts/index.html/tsconfig.json), parcel를 실행하니까 새로운 파일과 디렉터리가 생성된다.(node_module 폴더/ dist / .cache) parcel.js가 앱을 만드는데 필요한 다양한 애플리케이션이 있는데, 자동으로 detect해서 설정을 끝내놓는 상황이라고 생각하면 편하다. 다른 번들러인 webpackJS로 설정하면 설정하는데 시간이 많이 소모된다. (참고로 진행하는 프로젝트가 있는데 번들링 오류 관한 이슈 사항이 있는데 지금 pending 상태이다.ㅠㅠ)
