타입스크립트 핸드북과 Udemy강의를 토대로 Typescript를 공부합니다.
관찰모드 사용하기🔥
변경사항이 있을 때마다 tsc 커맨드를 실행하고 파일을 입력할 필요 없고,
관찰모드(watch mode)를 사용하면 된다.
타입스크립트가 파일을 관찰하고 파일에 변경 사항이 있을 때마다 자동으로 컴파일된다.
tsc app.ts --watchortsc app.ts --w
단점은 이 파일을 구체적으로 지정해야 한다.타입스크립트 파일이 2개 이상이라면?
tsc --init입력
이 커맨드는 이 프로젝트를 타입스크립트 프로젝트라고 처음에 지정하고, 실행되는 폴더의 모든 항목을 알려주는 역할을 한다.
-> tsconfig.json 파일이 생성됨
이 파일은 타입스크립트가 관리해야 하는 이 파일이 포함된 프로젝트와
이 폴더의 모든 하위 폴더를 참고하기 위한 파일입니다.
이제 특정파일을 지정하지 않고도tsc를 입력하면 모든 타입스크립트 파일을 컴파일한다.
그리고 모두 관찰모드로 결합한다.tsc --watch
파일 포함 및 제외하기🔥
tsconfig.json 파일 : 프로젝트 관리에 중요한 파일
exclude는 컴파일해서는 안되는 파일을 컴파일에서 제외시킬 수 있다.
include는 컴파일 과정에 포함시킬 파일을 타입스크립트에 알려서
여기에 포함되지 않은 어떤 것도 컴파일되지 않도록 한다.
exclude와 include를 함께 설정하면 include가 필터링되므로
exclude를 제외한 채 include를 컴파일한다....}, //이곳에 내용추가 "exclude": [ "analytics.ts" ] } //"analytics.ts"파일을 제외하고 컴파일하겠다는 뜻 //tsc 입력시 analytics.js파일 생성 안됨
컴파일 대상 정하기 - compilerOptions(컴파일러로 파일 관리하는 방법)🔥
compilerOptions는 타입스크립트 코드가 컴파일되는 방식을 관리한다.
어떤 자바스크립트 버전을 대상으로 코드를 컴파일할지, 그리고 컴파일되는 파일이 타입스크립트로 어떻게 처리되어야 하는지를 설정할 수 있다.
”target”: “es6”나 ”target”: “es5”…변경 가능
typescript 핵심 라이브러리 이해하기
lib는 dom으로 작업을 수행하는 항목들, 즉 기본 객체, 기능, 타입스크립트 노드를 지정하게 해주는 옵션
lib 옵션이 설정되지 않은 경우, 일부 기본 설정이 적용되는데 이러한 기본 설정은
타입스크립트가 브라우저에서 작동하는 데 필요한 사항들이므로 dom API 등이 포함된다.주석 처리를 해제하면 기본 설정이 더이상 적용되지 않기 때문에,
몇가지 기본타입 정의를 해야한다.
정의하지 않으면 에러 발생"lib": [ "dom", "es6", "dom.iterable", "scripthost" ]
추가구성 및 컴파일 옵션
allowJs는 타입스크립트가 자바스크립트 파일을 컴파일할 수 있도록 해줍니다.
allowJS : 컴파일시 checkJS와 함께 자바스크립트 파일에 포함시킬 수 있습니다.
checkJS를 사용하면 타입스크립트는 컴파일을 수행하지 않더라도 구문을 검사하고 잠재적 에러를 보고해 줍니다."allowJS": true, "checkJS": true
소스맵 작업하기
sourceMap은 디버깅 작업과 개발에 유용하다.
개발자도구 > source tab으로 가면 -> js파일만 존재한다.
그럼 그곳에서 ts파일은 어떻게 볼까?
"sourceMap" : true 로 하고 tsc커맨드를 다시 실행하면 js.map파일들이 생성되는데, 이 파일들이 다리역할을 한다!
이제 개발자도구에서 ts파일도 볼 수 있다.
타입스크립트 파일에 중단점을 둘 수도 있다.
(디버깅 프로세스를 한 단계 향상시켜줌)"sourceMap" : true
rootDir 및 outDir
"outdir": "./dist"
//dist 폴더는 모든 출력값을 보관하는 작업을 수행합니다.
"rootDir": "./src"
//ts파일은 src폴더에 한번에 넣을 수 있음
"removeComments" : true
//ts파일의 모든 주석이 컴파일된 자바스크립트 파일에서 제거됨
"noEmit" : true
//js파일을 생성하지 않는다.
"downlevelIteration" : true
//고급기능
//정확하게 컴파일을 할 수 있습니다.
//코드를 이전 버전의 자바스크립트로 컴파일하고 for 루프로 작업한 다음
//드물지만 컴파일이 제대로 작동하지 않는 경우 (루프가 있고 생성된 코드가 해당 루프와 다르게 작동하는 경우에만)
//이 옵션을 사용해야 합니다.컴파일 오류 시 파일 방출 중지하기
에러가 있으면 문제가 되는 파일이 다시 생성되지 않는다.
기본값은 false : ts가 에러를 감지하지 못한다.
이 옵션은 일반적으로 타입스크립트 파일에 에러가 있는 경우,
자바스크립트 파일을 가져오고 싶지 않은 경우에 설정합니다.noEmitOnError : true
strict 컴파일
strict 옵션은 올바른 코드를 작성하고 발생할 수 있는 생소한 런타임 박스가 나타나지 않도록 예를 들어, 엄격한 null 검사를 통해 도움을 줍니다.
strict옵션 아래 하위 옵션들이 있는데 strict옵션만 true면 전체 하위 옵션을 모두 허용한다.
strict옵션 허용하지 않고 개별로 하위옵션만 허용할 수도 있다.(느낌표는 타입스크립트가 개발자에게 이 button이 존재하거나 이 연산이 null이 아닌 값을 반환한다는 걸 알 수 있게 해주는 역할을 합니다.)
코드 품질 옵션
noUnusedLocals, nounusedParameters, noImplicitReturns 옵션
코드 품질을 향상시켜주는 옵션들로 기본적으로 사용되지 않은 변수가 있으면 타입스크립트가 에러를 표시합니다.예를 들어, 이 세 옵션을 켜면 break 키워드 잊어버릴 수 있는 switch 문을 입력하도록 해줍니다.
"noUnusedLocals" : true "nounusedParameters" : true //사용하지 않는 지역/전역 변수, 매개변수 들에 노란지렁이줄로 경고를 표시한다. "noImplicitReturns" : true //반환하지 않는 함수가 있는 경우 에러 발생
