1. Typescript?

타입스크립트Typescript.

타입type이 입혀진 자바스크립트.

자바스크립트에 왜 타입을 입혀야하는가?

• TypeScript는 변수, 함수, 클래스 등의 요소에 명시적인 데이터 타입을 지정할 수 있다. 이로 인하여 타입 관련 오류를 미리 방지할 수 있고 코드의 안정성을 크게 높일 수 있다.

• 명시적으로 타입이 선언됨으로써 코드를 더 읽기 쉽게 만들어 가독성과 유지보수성을 확보할 수 있다.

• VSCode 같은 편집기에서는 프리뷰를 통해 지정된 타입의 정보를 기반으로 코드의 자동 완성, 어시스트, 에러 감지 등의 부가 기능들을 제공하여 개발의 편의성을 크게 증대시킨다.

  function sum(a, b) {
      return a + b;
  };
  add(10, 20); // 30
  add(10, '20'); // '1020'

이 코드는 일반적인 자바스크립트만을 이용하여 구현한 것으로 두 값을 받아 이를 더한 값을 반환하는 함수이다. 10, 20이 인자로 사용된다면 결과값은 30. 그런데 숫자와 문자열 데이터를 혼용한다면 결과값은 '1020'이라는 문자열 데이터가 된다. sum 함수는 숫자를 받아 연산하는 함수인데, 잘못된 데이터가 들어갔음에도 에러가 발생하지 않고 이상한 결과값을 반환해버린 것이다. 이는 바닐라 자바스크립트의 자동 형변환으로 인해 일어나는 현상이며 자바스크립트의 장점이라고도 할 수 있겠지만, 이로 인해서 개발자가 의도하지 않은 문제가 발생하는 단점도 동시에 갖고 있는 셈이라 할 수 있다.

  function sum(a: number, b: number) {
      return a + b;
  };
  add(10, 20); // 30
  add(10, '20'); // 에러 발생.

반면에 타입스크립트를 사용한 경우에는 숫자와 문자열 데이터를 혼용했을 때 타입스크립트 엔진에서 에러를 발생시켜 코드 에디터 상에서 개발자가 바로 확인이 가능하다. 개발자가 의도하지 않은 결과가 도출되는 것을 막아주는 것이다.

2. tsconfig.

타입스크립트의 동작 방식.

타입스크립트는 결국 자바스크립트 기반의 확장 언어로 타입스크립트로 작성한 코드는 최종적으로 자바스크립트로 변환, 컴파일 되어야만 웹에서 정상적으로 사용할 수 있다.

컴파일 설정.

TypeScript 컴파일러에게 프로젝트를 어떻게 컴파일할지에 대한 정보를 제공한다. 사용자는 이를 이용해서 프로젝트 내에서 어떤 파일들을 컴파일할 것인지, 어떤 타입 검사 옵션을 사용할 것인지, 컴파일된 파일들을 어떤 디렉토리에 저장할 것인지 등을 설정할 수 있다. 이런 설정들은 tsconfig.json에서 key-value 형태로 작성할 수 있다.

{
    // 컴파일 할때 수행할 부가적인 옵션.
    "compilerOptions": {
        // 바닐라 JS의 사용을 허용.
        "allowJs": true,

        // @ts-check와 동일한 역할.
        "checkJs": true,

        // 모든 타입에 대해 최소한 any 타입을 기본적으로 부여.
        // 이 옵션이 false일 경우, 타입을 설정해주지 않으면 에러가 발생하게 된다.
        // Parameter 'b' implicitly has an 'any' type.
        "noImplicitAny": true
    },
}

사용가능한 속성 : 공식문서 참조.