Typescript Basics & Basic Types

목차

• rootDir and outDir
• Stop Emitting Files on Compilation Errors
• Strict 컴파일
• 코드 품질 옵션

✧ rootDir 및 outDir

• dist 폴더는 모든 출력값을 보관하는 작업을 수행한다. 모든 자바스크립트 파일과 src 폴더에 모든 타입스크립트 파일이 보관되므로 dist와 src 폴더를 셍성하고, 타입스크립트 파일을 전부 src 폴더로 옮긴다. 루트 위치에 있는 자바스크립트 폴더를 삭제하고 tsc 명령어를 사용해서 .ts 파일을 다시 컴파일한다. 타입스크립트 디컴파일러는 하위 폴더를 들여다보지만, 출력값은 입력파일 옆에 있기 때문에 이 입력 파일을 outDir로 제어할 수 있다.

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

    ...
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./dist", /* Redirect output structure to the directory. */
    // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ...
  }
}

• 예를 들어, outDir를 설정하면, 생성된 파일이 저장되는 위치를 타입스크립트 컴파일러에 알릴 수 있다. 그리고 이를 dist로 설정할 수 있다. 이 작업을 수행한 후에 tsc 명령어를 실행하면 자바스크립트 파일이 src 폴더가 아닌, dist 폴더에 생성된다.

<script src="app.js" defer></script>
<script src="analytics.js" defer></script>

• 이제 index.html로 이동하여 app.js를 dist/app.js로, analytics.js를 dist/analytics.js로 조정한다. index.html 파일을 dist 폴더로 이동시킨다. 이제 dev 서버가 제대로 작동하지 않을 것이다.

<script src="dist/app.js" defer></script>
<script src="dist/analytics.js" defer></script>

• 이제 가져온 항목들을 조정해보자. 작업 중인 애플리케이션의 프로젝트 구조가 더 깔끔해졌다.

• 만약 analytics.ts 파일을 동일한 이름의 폴더로 만들어서 그 안에 넣어두고 tsc 명령어를 실행한다고 해도, 이제 컴파일된 js 파일은 알아서 dist 폴더 안에서 생성될 것이다.

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

    ...
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./dist", /* Redirect output structure to the directory. */
    "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ...
  }
}

• 이제 rootDir 를 설정하고 src와 같이 파일이 저장되는 폴더를 구체적으로 경로 설정하여, 타입스크립트 컴파일러가 폴더에서 보이지 않도록 한다. (이는 밑에 있는 include 옵션으로도 수행할 수 있는 작업이다.) rootDir 설정에서 타입스크립트 컴파일러는 src 폴더도 확인할 뿐만 아니라, 설정한 프로젝트 구조가 dist 폴더에서 유지되고 있는지도 확인한다. 이 옵션을 사용하지 않고 outDir를 설정하게 되면, 모든 파일에 dist 생성이 적용되므로 주의해야 한다.

• 따라서 rootDir와 outDir를 모두 사용할 때는 입력파일이 있는 위치와 출력 파일이 생성될 위치에 대해 정확하게 설정을 해야 할 것이다.

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

    ...
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./dist", /* Redirect output structure to the directory. */
    "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ...
    "removeComments": true,
    ...
  }
}

• removeComments 에 대해서도 살펴보자. 이는 이름만으로도 기능이 짐작 가능하다. removeComments 옵션을 설정하면, 타입스크립트 파일의 모든 주석이 컴파일된 자바스크립트 파일에서 '제거' 된다! 이는 파일 크기를 줄이는데 좋은 옵션이 될 수 있다.

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

    ...
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./dist", /* Redirect output structure to the directory. */
    "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ...
    "removeComments": true,
    // "noEmit": true,

    ...
  }
}

• noEmit은 어떨까? noEmit은 자바스크립트 파일을 생성하지 않을 때 설정하는 옵션이다. 타입스크립트 개념이라서 조금 이상하게 보이겠지만, 이 옵션은 파일이 정확한지 확인하고 싶지만 시간을 절약하기 위해 모든 출력 파일을 작성하고 싶지 않을 때 사용한다. 예를 들어, 규모가 큰 프로젝트에서는 이 값을 참(true)으로 설정하여 출력 파일을 가져오지 않고도 타입스크립트 컴파일러가 파일을 검사하고 잠재적 에러를 보고하도록 할 수 있다.

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

    ...
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./dist", /* Redirect output structure to the directory. */
    "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ...
    "removeComments": true,
    // "noEmit": true,
    // "downlevelIteration": true,
    ...
  }
}

• downlevelIteration 옵션은 고급 기능이다. for 루프가 있고 생성된 코드가 해당 루프와 다르게 작동하는 경우에만 해당 옵션을 사용해야만 한다.

✧ 컴파일 오류 시 파일 방출 중지하기

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

    ...
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./dist", /* Redirect output structure to the directory. */
    "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ...
    "removeComments": true,
    ...
    "noEmitOnError": true,
    ...
  }
}

• noEmitOnError 옵션은 일반적으로 타입스크립트 파일에 에러가 있는 경우 자바스크립트 파일(컴파일)을 가져오고 싶지 않을 때 설정한다.

✧ Strict 컴파일

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

    ...
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./dist", /* Redirect output structure to the directory. */
    "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ...
    "removeComments": true,
    ...
    "noEmitOnError": true,
    ...
    "strict": true
  }
}

• strict 옵션은 코드에서 우리가 작업하고 있는 매개변수와 값을 명확히 할 수 있도록 해준다. 이 "strict": true 옵션으로 모든 "strict" 유형의 검사 옵션을 사용할 수 있다. 이 옵션읕 설정하면 모든 옵션을 개별적으로 설정하는 것과 같으므로 옵션을 하나씩 설정하거나, "strict": true 만 설정할 수도 있다.

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

    ...
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./dist", /* Redirect output structure to the directory. */
    "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ...
    "removeComments": true,
    ...
    "noEmitOnError": true,
    ...
    // "strict": true,
    "noImplicitAny": false
  }
}

noImplicitAny

• 먼저, noImplicitAny 옵션부터 살펴보자. 이 옵션은 더 나은 코드를 작성하는 데 도움이 되는 아주 흥미로운 옵션이다.

function sendAnalytics(data) {
  // data에서 타입에러 발생
  console.log(data);
}

sendAnalytics("The data");

• 이렇게 코드를 작성하면, 벌써 문자열에 대한 에러를 보고 하게 된다. 매개변수 데이터는 암묵적으로 any 타입을 지니기에 해당 옵션과 연관된 것처럼 보인다. 해당 옵션을 false 로 설정하는 경우 에러는 IDE 에서나 코드를 컴파일 할 때도 발생하지 않게 된다. 그럼 이 옵션의 기능은 무엇일까? 이 옵션은 코드에서 우리가 작업하고 있는 '매개변수'와 '값'을 명확히 할 수 있도록 해준다.

function sendAnalytics(data) {
  // data에서 타입에러 발생
  console.log(data);
}

sendAnalytics("The data");

• 여기서는 매개변수로서 얻는 데이터 유형에 대한 어떤 정보도 타입스크립트에 제공되지 않는다. 만약 타입스크립트가 이를 추론할 수 있다면 당연히 괜찮다. 하지만 어떤 타입이 추론할 수 있을까? 확실한 건 해당 파일이 실행되기 전에 sendAnalytics이 먼저 선언된다는 점이다. 따라서 함수가 생성되는 시점에는 어떤 결과가 나타날지 알 수 없게 된다.

function sendAnalytics(data: string) {
  // data에서 타입에러 발생
  console.log(data);
}

sendAnalytics("The data");

• 그렇기에 타입을 선언하고 여기서 어떤 타입을 사용할지 명확히 함으로써 타입에러를 해결할 수 있다.

let logged;

function sendAnalytics(data: string) {
  console.log(data);
  logged = true;
}

sendAnalytics("The data");

• 그리고 logged 변수를 선언하고 값을 함수 안에서 true 로 설정하면 해당 선언에 대한 에러가 발생하지 않게 된다.

strictNullChecks

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

    ...
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./dist", /* Redirect output structure to the directory. */
    "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ...
    "removeComments": true,
    ...
    "noEmitOnError": true,
    ...
    "strict": true,
    "strictNullChecks": false,
  }
}

• strictNullChecks 옵션은 null 값을 잠재적으로 가질 수 있는 값에 접근하고 작업하는 방식을 타입스크립트에게 매우 엄격하게 알려준다.

app.js

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

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

• button 역시 null일 수 있다. 여기서 쉬운 해결책은 느낌표 연산자를 뒤에 붙이는 일이다.

const button = document.querySelector("button"); // ! 타입을 지웠다.

• selector가 있더라도, 해당 스크립트가 실행되는 페이지에 버튼이 없을 수도 있기 때문이다. 따라서 타입스크립트는 html 파일을 살펴보지 않으므로, 성공여부를 판단할 수 없다. 그렇기에 이 코드는 문제가 생길 확률이 높다.

const button = document.querySelector("button"); // ! 타입을 지웠다.

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

• 만약 index.html의 버튼 부분을 주석 처리하고,

<body>
  <!-- <button>Click me</button> -->
</body>

• 해당 스크립트를 실행하면 어떻게 될까? 런타임 에러가 발생할 것이다. addEventListener를 null로 불러올 수 없기 때문이다. 해당 버튼을 주석처리 했으므로 button은 사라졌고,

const button = document.querySelector("button"); // ! 타입을 지웠다.

• button이 없으므로 이 값은 null이 될 것이다. 그리고 이는 strictNullChecks를 true로 설정하여 방지할 수 있는 실수다.

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

    ...
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./dist", /* Redirect output structure to the directory. */
    "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ...
    "removeComments": true,
    ...
    "noEmitOnError": true,
    ...
    "strict": true,
    "strictNullChecks": true,
  }
}

• strict를 true로 설정하면 strictNullCheck도 자동으로 설정되어 타입스크립트 위의 불상사를 대비하여 문제를 해결할 수 있도록 해준다. 물론 여기서 쉬운 해결책은 느낌표 연산자이지만 말이다.

"strict": true,
// "strictNullChecks": true,
// strict를 true로 설정하면 `strictNullCheck`도 자동으로 설정

• 느낌표 ! 연산자는 타입스크립트가 개발자에게 해당 버튼이 존재하거나 이 연산이 null이 아닌 값을 반환한다는 걸 알 수 있게 해주는 역할을 한다. 보통 html 코드를 작업하면서 button 엘리먼트, 즉 여기 있는 selector가 작동되는 button이 있음을 알고 있는 경우가 많기에 그저 느낌표 연산자를 사용하면 될 것이다.

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

• 작동할지 여부를 알 수 없는데 작동이 잘 되기를 원하는 경우에는 if 문을 사용해서 문제가 있을지도 모르는 코드를 감싸는 게 좋다.

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

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

• 이렇게 if문으로 감싸게 되면, 느낌표 연산자가 없어도 에러가 발생하지 않게 된다. 이런 방식은 깔끔해보이지만 무언가 존재한다는 것이 확실하다면 느낌표 연산자를 사용하는 것도 꽤 괜찮은 옵션이다.

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

    ...
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./dist", /* Redirect output structure to the directory. */
    "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ...
    "removeComments": true,
    ...
    "noEmitOnError": true,
    ...
    "strict": true,
    "strictNullChecks": true,
    "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. */

  }
}

• strictFunctionTypes은 보다 고급 설정으로, 많은 애플리케이션에서 볼 수 없는 틈새 박스를 잡는다. 이는 설정 중인 함수 타입과 관련이 있으며, 함수 내의 타입은 아니다. 그러나, 매개 변수와 반환 값에 대해 함수가 어떻게 표시되는지 정의되고, 함수 타입을 생성하는 경우 박스를 입력할 수 있다.

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

    ...
    // "outFile": "./", /* Concatenate and emit output to single file. */
    "outDir": "./dist", /* Redirect output structure to the directory. */
    "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ...
    "removeComments": true,
    ...
    "noEmitOnError": true,
    ...
    "strict": true,
    "strictNullChecks": true,
    "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. */

  }
}

• strictBindCallApply는 결합하고 호출하고 적용하는 작업에 유용하다.

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

function clickHandler() {
  console.log("Clicked");
}

if (button) {
  button.addEventListener("click", clickHandler);
}

• addEventListener 이벤트리스너로 clickHanlder 함수를 실행하면서, 특정 인수를 전달하거나 어떤 키워드를 특정 값으로 설정하고자 한다.

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

function clickHandler(message: string) {
  console.log("Clicked" + message);
}

if (button) {
  button.addEventListener("click", clickHandler);
}

• 문자열 인자를 받는 clickHandler 함수에 전달할 인자를 재구성하고자 할 때 bind()를 사용하면 된다. bind()는 우리가 이 키워드에 결합(bind)하고자 하는 항목도 취하는 첫 번째 함수이다.

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

function clickHandler(message: string) {
  console.log("Clicked" + message);
}

if (button) {
  button.addEventListener("click", clickHandler.bind(null));
}

• null 이란 값에 결합(bind)하고자 하면 에러가 발생한다. 그리고 해당 에러는 strictBindCallApply를 false로 설정하면 방지할 수 있다. 이 옵션의 기능은 기본적으로 호출하려는 함수가 bind, call, apply 중 무엇에 해당하는지 확인하고 여기에 함수를 제대로 설정했는지를 확인한다. bind가 지정된 clickHandler에서 매개변수가 필요한 경우 이를 구성하지 않으면 에러가 발생한다. bind, call, apply 를 사용하면서 실수하지 않도록해주는 아주 유용한 옵션이다.

  
  

✧ 코드 품질 옵션

  "noUnusedLocals": true,                /* Report errors on unused locals. */
  "noUnusedParameters": true,            /* Report errors on unused parameters. */
  "noImplicitReturns": true,

• 이 세가지 옵션은 코드 품질을 향상 시켜주는 옵션들로, 기본적으로 사용되지 않은 변수가 있으면 타입스크립트가 에러를 표시한다. 예를 들어, 이 세가지 옵션을 true로 설정해놓으면 break 키워드를 잊어버릴 수도 있는 switch 문을 입력하도록 도와준다. 빨간 색이 아닌 노란색 선으로 표시되는 이유는 사실상 에러라기 보다는 경고나 힌트에 더 가깝다. 따라서 컴파일 하면 에러가 발생한다. 타입스크립트는 에러로만 표시하기 때문이다. 타입스크립트는 사용하지 않은 지역 변수나 전역 변수를 원치않는다고 표시할 것이다.

✦ 출처

---

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