TypeScript

TypeScript 에대해서 알아보자

개발적금 2023. 4. 18. 19:32

오늘은 TypeScript에 대해 알아보도록 하겠습니다.

 

 

1. TypeScript 사용하는 이유

 

2. TypeScript 사용하기 위해 필요한 라이브러리

 

2-1. ts-config.json 및 nodemon.json 설정하기

 

 

1. TypeScript 사용하는 이유

 

2012년에 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를

기반으로 정적 타입 문법을 추가한 프로그래밍 언어 입니다.

 

타입스크립트는 자바스크립트의 상위 집합 언어로써 

정적 타이핑 ,클래스 , 인터페이스 , 모듈 등과 같은 기능을 제공합니다.

 

타입스크립트를 사용하면 몇가지 이점이 있습니다.

 

1-1) 코드 가독성 : 정적 타이핑을 사용하여 코드를 작성하면 코드의 가독성이 높아집니다.

코드에 타입정보가 포함되므로 개발자는 코드에서 예상되는 데이터 타입을 더 잘 이해할수 있습니다.

 

1-2) 버그 감소 : 타입스크립트는 코드에서 발생하는 일부 버그를 미리 탐지 할 수 있습니다.

이는 코드가 실행 되기 전에 타입 검사를 수행하므로 런타임 오류를 줄일수 있습니다.

 

1-3) 코드 유지 보수성 : 타입스크립트는 코드의 유지 보수성을 향상 시킵니다. 타입스크립트 코드는

모듈 및 인터페이스와 같은 개념을 사용하여 모듈화 되어 있으므로 코드의 재사용성이 높아집니다.

 

1-4) 자동 완성 및 문서화 : 타입스크립트는 개발 도구에서 자동 완성 및 문서화를 제공하여 코드 작성을

도와줍니다. ( 이거 좀 잘되어 있습니다.. )   이로인해 작업자가 더 빠르게 코드를 작성할수 있다는 점입니다.

 

여러모로 타입스크립트를 사용하면 개발자가 자바스크립트 코드를 작성하면서 발생하는

일부 문제를 해결 할 수 있도록 도와줍니다!

 

 

2. TypeScript 사용하기 위해 필요한 라이브러리 

 

우선 라이브러리를 사용하기전에 라이브러리를 왜 사용해야 하는가 부터 짚고 넘어 가야합니다..

위에서 장점만 적어 놓았지만 단점도( ? ) 존재합니다.

 

엄청난 잔소리꾼이라는건데 런타임(코드를 실행시켜주는 사람)이 존재하지않습니다.

babel 처럼 build를 진행하고 실행시켜야 한다는 점입니다.

( 물론 라이브러리를 사용하여 불편함을 해결할 것 입니다... )

 

npm init -y
npm install -D typescript

타입스크립트를 사용하기 위해 먼저 설치를 해줍니다.

npm init 설정을 한 뒤에 npm install -D typescript

를 설치해줍니다.

 

그리고 난 뒤에 package.json 에 들어가서

"scripts": {
        "build": "tsc message.ts --outDir ./dist"
},

 

 

( 진행하기 전에 루트디렉토리에 message.ts 안에 아무 코드나 작성해줍니다..)



scripts 안의 내용은 npm run build를 진행하였을때 message.ts라는 타입스크립트 파일을

"./dist" 라는 디렉토리 안에 build해서 js 파일로 만들어 주겠다 라는 말입니다.

 

--outDir는 build될때의 옵션중 하나입니다...

하지만 이게 많아지면 코드가 복잡하고 가독성도 떨어지겠죠? 그래서

루트디렉토리에 " tsconfig.json " 를 따로 파일로 만들어 안에서 설정을 해줍니다!

 

 

2-1 ) tsconfig.json 설정

 

루트 디렉토리에 ' tsconfig.json' 파일을 만들어줍니다.

이제 tsconfig.json 파일 안에서 build될때의 설정들을 해주면 됩니다.

 

{
"compilerOptions":{
	"module" : "CommonJS",
    "outDir" : "./dist",
    "target" : "ES6",
    "esModuleInterop" : true,
    "strict" : true,
    "baseUrl":"./src",
    "paths":[
    	"@user/*" : ["user/*"]
    ]
},
"include" : ["src/**/*"],
"exclude" : ["**/*.test.ts"]
}

 

※ 경로에 있는 와일드카드( * ) 에대한 설명

 

- * : 해당 디렉토리에 있는 모든파일

- ** :  해당 디렉토리의 하위 디렉토리의 모든 파일을 포함

- ? :  해당 디렉토리에 있는 파일들의 이름 중 한 글자라도 포함되면 해당

 

{
"compilerOptions" : {
	...
},
"include" : [
	"src/*.ts", // src 디렉토리에 있는 모든 .ts파일
    "dist/test?.ts", 
    // dist 디렉토리에 있는 test로 시작하는 모든 .ts파일들
    // 예를들어 test1.ts , test2.ts 등등..
    "test/**/*.spec.ts", // test 디렉토리와 그 하위 디렉토리에 있는 모든 .spec.ts 파일
]

}

 

 

위의 코드는 자주 쓰는? 설정들을 뽑아서 적어놨습니다.

 

2-2) tsconfig.json 설정 옵션 정리

( ( https://inpa.tistory.com/ ) inpa님 블로그의 타입스크립트 설정 관련 내용을 참고하였습니다. )

 

1) compilerOptions : 타입스크립트 컴파일러의 옵션들을 지정하는 속성입니다.

 

- module : 컴파일된 자바스크립트 코드의 모듈 시스템을 지정합니다.

* 만일 import 구문을 ES6로 컴파일 했을때 , 동일하게 import로 컴파일되어 commonJS환경의 

node로 실행시 오류가 발생할 수 있습니다.

따라서 import 구문을 require 구문으로 컴파일을 해줘야 할때 module 에 CommonJS로 지정하면 됩니다.

 

- outDir : 출력 될 디렉토리를 설정합니다. 즉 컴파일할때 js 파일 위치 경로를 지정합니다.

 

- target : 어떤 버전의 JavaScript 코드로 컴파일 할지 지정합니다. 만약 코드가 구식의 환경에서 배포가 된다면

더 낮은 버전으로 지정해야 하고 , 신식의 환경에서 배포된다는 보장이 있다면 더 높은타겟으로 지정해도 됩니다.

default 값은 ES5 입니다.

 

* 다만 타입스크립트 소스 코드에 Promise 코드가 있을 경우 , 이는 ES5에서 지원해주지 않기 때문에 

타입스크립트를 컴파일 하면 오류가 발생합니다.

 

대부분의 브라우저는 모든 ES6를 지원하기 때문에 보통 ES6로 놓고 사용합니다. 

 

- esModuleinterop :  타입스크립트에서 ' import ' 문을 사용할 때 , CommonJS 모듈과 ES6 모듈 간

상호 운용성을 위해 설정하는 옵션입니다.

기본적으로 타입스크립트에서는 ' import ' 문을 사용하여 ES6 모듈을 가져올 수 있습니다.

하지만 Node.js 에서는 기본적으로 CommonJS 모듈 시스템이 사용되므로, ' import ' 문을 사용하면 오류가

발생합니다. 이를 해결하기 위해 ' esModuleinterop ' 옵션을 사용하여 CommonJS와 ES6 모듈간 상호운용성을 지원합니다.

 

- strict : 타입스크립트의 각종 타입 체킹 동작을 전부 활성화 합니다. 즉 엄격한 체크를 적용하는 옵션입니다.

이 옵션을 설정하면 다양한 타입에러를  방지하고 높은 코드 안정성을 제공할 수 있습니다.

 

* 이 옵션을 true로 설정( 너무 중요해서 default 값도 true임 ) 하면 이옵션에 대한 strict mode family 들이

전부 true로 지정되는것과 동일합니다.

예를들어 strictNullChecks 프로퍼티는 ' null ' 또는 ' undefined ' 타입이 할당될 수 있는 경우 , 이를 처리하지 않을

경우 오류를 발생시킵니다.

 

 

- baseUrl / paths : import 구문의 모듈 해석 시에 기준이 되는 경로를 지정합니다.

 

※ 사용하기 전에 tsc-alias와 tsconfig-paths 를 설치해주어야 합니다.

별칭은 JS에서 사용을 못하기 때문에 , 그리고 추후에 " ts-node " 를 이용해

소스파일을 실행하는데 , 여기서 오류가 발생합니다.

`tsconfig-paths`
-> tsconfig.json 내에 baseUrl 이나 paths필드에 명시된 모듈을
실제로 호출하게 도와주는 라이브러리입니다.


`tsc-alias`
-> js파일로 컴파일되면 baseUrl이나 paths 필드로 명시된 경로가 그대로 
트랜스 파일링 되어서 js모듈을 인식할수 없는 현상이 일어나게 되는데 , 
이 패키지를 이용하면 컴파일된 경로로 상대경로를 바꿔서 해결이 가능합니다.
npm install -D tsc-alias tsconfig-paths

-> 라이브러리를 설치 한 뒤에 tsconfig.json 에서 속성을 추가해주어야 합니다.

-> 뒤에서 설정하는것은 마지막에 한번에 보여드리겠습니다!

 

-- baseUrl : 모듈의 상대경로를 default 설정함

 

-- paths : ' baseUrl ' 기준으로 상대위치를 가져오는 매핑값

 

조금더 설명을 붙히자면 import 구문의 모듈 해석 시에 기준이 되는 경로를 말합니다.

개발을 하다보면 노트 패키지 이외에도 직접만든 소스파일을 import 시켜야 할때가 발생하는데 예를들어

import styled from 'styled-components'
import { TextField } from '../../../../components/textfield'

위의 코드처럼 ' ../../../../ ' 를 많이쓰게 된다면 작동하는데 문제는 없지만 추후 리팩토링할때

문제가 발생할수 있습니다.

이럴때 baseUrl 과 paths를 설정하면 절대경로로 import 할수있게 됩니다.

 

import styled from 'styled-components'
import { TextField } from '@components/textfield'

위와같이 사용 가능하게 됩니다.

 

설정은 아래와 같습니다.

 

{
"compilerOptions" : {
	"baseUrl" : "./", // 절대 경로 모듈이 아닌, 모듈이 기본적으로 위치한 디렉토리 설정
    "paths" : { // 'baseUrl'을 기준으로 상대 위치로 가져오기를 다시 매핑하는 항목 설정 
    	"@components/*":[
       		"src/components/*" // import {} from '@components/파일' 할때 어느 경로로 찾아 들어갈지 path 설정
       ],
    }
}
}

 

 

 

2-2) nodemon 와 ts-node 에대해

 

ts-node : ts-node는 타입스크립트 파일을 직접 실행할수 있도록 해주며, 타입스크립트 컴파일러를 사용하여

코드를 컴파일하고 실행합니다. 따라서 별도의 컴파일 작업 없이 타입스크립트 파일을 바로 실행할 수 있어

개발 생산성을 높일수 있습니다. 

 

※ 우리눈에는 안보이지만 실제로 build가 됩니다.

 

nodemon : Node.js 애플리케이션을 개발할 때 코드 변경 시 자동으로 서버를 재시작해주는 도구입니다.

파일이 변경되면 서버를 종료하고 다시 실행하므로, 코드 변경 후 매번 수동으로 서버를 재시작하는 수고를

덜어줍니다. nodemon은 Javascript 뿐 아니라 TypeScript와 같은 컴파일 언어도 지원합니다.

 

따라서 ts-node와 nodemon을 함께 사용하면 타입스크립트를 좀더 수월하게 작업할수 있습니다.

 

 

 

 

 

정말 간략하게.. 알아보았습니다. 공부해야할게 산더미인데

다음에는 예제나 심화버전으로 오겠습니다!