TypeScript의 기본타입(원시타입, 리터럴타입)

TypeScript의 기본타입

타입스크립트의 기본타입에 대해서 알아보자.
타입스크립트의 기본타입의 종류는 타입스크립트 Every Types에서 자세하게 확인할 수 있다.

기본타입(Basic Types)란 타입스크립트가 자체적으로 제공하는 타입들을 말한다.
기본 타입을 다른말로는 내장타입이라고도 한다.

기본타입에서 null이나 undefined, number, string처럼 우리가 흔히 자바스크립트에서 배웠던 타입들도 존재하고,
그 외 any, void, never 같은 처음 보는 타입들도 존재한다.

이렇게 타입스크립트에는 꽤 많은 기본타입들이 제공된다.
그리고 이런 각각의 기본 타입들은 서로 부모자식 관계를 이루며 계층을 형성한다.
지금은 계층에 대한 이야기보다는 타입스크립트에 다양한 기본타입들이 있는것에 집중해보도록 하자.

우선 실습을 진행하기전에 실습환경에 대해서 옵션 설정을 해두었다.

// tsconfig.json
{
   "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "strict": true,
    "moduleDetection": "force"
   },
   "ts-node": {
    "esm": true
   },
    "imclude": ["src"] 
}

// 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.2.5"
  }
}

tsconfig.json파일에 대해서 자세한 옵션 설정에 대해서 궁금하신분들은 링크의 글을 확인하여 주시기 바랍니다.
기본적으로 제공되는 package.json에 대해서는 "type": "module"을 추가해주었다.

원시타입

원시타입(Primitive Type)은 동시에 한개의 값만 저장할 수 있는 타입들을 말한다.
예를 들어 원시타입이 아닌 배열이나 객체 같은 비원시 타입들은 동시에 여러개의 값들을 저장할 수 있지만 number, string, boolean등의 원시타입은 숫자면 숫자, 문자열이면 문자열 딱 하나의 값만 저장할 수 있다.

원시타입은 여러 타입들 중 가장 기본이 되는 타입이므로 먼저 살펴보도록 하자.

number 타입

number 타입은 자바스크립트에서 숫자를 의미하는 모든 값을 포함하는 타입이다.
단순 정수뿐만 아니라 소수, 음수, Infinity, NaN 등의 특수한 숫자들도 포함한다.

let num1: number = 123; // 양의 정수
let num2: number = -123; // 음의 정수
let num3: number = 0.123; // 양의 소수
let num4: number = -0.123; // 음의 소수
let num5: number = Infinity; // 양의 무한대
let num6: number = -Infinity; // 음의 무한대
let num7: number = NaN;

이때 변수의 이름뒤에 콜론(:)과 함께 변수의 타입을 정의하는 이런 문법을 '타입 주석' 또는 '타입 어노테이션'이라고 부른다.

number타입으로 정의한 변수에는 number타입을 제외한 값을 할당할 수 없으며, number 타입의 값이 사용할 수 없는 메서드(ex. toUpperCase() 등)들은 사용할 수 없다.

string 타입

string 타입은 문자열을 의미하는 타입이다.
단순 쌍따옴표 뿐만 아니라 작은따옴표, 백틱, 템플릿 리터럴로 만든 모든 문자열을 포함한다.

let str1: string = "Hello"; // 쌍따옴표
let str2: string = 'hello'; // 작은따옴표
let str3: string = `hello`; // 백틱
let str4: string = `hello ${num1}`; // 템플릿 리터럴

string 타입도 number 타입과 마찬가지로 string 타입으로 정의한 변수에는 string 타입을 제외한 값을 할당할 수 없으며, string 타입의 값이 사용할 수 없는 메서드(ex. toFized() 등)들은 사용할 수 없다.

boolean 타입

boolean 타입은 참과 거짓만을 저장하는 타입이다. true 또는 false만 이 타입에 해당된다.

let bool1: boolean = true;
let bool2: boolean = false;

boolean 타입도 마찬가지로 boolean 타입으로 정의한 변수에는 boolean 타입을 제외한 값을 할당할 수 없다.

null 타입

let null1: null = null;

null 타입은 오직 null값만 포함하는 타입이다.

undefined 타입

let und1: undefined = undefined;

undefined 타입 역시 null 타입과 마찬가지로 오직 하나의 값 undefined만 포함하는 타입이다.

null 값을 다른 타입의 변수에 할당하는 방법

그런데 우리는 자바스크립트에서 아직 값이 정해지지 않은 상태에서는 변수에 null 을 임시로 넣어둘 수 있었다.
하지만 타입스크립트에서는

다음과 같은 에러메세지가 발생한다.
이것은 null은 number 타입에 포함되는 값이 아니기 때문에 오류가 발생하는 것이다.
하지만 null 값을 변수의 임시값으로 활용하고 싶은 상황에서는 tsconfig.json에서 strictNullChecks(엄격한 null 검사) 설정을 해주면 된다.

// tsconfig.json
{
   "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "strict": true,
    "strictNullChecks": false,
    "moduleDetection": "force"
   },
   "ts-node": {
    "esm": true
   },
    "imclude": ["src"] 
}

strictNullChecks 옵션은 null값을 null 타입 이외의 변수에 할당하는것을 금지할지 허락할지 여부를 결정하는옵션이다.
"strictNullChecks": false로 설정해주게 되면 타입스크립트에서 null값을 null 타입 이외의 변수에 할당하는 것을 허용하게 된다.

strictNullChecks 옵션의 이름에서 알 수 있듯 strict 옵션의 하위옵션으로 strict옵션이 true이면 자동으로 true로 설정되고 반대로 strict옵션이 false이면 자동으로 false가 된다.
하지만 따로 옵션 설정을 해준다면 따로 설정된 옵션을 따르게 된다.

strictNullChecks 옵션은 안전한 타입스크립트 코드를 작성하는 측면에서는 그다지 큰 도움이 되지 않기때문에 true로 설정하거나 아예 옵션 설정을 지우고 진행해보도록 하겠다.

리터럴 타입

타입스크립트에는 string, number 처럼 범용적으로 많은 값을 포함하는 타입 뿐만 아니라 딱 하나의 값만 포함하는 타입도 존재한다.
따라서 다음과 같이 변수의 값 자체를 타입으로 설정하는것도 가능하며 이것을 '리터럴 타입'이라고 부른다.

let numA: 10 = 10;
let strA: "hello" = "hello";
let boolA: true = true;
let boolB: false = false;

이처럼 리터럴 타입으로 설정하게 되면 다른 값으로 재할당이 불가하다는 에러 메세지가 뜬다.
이 부분을 참고하면 좋을것같다.

 

관련 강의 - 한입크기로 잘라먹는 타입스크립트