02. 🟦 타입스크립트 실전 활용 예제 정리

1. 빈 배열의 타입: never[]

📌 1. 빈 배열의 타입: never[]

• 초기값 없이 선언한 빈 배열은 타입이 never[]로 추론됨.
• 이후 array.push(“hello”)를 하면 타입스크립트는 “hello”의 타입을 기준으로 배열을 자동으로 string[] 등으로 추론함.
• 하지만 가능하면 초기 타입을 명확히 지정하는 것이 안전

const array = [];
array.push("hello");
 
const array: string[] = [];

📌 2. querySelector와 DOM 요소 타입

즉, 선택자가 DOM에 없을 수도 있다는 점을 고려해야 함 → 조건문으로 null 체크 필요

const head: Element = document.querySelector("#head")
document.querySelector는 리턴 타입이 Element | null

❗주의: Non-null 단언 연산자 !

• !는 “절대 null 아님”을 강제로 선언하는 방식.
• 하지만 실제 null일 경우 런타임 에러 발생 가능 → ❌ 추천하지 않음

if (head) {
	head.innerHTML = "hello world";
}

const head2: Element = document.querySelector("#head")!;

📌 3. 원시 타입 vs 원시 래퍼 타입

원시 타입 (Primitive Type) 이란?

원시 타입은 자바스크립트에서 가장 기본이 되는 데이터 타입으로, 값 자체를 저장하고 변경 불가능(immutable) 한 성질을 가집니다.

string (원시 타입)

• string은 **원시 타입(primitive type)**으로, 값 자체가 문자열임
• 메모리 효율이 좋고, 비교도 값 자체로 함 (===로 비교 시 정확함)
• 자바스크립트가 백그라운드에서 임시로 String 객체로 감싸기 때문에 메서드 사용 가능
• ✅ 타입스크립트에서는 항상 이걸 사용

String (원시 래퍼 타입)

• String은 자바스크립트의 래퍼 객체(wrapper object)
• 내부적으로 문자열을 감싼 객체(Object) 형태로 동작
• typeof b를 찍으면 “object”로 나옴
• 🚫 b === “hell” 은 false — 값이 아닌 객체를 비교하기 때문
• ❗ 타입스크립트에서 String, Number, Boolean은 지양 (혼동, 비교 오류 발생 가능성 높음)

const a: string = "hello"
const b: String = new String("hello")
 
console.log(typeof a) // "string"
console.log(typeof b) // "object"
 
console.log(a === b) // false
string은 기본 타입(primitive)

📌 4. 문자열 리터럴 타입 & 템플릿 리터럴 타입

문자열 리터럴 타입 (String Literal Type)

• World는 문자열 리터럴 유니온 타입
• World는 “world” 또는 “hell” 두 값 중 하나만 허용

// 문자열 리터럴 타입
type hello = "hello";
// 문자열 유니온 리터럴 타입
type World = "world" | "hell";
 
const z: World = "world";
const x: World = "heaven"; // ❌ 오류

템플릿 리터럴 타입 (Template Literal Type)

• Greeting은 template literal type을 사용하여 “hello world” 또는 “hello hell”처럼 자동으로 생성됨
• 이 방식은 정형화된 문자열 값을 강력하게 타입으로 제한할 때 유용
• ✅ Ctrl + Space 로 가능한 문자열 자동완성 힌트를 받을 수 있음

type Greeting = `hello ${World}`;
const te: Greeting = ""; // 자동완성 추천 가능: "hello world" | "hello hell"

📦 실전 예제

type HTTPMethod = "GET" | "POST";
type Endpoint = "users" | "posts";
 
type APIRoute = `${HTTPMethod} /api/${Endpoint}`;
 
const route1: APIRoute = "GET /api/users"; // ✅
const route2: APIRoute = "POST /api/posts"; // ✅
const route3: APIRoute = "DELETE /api/users"; // ❌ Error

📌 5. 튜플(Tuple)에서 주의할 점

• 튜플은 고정된 길이와 순서, 타입을 가진 배열이지만,

• push는 런타임 레벨에서 막히지 않음

• 타입 안전성을 높이려면 as const 또는 튜플을 조작하지 않도록 설계 필요

• 오류 발생 -튜플은 길이가 고정됨

• 막히지 않음 -자바스크립트 동작상 허용됨

const tuple: [string, number] = ["1", 1];
tuple[2] = "hello";
tuple.push("hello");