[TypeScript] 원시타입과 리터럴타입

본 내용은 이정환님의 "한 입 크기로 잘라먹는 타입스크립트" 강의 내용을 바탕으로 작성되었습니다.

위 그림은 타입스크립트가 제공하는 기본 타입들에 대한 그림입니다.

자바스크립트에서 볼 수 있었던 null, undefined, number 등 익숙한 타입이 있는 반면,  

any, void, never 등과 같이 타입스크립트에 존재하는 타입들이 있습니다.

---

원시타입(Primitive Type) : 동시에 한개의 값만 저장할 수 있는 타입.  ex) number, string, boolean, null, undefined

 

 

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;


// ---불가능---
num1 = 'hello'; // ❌
num1.toUpperCase(); // ❌

위의 예시처럼 양수, 음수, 정수, 소수, 무한대를 의미하는 Infinity, NaN 등이 number 타입입니다.

number 타입으로 정의한 변수에는 number 타입을 제외한 값을 할당 할 수 없고,

toUpperCase 등과 같은 다른 타입의 메소드 또한 사용할 수 없습니다.

참고로 변수의 이름 뒤에 콜론(:)과 함께 변수의 타입을 정의하는 문법을 "타입 주석" or "타입 어노테이션"이라고 부릅니다.

 

 

string 타입: 문자열을 의미하는 타입. 쌍따옴표(""), 작은 따옴표(''), 백틱(``), 템플릿 리터럴(`${}`)로 만든 모든 문자열을 포함

let str1: string = "hello";
let str2: string = 'hello';
let str3: string = `hello`;
let str4: string = `hello ${str1}`;

 

 

boolean 타입: true(참), false(거짓)를 저장하는 타입

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

 

 

 null 타입: null값만을 포함하는 타입

let null1: null = null;

 

 

undefined 타입: undefined 값만을 포함하는 타입

let unde1: undefined = undefined;

 

 

// JavaScript
let numA = null;

// TypeScript
let numA: number = null;  // ❌ 불가능

위와 같이 자바스크립트에서는 아직 값이 정해지지 않은 상태에서는 변수에 null을 임시로 넣어두곤 했습니다.

하지만 타입스크립트에서는 number타입에 null이 포함되지 않기 때문에 오류가 발생합니다.

{
  "compilerOptions": {
    ...
    "strictNullChecks": false,
		...
  },
  "ts-node": {
    "esm": true
  },
  "include": ["src"]
}

이때 null값을 임시적으로 변수에 넣고 싶을 경우 tsconfig.json의 strictNullChecks(엄격한 null검사) 옵션을 false로 설정하면 됩니다.

 

 

리터럴 타입: 하나의 값만 포함하도록 값 자체로 만들어진 타입

let numA: 10 = 10;
numA = 12; // ❌ 불가능

let strA: "hello" = "hello";
strA = "hi"; // ❌ 불가능

let boolA: true = true;
let boolB: false = false;

let numA: 10 = 10에서 변수 numA의 타입을 숫자 10으로 설정했기 때문에 numA는 10 이외의 값을 저장 할 수 없습니다.

위와 마찬가지 이유로 strA도 "hello" 이외의 값을 저장 할 수 없습니다.

 

 

출처 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8