23/12/19 TIL __ typeScript 탄생 배경 및 파일 설정 옵션들

 

 

타입스크립트 강의를 들으며 정리를 해본다. 

 

타입스크립트란 ?

• 마이크로소프트 에서 개발한 오픈소스 프로그래밍 언어이다.

 

나오게 된 배경

• 자바스크립트는 인터프리터 언어이고, 컴파일 단계가 없어 런타임 에러가 잘 발생한다. 
• 이러한 부분을 미리 방지하고자 타입을 명확히 해서 실행시키기 전에 개발자가 파악할 수 있도록 하기 위해 나왔다.

 

자바스크립트의 단점으로는 아래와 같은 것들이 있다.

1. 실행시간에 결정되는 변수 타입
2. 약한 타입 체크
3. 너무 물렁물렁한 객체 

 

타입스크립트를 사용하면 뭐가 좋을까?

• 코드를 실행할때 나오는 에러를 보고서야 코드의 문제를 파악할 수 있는 자바스크립트 와는 다르게,
• 컴파일 단계에서 코드의 문제를 알려준다.( 이때 타입 검사를 한다)
•  
• 또한 이름이 타입스크립트인 만큼 타입체크를 열심히 해줘서 너무 유연했던 변수의 타입들을 보완해준다.

• 정의되지 않은 객체의 속성을 계산하는 그런 멍청한 짓을 하지 않고, 똑똑하게 이거 정의되지 않았다고 알려준다.
• 이미 정의된 객체의 속성을 마음대로 너무 쉽게 바꿀수 있던 자바스크립트와 다르게 접근제어자를 붙여줘서 정보를 캡슐화, 은닉화 할 수 있다.
• 테스트 코드 작성이 중요했던 자바스크립트 보다 비지니스로직 작성에 좀더 집중할 수 있도록 돕는다.
•  

 

 

 

타입스크립트의 컴파일러

• 타입스크립트의 컴파일러인  tsc 
• tsc는 타입스크립트에서 자바스크립트로 코드변환을 해준다.
• 기계어로 변환은 하지 않는다. 인터프리터 언어이기 때문에 브라우저의엔진이 코드 해석 및 실행을 돕는다.(만약 컴파일 언어라면 기계어로 변환을 해줘야 하지만 말이다)
• 소스코드에서 문제가 발생하면 바로 에러메세지를 출력하기에 신속한 문제해결에 도움을 준다.

 

 

 

tsconfig.json 파일 설정하기.

 

• compilerOptions : { strict : true}       👉  모든 엄격한 유형 검사를 하겠다는 의미.
• compilerOptions : { sourceMap : true}. 
•  👉 .map 파일을 만들겠다는 의미. 이 파일을 만들면 디버깅 작업에 매우 유리하다.
•  👉  (변환된 js코드가 ts의 어디에 해당하는지 알려주기 때문)

 

• compilerOptions : { target : es2015}.    👉 해당 타입스크립트 파일을 어떤 자바스크립트 버전으로 변환해 줄껀지 타겟으로 정함
• compilerOptions : { module : es2016}.  👉 자바스크립트 파일 간 import를 할 때 어떤 문법을 사용할지 모듈로 정함.
• compilerOptions : { outDir : "dist" }.   👉.  컴파일된 파일들이 dist 폴더에 저장된다.

 

• include 옵션  :  tsc가 컴파일 할때 포함할 파일이나 디렉터리를 지정한다.
• exclude 옵션 :  include 반대. 제외할 파일이나 디렉터리를 지정한다.

"include": [ 
	"src/*.ts", // src 디렉토리에 있는 모든 .ts 파일 
    "dist/test?.ts" // dist 디렉토리에 있는 test1.ts, test2.ts , test3.ts ..등에 일치 
    "test/**/*.spec.ts" // test 디렉토리와 그 하위 디렉토리에 있는 모든 .spec.ts 파일 
]

출처: https://inpa.tistory.com/entry/TS-📘-타입스크립트-tsconfigjson-설정하기-총정리#include [Inpa Dev 👨‍💻:티스토리]

 

 

 

 

tsconfig.json 파일 설정을 왜할까? 

 

tsconfig에서 옵션을 미리 정의해 놓으면 편하기 때 문이다. 

정의하지 않으면, 컴파일시 일일히 옵션을 지정해줘야 한다. 

 

 

 

.d.ts 파일은 뭘까? 

 

• javaScript 라이브러리도 typeScript에서 사용할 수 있도록 javaScript 라이브러리에 대한 타입 정보를 제공하는 파일이다.
• 즉 typeScript 타입 정의 파일.
• .d.ts 파일로 tsc 컴파일러는 외부 라이브러리의 함수, 클래스 , 객체에 대한 타입 정보를 알 수 있다.
• 또한 외부 라이브러리의 타입을 추론까지 할 수 있는데, 여기서 타입 추론이란
• 타입이 명시가 되지 않았을 때에, 컴파일러가 알아서 해당 타입에 대해 추론을 하는걸 의미한다.

 

 

자주쓰는 명령어 모음

//기본 config.js 파일 생성
npm init -y

// tsconfig.json 파일 생성. __ 컴파일 할때 이런 옵션으로 해달라고 정의할때 사용. 또한 입력 파일들 정의 할때 사용됨
tsc --init 

// tsconfig.json 파일 생성시 이런식으로 설정까지 정의해 줄 수 있다.
tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true

//package.json 파일의 scripts 항목 바꿔주기
"scripts": {
    "start": "tsc && node ./dist/index.js",
    "build": "tsc --build",
    "clean": "tsc --build --clean"
},


//tsconfig.json 파일에서 설정 바꿔주기._ 이외 필요한 부분들 설정해 주면 된다.
"allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부
"checkJs": true // JavaScript 파일 타입 체크 여부


//.d.ts파일을 만든다.
npx tsc 변환하려고하는_커스텀_라이브러리파일.js --declaration --allowJs --emitDeclarationOnly --outDir types

//index.ts 파일을 컴파일한다.
tsc index.ts

//src 디렉토리 안에 있는 모든 typeScript 파일을 컴파일 한다. 
tsc src/*.ts


//파일 실행
npx ts-node 실행하려고 하는 파일 이름.ts

 

 

 

 

 

 

 

 

 

 

참고한 사이트 

https://www.typescriptlang.org/ko/tsconfig

TSConfig Reference - Docs on every TSConfig option

https://codingapple.com/unit/typescript-tsconfig-json/

Typescript 컴파일시 세부설정 (tsconfig.json) - 코딩애플 온라인 강좌

https://inpa.tistory.com/entry/TS-📘-타입스크립트-tsconfigjson-설정하기-총정리 

📘 타입스크립트 컴파일 설정 - tsconfig 옵션 총정리