ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 타입스크립트 ts 기본 문법 익히기 -1
    타입스크립트 2023. 4. 19. 10:41

    타입스크립트는 자바스크립트에 명시적으로 타입이 추가된 언어이다. 자바스크립트에도 타입이 있는데...

    문자열, 숫자, 불 값, 객체가 그것들이다. 하지만 자바스크립트 코드를 작성 할 때 명시적으로 타입을 지정하지 않는다.

    타입스크립트는 자바스크립트와 비슷하고 다만 자료형을 명시적으로 지정한다.

     

    타입스크립트 코드는 tsc라는 컴파일러를 통해 자바스크립트 코드로 변환할 수 있다.

    노드는 자바스크립트만 실행할 수 있어서 타입스트립트 코드를 자바스크립트 코드로 변환해야만 실행이 가능하다.

     

       *프로젝트를 셋팅하고 콘솔에서 (해당 경로에서) npx tsc --init 해서 프로젝트를 타입스크립트 타입으로 바꿀 수 있다. 

    해당 명령어를 입력하면 tsconfig.json이라는 파일이 생성이 되는데 이것이 노드의 package.json과 같다. 

     

    tsconfig.json에는 설정할 수 있는 것이 많지만 다 커버하지 않고 중요한 부분만 소개하자면 다음과 같다

    • compilerOptions : tsc 컴파일러에 대한 옵션이다.
    • target : 타입스크립트를 자바스크립트로 바꾸면서 어떤 버전의 자바스크립트로 바꿀지에 대한 옵션이다. 
    • module : commonjs 모듈을 사용하고 싶은지 브라우저의 최신 es2022 를 사용하고 싶은지 정할 수 있는데 일단은 commonjs를 사용.
    • esModuleInterop : 타입스크립트는 사실상 es모듈이다. 하지만 노드는 commonjs이다. 이 두개의 모듈은 완벽하게 호환이 되지 않는다.  그래서 충돌이 나게 되는데 이 옵션이 comonjs 모듈도 es모듈처럼 인식 될 수 있게 해준다. 
    • forceConsistentCasingInFileNames : import할 때 대문자를 넣지 않도록 해주는 옵션이다. 윈도우에서는 대소문자를 구분 하지 않지만 맥에서는 구분하기 때문이다. 
    • strict : 타입을 엄격하게 구분 할지를 체킹하는 옵션. 이게 false면 사실상 ts를 쓰는 의미가 없다.
    • skipLibCheck : 내가 현재 사용하고 있는 스크립트에 대한 타입들만 검사 할지를 정할 수 있는 옵션이다. 

     

    //index.ts
    let a = 'hello';
    a = 'world';

    기본적으로 자바스크립트와 동일하게 사용하는 것이 가능하다. 

    이렇게 작성하고 콘솔에서 npx tsc를 입력하면 

    index.js가 생기는 것을 볼 수 있다.

    //index.js
    "use strict";
    let a = 'hello';
    a = 'world';

    엄격모드가 적용된 것을 확인가능하다. 

Designed by Tistory.