Typescript Basics & Basic Types

목차

• Understanding TypeScript Core Libs
• More Configuration & Compilation Options
• Working with Source Maps

✧ TypeScript 핵심 라이브러리 이해하기

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6"
    "module": "commonjs"
    // "lib": [],
    ...
  }
}

• lib 은 dom으로 작업을 수행하는 항목들, 즉 기본 객체/기능/타입스크립트 노드를 지정하게 해주는 옵션이다.

<button>Click me</button>

• 먼저 index.html에 <button> 태그를 만들고 app.ts로 이동하여 아래와 같이 작성해준다.

const button = document.querySelector("button");

button.addEventListener();

• button에 addEventListenr()를 추가하면 에러가 발생하는데 button을 찾아낸 게 맞는지 여부를 타입스크립트가 확신하지 못하기 때문이다.

const button = document.querySelector("button")!;

button.addEventListener("click", () => {
  console.log("Clicked");
});

• 지금은 간단하게 라인의 끝에 느낌표를 붙여 에러를 해결해준다.

  ✍🏻 느낌표는 기본적으로 button이 존재하고 있으니 값이 반환될 것라고 타입스크립트에 알려주는 역할을 한다.

• 그리고 tsc 명령어를 사용하면 컴파일이 수행된다. 타입스크립트는 왜 해당 document가 unknown 이라는 에러를 표시하지 않는 걸까? 이와 같은 document와 const, 변수 등이 존재한다는 것을 어떻게 타입스크립트는 아는 걸까? 설령 document를 사용할 수 있다 하더라도 querySelector 메소드가 있는 객체를 포함한다는 것, button이 addEventListener를 가지고 있다는 것은 또 어떻게 알고 있는 걸까? 타입스크립트는 어떻게 다 아는 걸까?

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6"
    "module": "commonjs"
    // "lib": [],
    ...
  }
}

• 타입스크립트가 이 모든 것을 알고 작동시키는 이유는 바로 lib 옵션 때문이다..

compilerOptions의 lib 옵션

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6"
    "module": "commonjs"
    // "lib": [],
    ...
  }
}

• 보다시피 지금은 주석처리되어 있지만, 이런 경우에 일부 기본 설정이 적용된다. lib 설정이 되어있지 않으면 기본 설정은 자바스크립트의 target에 따라 달라진다. es6로 설정한 경우 기본적으로 es6에서 전역적으로 사용 가능한 모든 기능이 포함된다. 즉 자바스크립트에서 전역적으로 사용가능한 es6의 기능들을 타입스크립트에서도 사용가능하게 해준다는 뜻이다. 이는 또한 모든 DOM API도 사용 가능하게 만들어준다. 간단히 말해, lib 옵션이 설정되어 있지 않은 경우, 일부 기본 옵션이 적용되는데 이러한 기본 옵션은 타입스크립트가 브라우저에 작동하는 데 필요한 사항들이므로 DOM API 등이 포함되는 것이다.

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6"
    "module": "commonjs"
    "lib": []
    ...
  }
}

• 주석 처리된 lib의 주석을 해제하고 다시 컴파일하면 에러가 발생한다. 주석 처리를 해제하면 기본 설정이 더이상 적용되지 않기 때문이다. 대신 lib으로 기본 라이브러리를 포함시켜야 한다. 즉 lib 배열에 사용할 몇 가지 기본 타입 정의들 말이다. (다시 주석처리를 하면, 타입스크립트가 기본 설정을 적용하여 작동한다.)

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6"
    "module": "commonjs"
    "lib": [
      "DOM"
    ]
    ...
  }
}

• 따라서 적합한 값을 lib에 설정해두도록 한다. DOM은 타입스크립트가 이해할 수 있으며, 모든 DOM API를 타입스크립트에서 사용할 수 있게 해준다.

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6"
    "module": "commonjs"
    "lib": [
      "DOM",
      "ES6",
      "DOM.Iterable",
      "ScriptHost"
    ]
    ...
  }
}

• 현재 ES6 세대의 자바스크립트로 작업을 하고 있으므로 전역적으로 사용 가능한 모든 ES6 옵션들을 타입스크립트가 이해할 수 있도록 ES6도 추가한다. DOM.Iterable 와 ScriptHost 도 추가하는 것이 좋다. 이 두가지를 추가하면 작업에 사용할 만한 자바스크립트의 핵심 기능을 모두 사용할 수 있게 된다. 그런데 이 네가지 옵션 값은 정확하게 ES6로 설정했을 때의 자동 기본 설정과 같다.

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6"
    "module": "commonjs"
    // "lib": [
    //   "DOM",
    //   "ES6",
    //   "DOM.Iterable",
    //   "ScriptHost"
    // ]
    ...
  }
}

• 즉, 주석처리를 해도 이는 그냥 ES6의 기본값이 자동으로 설정되는 기본 설정과 동일하다는 의미이다.

✧ 추가 구성 및 컴파일 옵션

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6"
    "module": "commonjs"
    "lib": [
      "DOM",
      "ES6",
      "DOM.Iterable",
      "ScriptHost"
    ]
    /* Specify library files to be included in the compilation. */,

    // "allowJs": true, /* Allow javascript files to be compiled. */
    // "checkJs": true,  /* Report errors in .js files. */
    ...
  }
}

• allowJs 역시 흥미로운 옵션이다. allowJs는 컴파일시에 checkJS 옵션과 함께 자바스크립트 파일에 포함시킬 수 있다. allowJs 옵션은 타입스크립트가 자바스크립트 파일을 컴파일할 수 있도록 해준다. allowJs를 사용하면, 파일이 .ts로 끝나지 않더라도 타입스크립트는 컴파일할 수 있다. checkJS 옵션은 타입스크립트가 컴파일을 수행하지 않더라도, 구문을 검사하고 잠재적 에러를 '보고'해주고, 타입스크립트를 사용하지 않고 일부 기능의 장점을 취하고자 할 때 유용하다. 타입스크립트는 자바스크립트에서 효과적으로 사용할 수 있는 any 타입만 허용하는데 이 옵션들(checkJS, allowJs)를 활성화하면 그와 같이 설정된다.

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6"
    "module": "commonjs"
    "lib": [
      "DOM",
      "ES6",
      "DOM.Iterable",
      "ScriptHost"
    ]
    /* Specify library files to be included in the compilation. */,

    // "allowJs": true, /* Allow javascript files to be compiled. */
    // "checkJs": true,  /* Report errors in .js files. */
    ...
  }
}

• 타입스크립트를 전혀 사용하지 않는 프로젝트나 타입스크립트 파일과 바닐라 자바스크립트 파일을 함께 사용하면서 바닐라 자바스크립트 파일도 함께 검사하고 싶은 경우에 사용 가능하다.

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6"
    "module": "commonjs"
    "lib": [
      "DOM",
      "ES6",
      "DOM.Iterable",
      "ScriptHost"
    ]
    /* Specify library files to be included in the compilation. */,

    // "allowJs": true, /* Allow javascript files to be compiled. */
    // "checkJs": true,  /* Report errors in .js files. */
    // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true, /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
    ...
  }
}

• 현재 프로젝트에서는 필요하지 않은 declaration와 declarationMap는 주석처리 해준다.d.ts 파일은 프로젝트를 라이브러리로 배포할 때 중요한 고급 개념이다. 프로젝트의 모든 타입을 설명하는 manifest 파일이 필요한데 그것이 바로 .d.ts이기 때문이다.

✧ 소스 맵 작업하기

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6"
    "module": "commonjs"
    "lib": [
      "DOM",
      "ES6",
      "DOM.Iterable",
      "ScriptHost"
    ]
    /* Specify library files to be included in the compilation. */,

    // "allowJs": true, /* Allow javascript files to be compiled. */
    // "checkJs": true,  /* Report errors in .js files. */
    // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true, /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true, /* Generates corresponding '.map' file. */
    ...
  }
}

• sourceMap는 디버깅 작업과 개발에 유용한 옵션이다. 만약 이 옵션을 사용하지 않고 tsc를 사용해서 모든 파일을 컴파일하고 브라우저의 데브 서버를 열어서 개발자 도구의 Sources 탭으로 이동해보자.

• 소스맵 탭을 확인해보면 포함된 내용이 결국은 자바스크립트 코드라는 걸 알수 있다. 현재는 간단한 코드이지만 만약 복잡한 방식의 코드가 있어서 타입스크립트 코드와 디컴파일된 자바스크립트 코드를 디버깅 해야한다면 어떻게 해야할까? 자바스크립트 파일이 아닌 타입스크립트 파일이 있다면 좋을 것이다.

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6"
    "module": "commonjs"
    "lib": [
      "DOM",
      "ES6",
      "DOM.Iterable",
      "ScriptHost"
    ]
    /* Specify library files to be included in the compilation. */,

    // "allowJs": true, /* Allow javascript files to be compiled. */
    // "checkJs": true,  /* Report errors in .js files. */
    // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true, /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
    "sourceMap": true, /* Generates corresponding '.map' file. */
    ...
  }
}

• sourceMap 옵션의 주석을 풀고, 값을 참true로 설정한 뒤 tsc 명령어로 전체 파일을 컴파일 해주면,

• 폴더 내부에 js.map 파일들이 생성된다. 파일들을 살펴보면, 이해할 수 없는 내용들이 들어있지만 기본적으로 이 파일은 입력 파일에 자바슼릡트 파일을 연결하는 최신 브라우저와 개발자 도구 간의 다리 역할을 한다는 걸 기억하자. 개발자 도구를 열고 소스탭으로 이동해보면,

• 소스 탭에서 자바스크립트 파일 뿐만 아니라, 타입스크립트 파일도 볼 수 있다는 걸 알 수 있다. 타입스크립트에 중단점을 둘 수도 있기 때문에 이런 기능들은 디버깅 프로세스를 한 단계 향상시켜줄 것이다. 자바스크립트 파일 대신 기본적으로 타입스크립트 파일에서 직접 작업을 수행할 수 있기 때문이다. 물론 지금처럼 아주 간단한 프로젝트로 작업을 할 때에는 굳이 이 옵션을 추가할 필요는 없을 것이다. 다만 이 sourceMap 옵션의 기능은 디버깅을 단순화해주기 때문에 프로젝트를 진행할 때 아주 유용하다는 것을 잊지 말자.

✦ 출처

---

🚨 해당 포스팅은 Udemy의 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강의를 베이스로 한 기록입니다.
✍🏻 강의 git repo 바로가기