πŸ“˜ TypeScript κ°œλ… 정리02

seoyoon_leeΒ·2026λ…„ 3μ›” 28일

TypeScript

λͺ©λ‘ 보기
8/21
post-thumbnail

1️⃣ μ›μ‹œ νƒ€μž… (Primitive Types)

βœ… κ°œλ…
πŸ‘‰ κ°€μž₯ 기본적인 νƒ€μž…

let num: number = 10;
let str: string = "hello";
let isDone: boolean = true;

βœ… μ’…λ₯˜

number πŸ‘‰ 숫자
string πŸ‘‰ λ¬Έμžμ—΄
boolean πŸ‘‰ true / false
null
undefined
⚠️ 주의 (μ™•μ΄ˆλ³΄ 포인트)

❌ JS처럼 막 μ“°λ©΄ μ•ˆλ¨

let num = "10"; // ❌ 숫자 μ•„λ‹˜

2️⃣ λ°°μ—΄ & νŠœν”Œ

βœ… λ°°μ—΄
πŸ‘‰ 같은 νƒ€μž… μ—¬λŸ¬ 개

let arr: number[] = [1, 2, 3];

βœ… νŠœν”Œ (Tuple)
πŸ‘‰ 길이 + μˆœμ„œ + νƒ€μž… κ³ μ •

let user: [string, number] = ["kim", 20];

⚠️ 주의
user[0] = 10; // ❌ string μžλ¦¬μž„
πŸ‘ μ–Έμ œ 쓰냐?

πŸ‘‰ API 응닡, μ’Œν‘œ 데이터 λ“±
πŸ‘‰ μˆœμ„œκ°€ μ€‘μš”ν•œ 경우

3️⃣ 객체 νƒ€μž… (Object)

βœ… κΈ°λ³Έ ν˜•νƒœ

let user: {
name: string;
age: number;
} = {
name: "kim",
age: 20
};

⚠️ 주의

❌ 속성 λΉ μ§€λ©΄ μ—λŸ¬

let user = {
name: "kim"
}; // ❌ age μ—†μŒ

4️⃣ νƒ€μž… 별칭 (Type Alias)

βœ… κ°œλ…
πŸ‘‰ νƒ€μž…μ— 이름 뢙이기

type User = {
name: string;
age: number;
};

πŸ‘‰ μž¬μ‚¬μš© κ°€λŠ₯ πŸ‘

let user1: User = { name: "kim", age: 20 };
;
πŸ‘ μ™œ 쓰냐?

πŸ‘‰ μ½”λ“œ 깔끔 + μž¬μ‚¬μš©

5️⃣ 인덱슀 μ‹œκ·Έλ‹ˆμ²˜ (Index Signature)

βœ… κ°œλ…
πŸ‘‰ ν‚€ 이름을 λͺ¨λ₯Ό λ•Œ μ‚¬μš©ν•˜λŠ” νƒ€μž…


type User = {
  [key: string]: string;
};

βœ… μ‚¬μš© μ˜ˆμ‹œ

let user: User = {
name: "kim",
city: "seoul"
};

⚠️ 주의
πŸ‘‰ λͺ¨λ“  κ°’ νƒ€μž…μ΄ κ°™μ•„μ•Ό 함

type User = {
  [key: string]: string;
};

let user = {
name: "kim",
age: 20 // ❌ number μ•ˆλ¨
};

6️⃣ Enum νƒ€μž…

βœ… κ°œλ…
πŸ‘‰ μ •ν•΄μ§„ κ°’ μ§‘ν•©

enum Role {
ADMIN,
USER
}

πŸ‘ λ¬Έμžμ—΄ enum

enum Role {
ADMIN = "admin",
USER = "user"
}

7️⃣ Any νƒ€μž…

βœ… κ°œλ…
πŸ‘‰ μ•„λ¬΄κ±°λ‚˜ ν—ˆμš©

let data: any = "hello";

⚠️ 문제점
πŸ‘‰ νƒ€μž… 검사 μ•ˆν•¨ (μœ„ν—˜)

8️⃣ Unknown νƒ€μž…

βœ… κ°œλ…
πŸ‘‰ any보닀 μ•ˆμ „

let data: unknown = "hello";

βœ… μ‚¬μš©λ²•

if (typeof data === "string") {
data.toUpperCase();
}

9️⃣ Void νƒ€μž…

βœ… κ°œλ…
πŸ‘‰ λ°˜ν™˜κ°’ μ—†μŒ

function hello(): void {
console.log("hello");
}

πŸ”Ÿ Never νƒ€μž…

βœ… κ°œλ…
πŸ‘‰ μ ˆλŒ€ λ°˜ν™˜ μ•ˆν•¨

function error(): never {
throw new Error();
}

🎯 전체 핡심 μš”μ•½

νƒ€μž…μ„€λͺ…
μ›μ‹œνƒ€μž…κΈ°λ³Έ νƒ€μž…
배열같은 νƒ€μž… 묢음
νŠœν”Œμˆœμ„œ + νƒ€μž… κ³ μ •
객체ꡬ쑰 μ •μ˜
νƒ€μž…λ³„μΉ­νƒ€μž… 이름 μ§€μ •
인덱슀 μ‹œκ·Έλ‹ˆμ²˜ν‚€ λͺ¨λ₯Ό λ•Œ
Enumκ°’ λ¬ΆκΈ°
Anyμ•„λ¬΄κ±°λ‚˜ (μœ„ν—˜)
Unknownμ•ˆμ „ν•œ any
Voidreturn μ—†μŒ
Never끝 μ•ˆλ‚¨

🚨 자주 ν•˜λŠ” μ‹€μˆ˜

  1. any λ‚¨λ°œ ❌
    πŸ‘‰ νƒ€μž…μŠ€ν¬λ¦½νŠΈ 의미 사라짐

  2. 객체 νƒ€μž…μ—μ„œ 속성 빠뜨림 ❌

  3. unknown λ°”λ‘œ μ‚¬μš© ❌
    πŸ‘‰ λ°˜λ“œμ‹œ νƒ€μž… 체크

  4. νŠœν”Œμ„ λ°°μ—΄μ²˜λŸΌ μ‚¬μš© ❌

πŸ’‘ κΏ€νŒ

πŸ‘‰ μ²˜μŒμ—” μ΄λ ‡κ²Œ κΈ°μ–΅ν•˜μž

any ❌
unknown βœ…
type 적극 μ‚¬μš© πŸ‘

✨ ν•œ 쀄 정리

πŸ‘‰ νƒ€μž…μŠ€ν¬λ¦½νŠΈλŠ” β€œκ°’μ˜ ν˜•νƒœλ₯Ό 미리 μ •μ˜ν•΄μ„œ μ•ˆμ „ν•˜κ²Œ λ§Œλ“œλŠ” 도ꡬ”

profile
Frontend Developer · 기둝 ⭐

0개의 λŒ“κΈ€