[ TypeScript ] 데이터 타입 (기본타입 / 원시타입 / 리터럴타입)

💡 기본 타입 (Basic Types)

기본 타입이란, 타입스크립트가 자체적으로 제공하는 내장 타입입니다. 위 그림은 타입스크립트가 제공하는 기본 타입들을 계층에 따라 분류한 타입 계층도 그림입니다. 이러한 각각의 기본 타입들은 서로 부모 자식 관계를 이루며 계층을 형성합니다. 여기서, any, void, never, unknown 같은 특별한 타입들은 타입스크립트에서만 제공하는 타입입니다.

 

 

 

---

💡 원시 타입 (Primitive Type)

원시 타입이란, 동시에 한개의 값만 저장할 수 있는 타입입니다. 배열이나 객체 같이 동시에 여러 개의 값들을 저장할 수 있는 비원시 타입들에 비해, number, string, boolean 등 원시타입은 숫자면 숫자, 문자열이면 문자열 딱 하나의 값만을 저장할 수 있습니다.

 

 

◎ number 타입 (숫자 타입)

// number (숫자 타입)
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 타입은 자바스크립트에서 숫자를 의미하는 모든 값들을 포함하는 타입으로, 단순 정수 뿐만 아니라 소수, 음수, Infinity, NaN 등 특수한 숫자들도 포함합니다. 이 때, 변수의 이름 뒤에 콜론(:)과 함께 변수의 타입을 정의하는 이러한 문법을 타입 주석 또는 타입 어노테이션이라고 부릅니다.

 

이렇게 number 타입으로 정의한 변수에는 number 외의 타입을 값을 저장할 수 없으며, 문자열 메서드인 toUpperCase도 사용할 수 없습니다.

 

 

◎ string 타입 (문자열 타입)

// string (문자열 타입)
let str1: string = "hello";
let str2: string = "hello";
let str3: string = `hello`;
let str4: string = `hello ${num1}`;

string 타입은 문자열 타입으로, 큰다옴표(""), 작은따옴표(''), 백틱(``), 템플릿 리터럴(${})로 만든 모든 문자열을 포함합니다.

 

이렇게 문자열로 지정한 변수에는 문자열 메서드도 사용 가능합니다.

 

 

◎ boolean 타입

// boolean (불리언 타입)
let bool1: boolean = true;
let bool2: boolean = false;

boolean 타입은 참과 거짓을 저장하는 타입으로 true와 false만 불리언 타입에 해당합니다.

 

 

◎ null 타입

// null
let null1: null = null;

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

 

 

◎ undefined 타입

// undefined 타입
let unde1: undefined = undefined;

//strictNullChecks옵션 false하면 가능
let numA: number = null;

undefined 타입도 오직 하나의 값 undefined만 포함하는 타입입니다.

 

 

◎ null 값을 다른 타입의 변수에 할당하기

// JavaScript
let numA = null;

// TypeScript
let numA: number = null; // ❌

자바스크립트에서는 다음과 같이 값이 정해지지 않은 상태의 변수에 null을 임시로 저장하기도 했습니다. 만약 타입스크립트에서는 이 numA라는 변수의 타입이 number일 경우 null은 number 타입에 포함되는 값이 아니기 때문에 다음과 같이 오류가 발생합니다. 

하지만 타입스크립트에서도 null 값을 임시값으로 활용하고 싶을 수 있을 것입니다.

 

이럴 때에는 tsconfig.json파일의 strictNullChecks라는 엄격한 null 검사 옵션을 false로 설정하여 꺼주면 됩니다. strictNullChecks 옵션은 타입스크립트에서 null 값을 null 타입 이외의 타입의 변수에 저장하는 것을 허용할지의 여부를 결정하는 옵션으로 기본값은 true입니다. 이 옵션의 위 코드에 보이는 strict 옵션은 strictNullChecks 옵션의 상위 옵션입니다. 따라서 strict 옵션이 true면 자동으로 strictNullChecks옵션도 true가 되는데, 만약 위 코드처럼 직접 설정하면 설정된 옵션에 따릅니다.

 

 

 

---

💡 리터럴 타입 (Literal Types)

리터럴 타입이란, string이나 number처럼 많은 값을 포함하는 타입 뿐만 아니라 오로지 하나의 값만을 포함하는 타입입니다. 참고로 리터럴은 우리말로 값이라는 의미입니다.

// 리터럴 타입
let numA: 10 = 10;
let strA: "hello" = "hello";
let boolA: true = true;

 

 

 

출처) 한 입 크기로 잘라먹는 타입스크립트(TypeScript)_이정환