TypeScript - 1

Doodream·2021년 6월 2일

--watch -w @Target Additional Checks Module VScode Debugging exclude files include noEmitOnError outDir removeComments rootDir sourcemap strict tsc tsc --init tsconfig.json typescript

TypeScript

목록 보기

1/7

TypeScript 란?

자바스크립트의 여러 단점들을 새롭게 보완해주는 언어입니다. 자바스크립트로 만들어졌으나 자바스크립트로 실행되는 환경에서 타입스크립트는 실행되지 못합니다. 이를 위해서 자바스크립트의 다양한 단점들을 커버한 타입스크립트로 만든 코드를 다시 자바스크립트로 컴파일변환을 하여 실행을 합니다.

다시 돌아와 자바스크립트의 가장 큰 단점을 뽑느다면 유형 검사입니다. 위 그림에서의 코드를 보자면 2와 3이 문자열 타입으로 들어갔습니다. 이때 function add의 원래 본 목적은 숫자 2개를 받아 더하여 반환하는 것이나 자바스크립트 연산의 특이성 때문에 문자열이 인수로 들어가 두개의 인수가 문자열로 합쳐 반환되어 버렸습니다. 이러한 결과는 본 함수의 목적에 설계되지 않았습니다.

따라서 사용자는 이를 방지하고자 유형 validation 체크를 코드로 짜서 자바스크립트로 넣을 수 있습니다.
하지만 이러한 코드는 사소한 실수를 유발할수도 있으므로 여전히 불안한 여지를 남겨두고 있습니다.

타입스크립트의 목적은 자바스크립트로서 코드가 실행되기 전에 정적으로 해당 코드의 유형들이 개발자의 의도와 부합한지 확인하는 것입니다.

자바스크립트의 정적 유형 검사기 입니다.

TypeScript Document

타입스크립트를 사용하려면 관련 파일을 설치해야합니다.

npm install -g typescript

터미널에서 sudo 로 관리자 권한을 얻은 다음 위 코드를 실행합니다. 위 코드는 타입스크립트가 자바스크립트로 변환될 수 있는 컴파일러를 다운로드 받는 것입니다.

이렇게 되어 완성이 되었다면 tsc 명령어를 사용할 수 있습니다.

tsc -v

Version 4.3.2

기본적인 사용

typescript 파일 만들기

자바스크립트의 확장자는 .js 입니다. 타입스크립트의 확장자는 .ts 입니다. 이렇게 만들어진 타입스크립트에 기존의 자바스크립트 코드를 넣어 봅시다.

본래 자바스크립트라면 아무런 문제가 없을 코드 입니다. 하나씩 예제를 넣어봅시다.

`tsc` 명령어

무엇인가 유형을 정해주는 코드들이 생겼습니다. 이렇게 타입스크립트로 바꾼다음 이에대해서 타입스크립트를 자바스크립트로 컴파일합니다. 그과정에서 타입스크립트의 유형 검사에 대한 오류가 발견되면 에러를 출력해줍니다.

위 코드에서는 input1 이라는 인풋 엘레멘트에서는 값 자체가 string인데 add 함수의 인수는 number이라고 지정이 되었으니 할당이 될 수 없다라고 에러를 잡아내고 있습니다.

위 코드와 같이 tsc 명령어는 타입스크립트 파일을 자바스크립트 파일로 컴파일하면서 에러가 나는 부분을 출력해줍니다. 사실 위코드 자체는 브라우저에서 문제없이 돌아갈 것이나 정적 유형 검사기로서 좀더 안정적인 코드를 마련해주는 목적이므로 개발자에게 이러 저러한 문제가 있음을 알려줍니다. 또한 컴파일러 로서 변환된 자바스크립트 파일을 내놓습니다.

→ 새롭게 만들어진 use-typescript.js

새롭게 만들어진 js 파일코드는 다음과 같습니다.

VSCODE 에서는 내부적으로 타입스크립트로 동작하기 때문에 이러한 에러를 실시간으로 위 와같이 알려줍니다.

이렇게 만들어진 새로운 js 파일은 html 스크립트에 넣어져서 브라우저에 로딩이 되어야 합니다. 따라서 스크립트를 수정해줄 필요가 있습니다.

실제로 이전의 스크립트 파일에서는 아래와 같임 문자열을 곱했습니다. 하지만 타입스크립트로 유형검사가 끝난 자바스크립트 파일을 넣고 실행하면

아래와 같이 제대로된 연산결과가 나오는 것을 확인 할 수 있습니다.

이상한것은 위 코드만 보면 기존의 js 파일과 ts에서 컴파일된 js파일 간에 변환된 것이 없는 것처럼 보입니다.

watch mode

tsc 는 타입스크립트 파일을 컴파일 하는 명령어 입니다. 하지만 한번만 컴파일 하고 나면 해당파일을 수정하고 나면 다시 명령어로 컴파일을 해야합니다. 이러한 과정을 귀찮게 하지않고 파일이 수정시 컴파일을 해주는 모드가 있습니다.
tsc typescript.ts -w
tsc typescript.ts --watch

위 두개의 명령어는 wath mode를 수행하는데 파일이 수정될 때마다(사용자가 파일을 수정후 저장할 때 마다) 컴파일을 진행합니다.

tsc --init

위 코드는 전체적인 타입스크립트로 만든 프로젝트 속에서 모든 파일들을 컴파일하는 경우에 대해서 타입스크립트프로젝트를 컴파일하기 위해 다루는 명령어 입니다. 이 명령어는 타입스크립트 프로젝트를 초기화 할때 사용합니다. 명령어를 사용하면 tsconfig.json 파일이 생겨납니다. 이렇게 만들어진 tsconfig.json 파일은 현재 있는 디렉토리가 타입스크립트의 가장 루트 디렉토리라는 것을 알려줍니다.

tsconfig.json

{
  "compilerOptions": {

    "target": "es5",                         
    "module": "commonjs",                     
    "strict": true,                                 
    "esModuleInterop": true,                     
    "forceConsistentCasingInFileNames": true       
  }
}

exclude, include

위와 같은 파일구조가 나오게 됩니다. 이때,exclude, include라는 프로퍼티로 디렉토리상 컴파일에 포함시킬 파일들을 구분합니다.

{
"compilerOptions": {
  "module": "system",
  "noImplicitAny": true,
  "removeComments": true,
  "preserveConstEnums": true,
  "outFile": "../../built/local/tsc.js",
  "sourceMap": true
},
"include": ["src/**/*"], // 컴파일 할 파일들
"exclude": ["node_modules", "**/*.spec.ts"] // 컴파일에서 제외할 파일들
}

exclude 키워드를 명시하지 않으면 node_moduldes는 기본적으로 exclude 키워드안에 포함되어 있게 됩니다.

files

include 와 비슷한 예로 files 라는 프로퍼티가 있습니다. files는 프로젝트의 파일의 양이 적을 때, 컴파일시 허용할 파일목록을 나타냅니다.

이상태에서 tsc 명령어만을 사용하면 프로젝트 안에 들어있는 모든 타입스크립트 파일에 대하여 컴파일을 진행합니다.

위 사진에서 addTs.ts 파일의 컴파일이 진행되지 않았으나 tsc 명령어를 수행하고 나서는 addTs.js 파일이 컴파일 된것을 확인 할 수 있습니다.

같은 원리로 tsc -w ,tsc --watch 코드는 프로젝트의 전체 타입스크립트에 대해서 watch mode를 실행합니다.

target

{
  "compilerOptions": {

    "target": "es5", // output files ES version                  
    "module": "commonjs",                     
    "strict": true,                                 
    "esModuleInterop": true,                     
    "forceConsistentCasingInFileNames": true       
  }
}

위 코드에서 target 프로퍼티는 작성한 ts를 컴파일시 es5 버전으로 컴파일한다라고 명시하는 역할입니다. 따라서 그동안 연습했던 코드들에서 let이나 const 가 var로 변하여 컴파일되었던 것입니다.

module

우리는 자바스크립트에서 모듈에 대해서 배웠습니다. commonJS 모듈방식이 가장 자주 쓰이고 AMD 혹은 commonJS와 AMD 방식을 함께 쓰는 UMD 방식도 배웠습니다. module 프로퍼티는 모듈 설정을 사용한다는 것을 명시하는 프로퍼티 입니다.

outDir, rootDir

보통 타입스크립트에서는 디렉토리 관리를 할때에 src 라는 폴더에 코드를 넣고 나머지 js 컴파일 된파일들을 따로 보관합니다. (dist) 사용자가 하나하나 설정하기 보다는 타입스크립트의 outDir 설정을 건드려주면 자동으로 컴파일된 파일들을 몰아 넣는게 가능합니다.

{
  "compilerOptions": {

    "target": "es5",                         
    "module": "commonjs",  
    "outDir": "./dist", // output files
    "rootDir": "./src", // input files
    "strict": true,                                 
    "esModuleInterop": true,                     
    "forceConsistentCasingInFileNames": true       
  }
}

outDir 설정으로 컴파일 후 js 파일의 생성위치를 설정하면 당연히 브라우저는 html 문서를 실행시킬 때 컴파일된 js파일을 로딩하므로 html파일의 script src 속성을 ./dist/...로 변경시켜야 합니다.

추가로 src는 input files 경로이며 outDir은 output files의 경로 입니다. src안의 디렉토리 구조는 tsc 명령어 수행시 자동으로 dist 구조가 이와 동일하게 생성됩니다.

rootDir 이라는 프로퍼티는 outDir과 반대되는 특성으로 input files 경로를 나타냅니다. 즉, rootDir의 경로에는 ts 파일들이, outDir 경로에는 js 파일들이 있다고 생각하면 됩니다. 둘의 디렉터리 구조는 rootDir 의 경로 안의 트리들이 컴파일되면 그 구조 그대로 outDir의 트리구조가 생성됩니다.

이때 rootDir은 앞서 배웠던 tsconfig에서 files, includes등과 같이 컴파일할 파일들을 허용하는 목록이나 파일들을 명시하지 않은 모든 typeScript에 대해서 적용됩니다. 이러한 속성들은 독립적으로 적용이 됩니다.

removeComments

{
  "compilerOptions": {

    "target": "es5",                         
    "module": "commonjs",  
    "outDir": "./dist", 
    "rootDir": "./src", 
    "removeComments": true, // 주석제거 프로퍼티
    "strict": true,                                 
    "esModuleInterop": true,                     
    "forceConsistentCasingInFileNames": true       
  }
}

타입스크립트에서 작성했던 모든 주석들을 제거하는 기능입니다.

noEmitOnError

{
  "compilerOptions": {
    "target": "es5",                         
    "module": "commonjs",  
    "outDir": "./dist", 
    "rootDir": "./src", 
    "removeComments": true,
    "noEmitOnError": false,
    "strict": true,                                 
    "esModuleInterop": true,                     
    "forceConsistentCasingInFileNames": true       
  }
}

이 프로퍼티는 기본적으로 false 값을 가집니다. 보통 ts 파일을 컴파일하면 ts에 에러가 나더라도 js 파일이 생성됩니다. 하지만 noEmitOnError : true 로 변경시킨다면 ts에 에러가 나면 js 파일 자체가 생성이 안됩니다.

strict

이 프로퍼티는 우리가 아는 use-strict 모드 입니다. ts는 use-strict 의 기능들을 선택적으로 활성화 할수 있는데 strict라는 프로퍼티는 전체 use-strict 모드를 활성화 하는 기능을 가집니다. 그아래의 프로퍼티들은 strict 프로퍼티가 false 일때에 부분적인 use-strict의 기능들을 나타내며 각각을 활성화 할수 있습니다. 이구간의 모든 프로퍼티의 기대값은 boolean 입니다.

    /* Strict Type-Checking Options */
    "strict": true /* Enable all strict type-checking options. */,
    // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                    /* Enable strict null checks. */
    // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
    // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */

Additional Checks

이 구간은 코드의 품질과 관련된 옵션들입니다. 사용하지 않은 변수의 경우 에러 표시를 띄워주거나 경고를 해주고 파라미터의 값들이 쓰이지 않으면 경고를 해주거나 에러를 띄웁니다. 보통 이런경우들에 대해서 vscode는 색상을 흐리게 표현하지만 tsconfig 설정을 true로 각 설정을 바꾼다면 이렇게 경고나 에러를 직접적으로 표시합니다. vscode 동작에서 보는것으로 화면을 제시했지만 실제로는 컴파일에러를 console에 표시해주는 것이 ts의 역할 입니다.

    /* Additional Checks */
    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
    // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
    // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
    // "noImplicitOverride": true,                  /* Ensure overriding members in derived classes are marked with an 'override' modifier. */
    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */

VScode Debugging

tsconfig 에서 sourceMap 설정을 true 로 바꿉니다.

{
  "compilerOptions": {

    "target": "es5",                         
    "module": "commonjs",  
    "sourceMap": true,
    "outDir": "./dist", 
    "rootDir": "./src", 
    "removeComments": true, 
    "strict": true,                                 
    "esModuleInterop": true,                     
    "forceConsistentCasingInFileNames": true       
  }
}