Table Of Contents
안녕하세요 이정환입니다 😃
기본 타입(Basic Types) 이란?
기본 타입이란 타입스크립트가 자체적으로 제공하는 타입들을 말합니다. 기본 타입을 다른 말로는 내장 타입이라고도 할 수 있습니다. 다음 그림은 타입스크립트가 제공하는 기본 타입들을 계층에 따라 분류한 ‘타입 계층도’ 그립입니다.
그림을 자세히 보면 null이나 undefiend 그리고 number나 string 처럼 우리가 흔히 알고 있는 타입들도 존재하고 그 외의 any나 void, never 같은 우리가 처음 보는 타입들도 존재합니다.
이렇게 타입스크립트에는 꽤 많은 기본타입들이 제공됩니다. 그리고 이런 각각의 기본 타입들은 서로 부모 자식 관계를 이루며 계층을 형성합니다. 어떤 기준으로 타입들이 부모-자식 관계를 갖고 계층을 갖게 되는지에 대해서는 지금은 몰라도 됩니다. 이후의 섹션에 자세히 다루도록 하겠습니다. 일단 지금은 “타입스크립트에는 이렇게 다양한 기본타입들이 있구나” 하고 알아두면 됩니다.
이번 섹션에서는 string이나 number 같은 원시타입들에 대해서 먼저 살펴보고 그 다음 객체나 배열같은 비원시 타입에 대해서 살펴 본 다음에 마지막으로는 타입스크립트에서만 제공하는 any, void, never, unknown 같은 특별한 타입들에 대해서도 살펴보는 순서로 진행할 예정입니다.
실습 환경 설정하기
기본타입이 무엇인지 살펴 보았다면 이번 섹션의 실습을 준비할 차례입니다. 이번 섹션내내 사용할 타입스크립트 프로젝트를 미리 만들어 두도록 하겠습니다.
이전 섹션에서 만들어 두었던 onebite-typescript 폴더 안에 새로운 폴더 section2를 만들어 줍니다. 이번 섹션의 실습 코드는 모두 이 폴더 내에 저장하도록 하겠습니다. section2 폴더를 만들었다면 VsCode에서 폴더를 엽니다.
그 다음 터미널을 켜고 다음 명령어를 입력해 Node.js 패키지를 초기화합니다.
코드를 불러오는 중 입니다 ...패키지 정보는 마음대로 설정합니다. 모두 기본값으로 설정해도 상관 없습니다.
패키지 초기화가 끝났다면 @types/node 패키지를 설치합니다. 참고로 이 패키지는 앞서 Node.js의 내장 기능(함수 및 클래스)에 대한 타입 선언을 제공하는 패키지라고 배웠습니다.
코드를 불러오는 중 입니다 ...@types/node 패키지 설치를 마쳤다면 다음은 컴파일러 옵션 파일을 생성하고 옵션을 설정할 차례입니다.
프로젝트 루트 폴더, 이 시점에서는 section2 폴더 아래에 tsconfig.json 파일을 만들고 다음과 같이 옵션을 설정합니다.
코드를 불러오는 중 입니다 ...설정한 옵션들은 각각 다음과 같은 의미를 갖습니다.
- target : 컴파일 결과 생성되는 자바스크립트 코드의 버전 결정, ESNext는 최신 자바스크립트를 의미함
- module : 컴파일 결과 생성되는 자바스크립트 코드의 모듈 시스템 결정
- outDir : 컴파일 결과 생성되는 자바스크립트 파일들의 위치 결정
- strict : 엄격한 타입 검사 여부 설정
- moduleDetection : 모든 타입스크립트 파일(.ts)에 export 키워드를 자동으로 추가하여 격리된 모듈로 취급되도록 만드는 옵션
- include : tsc로 컴파일 할 타입스크립트 파일의 범위 설정
타입스크립트 컴파일러 옵션 설정이 끝났다면 이제 옵션대로 프로젝트가 잘 동작하는지 확인할 차례입니다.
src 폴더를 만들고 폴더 안에 index.ts 타입스크립트 파일을 만들어 다음과 같이 작성합니다.
코드를 불러오는 중 입니다 ...그 다음 타입스크립트 컴파일러를 이용해 src 폴더 아래의 모든 타입스크립트 파일을 컴파일 합니다.
코드를 불러오는 중 입니다 ...컴파일 결과 자바스크립트 파일이 section2(루트 폴더) > dist에 잘 생성되는지 확인합니다.
코드를 불러오는 중 입니다 ...다음으로는 node를 이용해 이 파일을 실행하기 위해 package.json의 type을 다음과 같이 module로 설정합니다.
코드를 불러오는 중 입니다 ...type을 module로 설정하는 이유는 앞서 tsconfig.json의 module 옵션을 ‘ESNext’로 설정했기 때문에 자동으로 타입스크립트 코드가 ES 모듈 시스템을 사용하는 자바스크립트 코드로 컴파일 되기 때문입니다. 따라서 Node.js가 ES 모듈 시스템을 사용하도록 type : “module” 옵션을 package.json에 설정 해 주어야 합니다.
node를 이용해 이 파일을 실행합니다.
코드를 불러오는 중 입니다 ...잘 실행 된다면 마지막으로 ts-node를 이용해 타입스크립트 파일을 즉시 실행할 수 있도록 tsconfig.json에 다음과 같이 ts-node 옵션을 추가합니다.
코드를 불러오는 중 입니다 ...설정 했다면 ts-node를 이용해 index.ts를 즉시 실행합니다.
코드를 불러오는 중 입니다 ...이렇게 타입스크립트 프로젝트 설정을 마쳤습니다.
본 강의에서 타입스크립트 프로젝트 설정을 굳이 다시하는 이유는 우리는 앞으로 계속해서 새로운 타입스크립트 프로젝트를 생성하고 설정해야 하기 때문입니다.
따라서 한 번 설정 해 본 경험 만으로는 기억에 남기 어렵습니다. 따라서 섹션이 바뀔 때 마다 반복하여 새로운 타입스크립트 프로젝트를 설정해 보면서 언제 어디서든 타입스크립트 프로젝트를 수월하게 시작할 수 있는 개발자로 거듭나도록 하겠습니다.