🎯 10분 투자로 Typescript 타입스크립트 정복

🎯 10분 강의로 타입스크립트 정복

시작이 반이다 (50%)
거의 실무적 입장에서 보았을 때 이것 이상은 초고수의 영역이라고 생각합니다.
그러나 이 정도는 기억하고 있어야 합니다. 반복할 수밖에 없습니다.
특히 개발자들이 falsy 조건을 몰라 if문을 기준 없이 남발하고 있어요. 정말 중요합니다.
if (!variable), if(variable)로 간단히 할 수 있는 것도 원리를 몰라서 그렇다고 생각이 됩니다.

0️⃣ 강의 한 줄 요약 (30초)

타입스크립트는 새 언어가 아니다
자바스크립트 코드에 타입을 붙인 것이 전부다
타입은 실행을 바꾸지 않고,
👉 실수와 버그를 “작성 중”에 잡아준다

1️⃣ 가장 먼저 알아야 할 것: if 문과 boolean (1분)

❌ 자바스크립트의 현실

if (value) {
  // true일 수도, false일 수도, 문자열일 수도, 숫자일 수도…
}

❗ if 문에서 false로 평가되는 모든 조건 (Falsy 값)

자바스크립트 / 타입스크립트에서 if (value)가 false가 되는 값은 아래로 고정되어 있다.

false
0
-0
0n        // BigInt zero
""        // 빈 문자열
null
undefined
NaN

👉 이 값들만 false이고, 나머지는 전부 true (Truthy)

❌ 실무에서 가장 많이 터지는 버그

if (user.age) {
  // age가 0이면 여기 실행 안 됨 ❌
}

if (user.name) {
  // name이 ""(빈 문자열)이면 false ❌
}

✅ 타입스크립트의 핵심 해결 방식

if (user.age !== null && user.age !== undefined) {
  // 0도 정상 값으로 처리 ✅
}

if (user.name !== undefined) {
  // 빈 문자열 허용 여부를 명확히 판단
}

boolean 타입은 완전히 다르다

const isLoggedIn: boolean = false;

if (isLoggedIn) {
  // 오직 true일 때만 실행
}

👉 boolean 타입은 falsy 개념이 아니라 true / false만 존재

🔥 실무 핵심 포인트

if (value)는 값 검사 + 타입 검사를 동시에 한다
숫자, 문자열은 그대로 쓰면 위험하다
null / undefined 체크는 항상 명시적으로
조건문을 믿고 싶다면 👉 타입부터 좁혀라

2️⃣ 기본 타입: 이거면 80% 끝 (2분)

정말 자주 쓰는 기본 타입

모두 소문자입니다. 꼭 기억하세요

const userId: number = 1;
const userName: string = "kim";
const isActive: boolean = true;

배열

const numbers: number[] = [1, 2, 3];
const names: string[] = ["kim", "lee"];

객체 (inline)

const user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "kim",
};

null / undefined

let value: string | null = null;

👉 실무에서는 거의 항상 | null을 사용

3️⃣ 함수 타입: 실무에서 제일 중요 (2분)

매개변수 + 반환 타입

function add(a: number, b: number): number {
  return a + b;
}

화살표 함수

const multiply = (a: number, b: number): number => {
  return a * b;
};

반환값이 없을 때

function log(message: string): void {
  console.log(message);
}

🔥 실무 포인트

함수 시그니처만 봐도 무슨 역할인지 바로 알 수 있음
API, 유틸 함수에서 버그 급감

4️⃣ interface vs type (가장 많이 물어보는 질문) (2분)

interface (객체 구조 정의용)

interface User {
  id: number;
  name: string;
}

type (더 범용적)

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

차이 핵심 요약

구분	interface	type
객체 정의	✅ 최적	✅ 가능
확장	`extends`	`&`
유니온 타입	❌	✅
실무 사용 빈도	매우 높음	매우 높음

확장 비교

interface Admin extends User {
  role: string;
}

type Admin = User & {
  role: string;
};

✅ 실무 기준 추천

객체 구조 → interface
유니온 / 조합 → type

5️⃣ 유니온 타입: 타입스크립트의 진짜 힘 (1.5분)

type Status = "loading" | "success" | "error";

let status: Status = "loading";

조건문이 완전히 달라진다

if (status === "success") {
  // 여기선 success 확정
}

👉 문자열 비교가 아니라 “타입 비교”

6️⃣ 실무 최빈도 패턴: optional (`?`) + 조건문 (1분)

1️⃣ optional property (`?`) — 값이 없을 수도 있다는 선언

interface User {
  id: number;
  name?: string; // 있어도 되고, 없어도 된다
}

👉 name?: string의 진짜 의미는 아래와 같다

name: string | undefined

2️⃣ optional + if 문 (타입 좁히기)

if (user.name) {
  // 여기서는 name이 string으로 확정
}

⚠️ 단, 빈 문자열 ""은 false가 된다

if (user.name !== undefined) {
  // 빈 문자열도 정상 값으로 인정
}

3️⃣ optional chaining (`?.`) — 실무에서 진짜 많이 씀

user.profile?.imageUrl

🔥 실무 핵심 포인트

?는 값이 없을 수 있음을 문서로 고정하는 도구
optional은 대부분 백엔드 응답 / 외부 데이터에서 사용
optional을 쓰는 순간 👉 if 조건을 더 신중히 써야 한다

6️⃣-1️⃣ if falsy 실무 패턴 요약 (자주 쓰는 것만)

✔️ 패턴 1: 값 존재 여부만 확인 (early return)

if (!value) return;

null, undefined, "", 0 모두 거른다
UI 이벤트, 가드 로직에서 가장 흔함

✔️ 패턴 2: null / undefined 만 체크 (실무 최중요)

if (value == null) return;

null 또는 undefined 만
0, "", false 는 통과

✔️ 패턴 3: optional 값 접근

if (user.profile?.imageUrl) {
  // imageUrl 있을 때만
}

7️⃣ 실무 필수 내장 타입 (Utility Types) (2분)

타입스크립트에는 실무에서 매일 쓰는 내장 타입이 이미 준비되어 있다.

1️⃣ Partial — 전부 optional로 만들기

interface User {
  id: number;
  name: string;
  email: string;
}

type UserUpdate = Partial<User>;

👉 PATCH API, 수정 화면에서 필수

2️⃣ Omit<T, K> — 특정 필드 제거

type UserWithoutId = Omit<User, "id">;

3️⃣ Pick<T, K> — 필요한 것만 선택

type UserPreview = Pick<User, "id" | "name">;

4️⃣ Required — optional 제거

type RequiredUser = Required<User>;

5️⃣ Record<K, T> — key/value 객체를 가장 안전하게

type Role = "admin" | "user" | "guest";

type RoleLabelMap = Record<Role, string>;

const ROLE_LABEL: RoleLabelMap = {
  admin: "관리자",
  user: "일반 사용자",
  guest: "손님",
};

의미:

key 집합을 타입으로 고정
빠진 key, 잘못된 key를 컴파일 단계에서 차단

❌ 객체를 그냥 쓰면 생기는 문제

const ROLE_LABEL = {
  admin: "관리자",
  user: "일반 사용자",
};
// guest 빠져도 에러 없음 ❌

✅ Record를 쓰면

const ROLE_LABEL: Record<Role, string> = {
  admin: "관리자",
  user: "일반 사용자",
  guest: "손님",
};

👉 모든 key 강제 → 설정 객체, 상수 맵에 최적

🔥 Utility Type 핵심 정리

타입을 새로 만들지 말고 조합하라
Partial / Pick / Omit / Required / Record
이 5개면 실무 타입의 90% 해결

8️⃣ typeof — 값에서 타입을 뽑아내는 실무 핵심 (1분)

typeof는 런타임 값으로부터 타입을 재사용하게 해준다.

1️⃣ 상수 객체 → 타입으로 만들기 (최빈도)

const ROLE_LABEL = {
  admin: "관리자",
  user: "일반 사용자",
  guest: "손님",
} as const;

type RoleLabelMap = typeof ROLE_LABEL;

의미:

값과 타입을 한 번만 정의
타입과 값이 절대 어긋나지 않음

2️⃣ typeof + keyof — key 타입 뽑기 (실무 조합)

type Role = keyof typeof ROLE_LABEL;
// "admin" | "user" | "guest"

👉 enum 대체 패턴 (가장 많이 씀)

3️⃣ 함수 반환 타입 재사용

function createUser() {
  return {
    id: 1,
    name: "kim",
  };
}

type User = ReturnType<typeof createUser>;

👉 API 응답, 팩토리 함수에서 매우 유용

❌ typeof를 안 쓰면 생기는 문제

const CONFIG = {
  retry: 3,
  timeout: 1000,
};

// 타입을 따로 또 작성
interface Config {
  retry: number;
  timeout: number;
}

👉 값과 타입이 쉽게 어긋남

🔥 typeof 실무 핵심 요약

값이 이미 있으면 타입을 다시 만들지 말 것
typeof는 타입 중복을 제거하는 도구
Record / keyof 와 함께 쓰면 위력이 폭발

🎯 10분 투자로 Typescript 타입스크립트 정복

중년개발자

🎯 10분 강의로 타입스크립트 정복

0️⃣ 강의 한 줄 요약 (30초)

1️⃣ 가장 먼저 알아야 할 것: if 문과 boolean (1분)

❌ 자바스크립트의 현실

❗ if 문에서 false로 평가되는 모든 조건 (Falsy 값)

❌ 실무에서 가장 많이 터지는 버그

✅ 타입스크립트의 핵심 해결 방식

boolean 타입은 완전히 다르다

🔥 실무 핵심 포인트

2️⃣ 기본 타입: 이거면 80% 끝 (2분)

정말 자주 쓰는 기본 타입

배열

객체 (inline)

null / undefined

3️⃣ 함수 타입: 실무에서 제일 중요 (2분)

매개변수 + 반환 타입

화살표 함수

반환값이 없을 때

🔥 실무 포인트

4️⃣ interface vs type (가장 많이 물어보는 질문) (2분)

interface (객체 구조 정의용)

type (더 범용적)

차이 핵심 요약

확장 비교

✅ 실무 기준 추천

5️⃣ 유니온 타입: 타입스크립트의 진짜 힘 (1.5분)

조건문이 완전히 달라진다

6️⃣ 실무 최빈도 패턴: optional (?) + 조건문 (1분)

1️⃣ optional property (?) — 값이 없을 수도 있다는 선언

2️⃣ optional + if 문 (타입 좁히기)

3️⃣ optional chaining (?.) — 실무에서 진짜 많이 씀

🔥 실무 핵심 포인트

6️⃣-1️⃣ if falsy 실무 패턴 요약 (자주 쓰는 것만)

✔️ 패턴 1: 값 존재 여부만 확인 (early return)

✔️ 패턴 2: null / undefined 만 체크 (실무 최중요)

✔️ 패턴 3: optional 값 접근

7️⃣ 실무 필수 내장 타입 (Utility Types) (2분)

1️⃣ Partial — 전부 optional로 만들기

2️⃣ Omit<T, K> — 특정 필드 제거

3️⃣ Pick<T, K> — 필요한 것만 선택

4️⃣ Required — optional 제거

5️⃣ Record<K, T> — key/value 객체를 가장 안전하게

❌ 객체를 그냥 쓰면 생기는 문제

✅ Record를 쓰면

🔥 Utility Type 핵심 정리

8️⃣ typeof — 값에서 타입을 뽑아내는 실무 핵심 (1분)

1️⃣ 상수 객체 → 타입으로 만들기 (최빈도)

2️⃣ typeof + keyof — key 타입 뽑기 (실무 조합)

3️⃣ 함수 반환 타입 재사용

❌ typeof를 안 쓰면 생기는 문제

🔥 typeof 실무 핵심 요약

댓글 0

6️⃣ 실무 최빈도 패턴: optional (`?`) + 조건문 (1분)

1️⃣ optional property (`?`) — 값이 없을 수도 있다는 선언

3️⃣ optional chaining (`?.`) — 실무에서 진짜 많이 씀