값vs타입, 원시 타입

📚 책 정보
- 우아한 타입스크립트 with 리액트 (2023)
- 우아한 형제들 웹프론트개발그룹 지음

📝 목차
- 값vs타입
- 원시 타입

📍값vs타입

값 공간과 타입 공간의 이름은 서로 충돌하지 않음

- 타입과 변수를 같은 이름으로 정의할 수 있음 (타입스크립트 type 문법은 컴파일 시 제거되기 때문)

type Developer = { isWorking: true };
const Developer = { isTyping: true }; // OK

ES6의 class 문법은 값과 타입으로서 동시에 사용됨

- 타입스크립트에서는 클래스를 타입 어노테이션으로 사용 가능

- 자바스크립트에서는 런타임에서 객체로 변환되어 자바스크립트의 값으로 사용됨

class Developer {
    name: string;
    domain: string;

    constructor(name: string, domain: string) {
        this.name = name;
        this.domain = domain;
    }
}

const me: Developer = new Developer("kim", "frontend");

타입스크립트의 enum도 값과 타입으로서 동시에 사용된다

- 타입스크립트 공간 : 타입

- 자바스크립트 런타임 : 실제 값

enum WeekDays {
  MON = "Mon",
  TUES = "Tues",
  WEDNES = "Wednes",
  THURS = "Thurs",
  FRI = "Fri",
}

// WeekDays enum의 타입
// ‘MON’ | ‘TUES’ | ‘WEDNES’ | ‘THURS’ | ‘FRI’
type WeekDaysKey = keyof typeof WeekDays;

function printDay(key: WeekDaysKey, message: string) {
// 실제 값으로도 사용 가능
  const day = WeekDays[key];
  if (day <= WeekDays.WEDNES) {
    console.log(`It’s still ${day}day, ${message}`);
  }
}

printDay("TUES", "wanna go home"); // "It’s still Tuesday, wanna go home"

- 자바스크립트로 컴파일되면 아래처럼 즉시실행함수(IIFE)로 나타난다

// 타입스크립트
enum Direction {
    up,
    down,
    left,
    right,
}

// 자바스크립트 컴파일
"use strict";
var Direction;
(function (Direction) {
    Direction[Direction["up"] = 0] = "up";
    Direction[Direction["down"] = 1] = "down";
    Direction[Direction["left"] = 2] = "left";
    Direction[Direction["right"] = 3] = "right";
})(Direction || (Direction = {}));

const enum이란

- enum은 유니온 타입과 달리 순회 가능하므로 (이터러블) 편리하게 사용될 수 있다

- 다만, enum은 컴파일되면 IIFE로 변환되듯, 트리 쉐이킹이 안되기 때문에 번들 사이즈를 높일 수 있다

- 그래서 const enum을 통해 단지 타입으로만 사용하는 것도 가능하다

enum menu1 {
    apple,
    grape,
}

const enum menu2 {
    apple,
    grape,
}

console.log(menu1)
/*
{
  "0": "apple",
  "1": "grape",
  "apple": 0,
  "grape": 1
} 
*/

console.log(menu2) // 에러 -> const enum은 값이 아님

📍원시 타입

undefined 와 null 의 차이

- undefined : 옵셔널 프로퍼티 -> 프로퍼티가 있을 수도 있고 없을 수도 있음

- null : 빈 값 -> 프로퍼티 자체는 존재하나, 아직 값이 입력되지 않음

// undefined
type Person1 = {
  name: string;
  job?: string;
};

// undefined: job 프로퍼티가 미존재할 수 있음
const person1: Person1 = {
  name: "park"
};

// null
type Person2 = {
  name: string;
  job: string | null;
};

// null: job 프로퍼티는 반드시 존재하며 아직 입력되지 않은 상태
const person2: Person2 = {
  name: "park",
  job: null
};

- null, undefined 는 tsconfig 옵션의 영향을 크게 받는다

- tsconfig의 strictNullChecks 옵션을 켜면, 타입에 존재할 수 있는 null or undefined 를 명시적으로 해당 타입에 표시해야만 사용할 수 있다

- 또는 타입 가드로 null or undefined를 걸러낼 수도 있다

- 일반적으로 ! (not null) 연산자는 안전하지 않다

symbol

- ES2015에서 등장. 어떤 값과도 중복되지 않는 유일한 값을 생성 가능

const MOVIE_TITLE = Symbol("title");
const MUSIC_TITLE = Symbol("title");
console.log(MOVIE_TITLE) // Symbol(title) 
console.log(MUSIC_TITLE) // Symbol(title) 
console.log(MOVIE_TITLE === MUSIC_TITLE); // false

let SYMBOL: unique symbol = Symbol(); // A variable whose type is a 'unique symbol'
// type must be 'const'

📍값vs타입

📍원시 타입

티스토리툴바