[타입스크립트의 기본] 기본타입이란?
해당 게시글은
강의 사이트, 인프런에서 이정환님이 진행하시는
'한 입 크기로 잘라먹는 타입스크립트' 를
들어보며 블로그를 작성하려고 합니다.
다음 게시글 내용은 해당 강의에 핸드북의 내용으로
출처는 다음과 같습니다.
https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2
타입스크립트를 소개합니다 - 타입스크립트 개론
한 입 크기로 잘라먹는 타입스크립트
ts.winterlood.com
기본 타입(Basic Types) 이란?
기본 타입이란
타입스크립트가 자체적으로 제공하는 타입들을 말합니다.
기본 타입을 다른 말로는
"내장 타입"이라고도
할 수 있습니다.
다음 그림은 타입스크립트가 제공하는 기본 타입들을
계층에 따라 분류한
'타입 계층도' 그림입니다.
그림을 자세히 보면,
null 이나 undefined 그리고 number 나 string 처럼
흔히 알고 있는 타입들도 존재하고,
그 외의 any 나 void, never 같은
처음 보는 타입들도 존재합니다.
이렇게 타입스크립트에는 꽤 많은 기본 타입들이 제공됩니다.
그리고 이런 각각의 기본 타입들은 서로 부모 자식 관계를 이루며 계층을 형성합니다.
어떤 기준으로 타입들이 부모-자식 관계를 갖고,
계층을 갖게 되는지에 대해서는 아직 몰라도 됩니다.
이후의 섹션에 자세히 다루도록 하겠습니다.
우선 지금은 "타입스크립트에는 이렇게 다양한 기본타입들이 있구나" 하고 알아두면 됩니다.
이번 섹션에서는 string 이나 number 같은 원시타입들에 대해서 먼저 살펴보고,
그 다음 객체나 배열같은 비원시 타입에 대해서 살펴 본 다음에
마지막으로는 타입스크립트에서만 제공하는 any, void, never, unknown 같은
특별한 타입들에 대해서도 살펴보는 순서로 진행할 예정입니다.
실습 환경 설정하기
기본타입이 무엇인지 살펴 보았다면,
이번 섹션의 실습을 준비할 차례입니다.
이번 섹션 내내 사용할 타입스크립트 프로젝트를 미리 만들어 두도록 하겠습니다.
1. 폴더 생성 후, vscode 실행
이전 섹션에서 만들어 두었던 onebite-typescript 폴더 안에
새로운 폴더 section2 를 만들어 줍니다.
이번 섹션의 코드는 모두 이 폴더 내에 저장하도록 하겠습니다.
section2 폴더를 만들었다면,
VsCode 에서 폴더를 엽니다.
2. Node.js 초기화
그 다음 터미널을 켜고,
다음 명령어를 입력해 Node.js 패키지를 초기화합니다.
> npm init패키지 정보는 마음대로 설정합니다.
모두 기본값으로 설정해도 상관 없습니다.
3. @types/node 패키지 설치
패키지 초기화가 끝났다면,
@types/node 패키지를 설치합니다.
참고로 이 패키지는 앞서 Node.js 의 내장 기능(함수 및 클래스) 에 대한
타입 선언을 제공하는 패키지라고 배웠습니다.
> npm i @types/node
4. 컴파일러 옵션 파일 생성 후, 옵션 설정
@types/node 패키지 설치를 마쳤다면,
다음은 컴파일러 옵션 파일을 생성하고, 옵션을 설정할 차례입니다.
프로젝트 루트 폴더인 section2 폴더 아래에
tsconfig.json 파일을 만들고, 다음과 같이 옵션을 설정합니다.
tsconfig.json
{
"compilerOptions": {
"target": "ESNext", ①
"module": "ESNext", ②
"outDir": "dist", ③
"strict": true, ④
"moduleDetection": "force" ⑤
},
"include": ["src"] ⑥
}① target: 컴파일 결과 생성되는 자바스크립트 코드의 버전 결정, ESNext 는 최신 자바스크립트를 의미합니다.
② module: 컴파일 결과 생성되는 자바스크립트 코드의 모듈 시스템을 결정합니다.
③ outDir: 컴파일 결과 생성되는 자바스크립트 파일들의 위치를 결정합니다.
④ strict: 엄격한 타입 검사 여부를 설정합니다.
⑤ moduleDetection: 모든 타입스크립트 파일(.ts) 에 export 키워드를 자동으로 추가해 격리된 모듈로 취급되도록 만드는 옵션입니다.
⑥ include: tsc 로 컴파일 할 타입스크립트 파일의 범위를 설정합니다.
5. 동작 검사
타입스크립트 컴파일러 옵션 설정이 끝났다면,
이제 옵션대로 프로젝트가 잘 동작하는지 확인할 차례입니다.
1) src 폴더를 만들고,
폴더 안에 index.ts 타입스크립트 파일을 만들어
다음과 같이 작성합니다.
src/index.ts
console.log("Hello New Project");
2) 그 다음 타입스크립트 컴파일러를 이용해
src 폴더 아래의 모든 타입스크립트 파일을 컴파일합니다.
tsc
3) 컴파일 결과,
자바스크립트 파일인 index.js 가 section2(루트 폴더) > dist 에 잘 생성되는지 확인합니다.
dist/index.js
console.log('Hello New Project');
export {};
4) 다음으로는 node 를 이용해
이 파일이 실행하기 위해 package.json 의 type 을 다음과 같이 module 로 설정합니다.
package.json
{
"name": "section2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"@types/node": "^20.3.3"
}
}type 을 module 로 설정하는 이유는
앞서 tsconfig.json 의 module 옵션을 "ESNext" 로 설정했기 때문에
자동으로 타입스크립트 코드가 ES 모듈 시스템을 사용하는 자바스크립트 코드로 컴파일 되기 때문입니다.
따라서 Node.js 가 ES 모듈 시스템을 사용하도록
"type": "module" 옵션을 package.json 에 설정해 주어야 합니다.
node 를 이용해 이 파일을 실행합니다.
> node dist/index.js //명령어
Hello New Project //실행 결과잘 실행된다면,
마지막으로 ts-node 를 이용해
타입스크립트 파일을 즉시 실행할 수 있도록
tsconfig.json 에 다음과 같이 ts-node 옵션을 추가합니다.
tsconfig.json
{
"compilerOptions": {
...
},
"ts-node": {
"esm": true
},
"include": ["src"]
}설정했다면,
ts-node 를 이용해 index.ts 를 즉시 실행합니다.
> ts-node src/index.ts //명령어
Hello New Project //실행 결과
이렇게 해서 타입스크립트 프로젝트 설정을 마쳤습니다.
본 강의에서 타입스크립트 프로젝트 설정을 굳이 다시하는 이유는
계속해서 새로운 타입스크립트 프로젝트를 생성하고, 설정해야 하기 때문입니다.
따라서 한 번 설정해 본 경험만으로는 기억에 남기 어렵습니다.
섹션이 바뀔 대마다 반복해 새로운 타입스크립트 프로젝트를 설정해 보면서
언제 어디서든 타입스크립트 프로젝트를 수월하게 시작할 수 있는 개발자로 거듭나도록 하겠습니다.