[TypeScript] TypeScript란?

JavaScript는 동적 타입 언어로, 변수의 타입을 런타임(실행) 때에 결정한다. 이 덕분에 유연한 개발이 가능하지만,

실행 시까지 오류나 버그를 찾기 어렵고, 코드가 늘어날수록 팀원 간 협업도 어려워진다.

 

TypeScript는 이러한 자바스크립트의 단점을 보완하기 위해, 코드 작성 때 객체에 타입을 명시할 수 있도록 하고, 컴파일 환경을 제공하여 코드를 작성하는 동안 문법 오류 등 에러를 확인하고 수정할 수 있다.

 

TypeScript로 작성한 코드는 .ts 확장자를 가진 파일로 저장되고, 실행하면 타입스크립트 컴파일러(tsc)가 이를 자바스크립트 파일로 컴파일해 node.js나 브라우저에서 실행된다.

 

TypeScript로 작성한 코드의 컴파일 과정

 

.js 파일로 컴파일하면서 타입 검사와 문법 오류 등을 검사할 수 있고, Vanilla JS 환경에서 사용되는 대부분의 프레임워크나 라이브러리를 TS 환경에서도 사용할 수 있다.

타입스크립트 컴파일러가 컴파일 과정에서 문법 오류 등이 있어도 컴파일이 중단되거나 하지는 않는다. 다만, 컴파일된 문법 오류가 있는 js 코드는 실행되지 않는다.

---

Typescript 설치

 

npm install -g typescript // @버전

 

이 명령어로 타입스크립트를 설치할 수 있다.

만약 타입스크립트의 특정 버전을 설치하고 싶다면 위 명령어 뒤에 @5.2.2 등 버전을 명시해주면 된다.

 

tsc -v

 

이 명령어로 타입스크립트의 버전을 확인했을 때, 버전이 출력되면 설치 완료!

 

이제 .ts 확장자로 작성된 파일이 있는 프로젝트에서 터미널에 tsc 명령어를 입력하면, ts 파일을 js 파일로 컴파일할 수 있다.

타입스크립트 컴파일이  라이브러리를 통해 실행되는 방식이라 JAVA나 C보다 컴파일이 조금... 많이... 느릴수도 있다.

---

TypeScript 컴파일 설정

터미널에 tsc --init을 입력하면 컴파일 옵션을 설정할 수 있는 tsconfig.json 파일을 자동 생성해주는데,

자동 생성되는 옵션은 아래와 같다.

{
    "compilerOptions": { 
        "target": "ES6", 
        "module": "commonjs", 
        "strict": true, 
        "sourceMap": true
    },
    "files": ["src/app.ts"],
    "include": [ "src/**/*.ts" ], 
    "exclude": [ "node_modules", "**/*.test.ts" ],  
    "extends": "./configs/base.json", 
    "typeAcquisition": { 
        "enable": true, 
        "include": ["jquery"], 
        "exclude": ["react"] 
    }, 
    "watchOptions": { 
        "watchFile": "useFsEvents", 
        "watchDirectory": "useFsEvents", 
        "fallbackPolling": "dynamicPriority"
    }
}

주로 사용하는 옵션을 정리해보면,

• files : 컴파일할 파일을 명시적으로 지정해주는 옵션
• include : files 옵션과 같이 컴파일할 파일을 지정하는 옵션, 와일드 카드 패턴*을 사용한다!
• exclude : 컴파일에서 제외할 파일을 지정하는 옵션, 이 옵션도 와일드 카드 패턴으로 작성한다.
• compilerOptions : 컴파일 옵션 설정

{
  "compilerOptions": {
    "target": "ES6",                          /* JS 버전 설정*/
    "module": "commonjs",                       /* 생성될 모듈 설정*/
    "lib": ["dom", "dom.iterable", "esnext"], /* 컴파일 과정에 사용될 라이브러리 파일 설정 */
    "allowJs": true,                          /* JavaScript 파일 컴파일 허용 */
    "checkJs": true,                       /* .js 파일 오류 리포트 설정 */
    "outDir": "./dist",                    /* 출력 디렉토리 설정 */
    "rootDir": "./",                       /* 루트 디렉토리 설정 */
    "removeComments": true,                /* 컴파일 시 주석 제거 여부 */
    "strict": true,                           /* 모든 엄격한 유형 검사 옵션 활성화 */
    "noImplicitAny": true,                 /* any 타입 오류 표시 여부 */
    "strictNullChecks": true,              /* 엄격한 null 검사 사용 여부 */
    "noImplicitThis": true,                /* 명시적이지 않은 'any'유형으로 'this' 표현식 사용 시 오류 발생 */
  }
}

compilerOptions는 위의 옵션 외에도 정말 많은 옵션이 있으니, 아래 링크를 참고

TSConfig Reference - Docs on every TSConfig option

와일드 카드 패턴이란?
파일 이름이나 문자열을 매칭하기 위해 사용되는 패턴
* : 0개  이상의 임의의 문자열 *.txt → a.txt 매칭
? : 하나의 임의의 문자와 매칭 image?.txt → image1.txt 매칭