Category Reference

TypeScript

타입 시스템, 제네릭, 모듈, tsconfig, 실전 타입 설계까지 TypeScript의 핵심 흐름을 카드형 레퍼런스로 정리합니다.

카드 검색

17 cards

제목, 요약, 태그, 섹션 제목 기준으로 찾습니다.

소개와 개념

2 cards

TypeScript소개와 개념

타입 검사를 더하는 이유

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

add(1, 2);
// add("1", 2); // 타입 오류

JavaScript의 런타임은 유지하면서 타입 검사를 통해 큰 코드베이스의 오류를 줄이는 TypeScript의 핵심 가치를 정리합니다.

TypeScript소개와 개념

타입 주석과 타입 추론

let username: string = "refdock";
const port = 3000;

모든 변수에 타입을 다 적는 대신, 필요한 곳만 명시하고 나머지는 추론에 맡기는 TypeScript의 기본 사용법을 정리합니다.

기본 타입과 좁히기

4 cards

TypeScript기본 타입과 좁히기

기본 타입 기초

let title: string = "RefDock";
let count: number = 42;
let done: boolean = false;
let tags: string[] = ["ts", "types"];

string, number, boolean, array 같은 가장 자주 쓰는 TypeScript 기본 타입 표현을 정리합니다.

TypeScript기본 타입과 좁히기

union과 literal 타입

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

여러 가능성을 하나의 타입으로 묶는 union과 값 자체를 타입으로 쓰는 literal 타입의 핵심을 정리합니다.

TypeScript기본 타입과 좁히기

any, unknown, never 차이

let raw: unknown = JSON.parse("{}");

if (typeof raw === "object" && raw !== null) {
  console.log(raw);
}

안전성을 거의 포기하는 any, 확인이 필요한 unknown, 도달 불가능을 나타내는 never의 차이를 정리합니다.

TypeScript기본 타입과 좁히기

narrowing과 타입 가드

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(0));
  }
}

union 타입 값을 실제 분기 조건으로 좁혀 안전하게 사용하는 narrowing의 핵심 패턴을 정리합니다.

객체와 함수

3 cards

TypeScript객체와 함수

type alias와 interface

type Point = { x: number; y: number };

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

객체 구조를 이름 붙여 재사용할 때 type alias와 interface를 어떻게 나눠 생각할지 정리합니다.

TypeScript객체와 함수

객체 타입의 optional과 readonly

interface User {
  id: number;
  nickname?: string;
  readonly createdAt: Date;
}

객체 프로퍼티의 존재 여부와 수정 가능성을 타입 수준에서 표현하는 optional, readonly의 핵심을 정리합니다.

TypeScript객체와 함수

함수 타입과 콜백 타입

type Formatter = (value: number) => string;

function formatPrice(value: number, fn: Formatter) {
  return fn(value);
}

매개변수, 반환값, 콜백 시그니처를 타입으로 표현해 함수 경계를 더 명확하게 만드는 기본 카드를 정리합니다.

제네릭과 타입 조작

3 cards

TypeScript제네릭과 타입 조작

제네릭 기초

function identity<T>(value: T): T {
  return value;
}

입력 타입과 출력 타입의 관계를 보존하는 재사용 가능한 함수와 자료구조를 만들기 위한 제네릭의 핵심을 정리합니다.

TypeScript제네릭과 타입 조작

제네릭 제약과 keyof

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

제네릭이 아무 타입이나 받지 않도록 제약을 걸고, 객체 키 집합을 keyof로 안전하게 다루는 패턴을 정리합니다.

TypeScript제네릭과 타입 조작

유틸리티 타입 기초

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

type UserPatch = Partial<User>;
type UserSummary = Pick<User, "id" | "name">;

Partial, Pick, Omit, Record, ReturnType 같은 유틸리티 타입으로 반복적인 타입 변형을 줄이는 패턴을 정리합니다.

클래스와 모듈

2 cards

TypeScript클래스와 모듈

클래스 기초

class User {
  constructor(
    public id: number,
    public name: string,
  ) {}
}

JavaScript 클래스 문법 위에 타입 정보와 접근 제어를 더한 TypeScript 클래스의 기본 구조를 정리합니다.

TypeScript클래스와 모듈

모듈과 import/export

// math.ts
export function add(a: number, b: number) {
  return a + b;
}

// main.ts
import { add } from "./math";

파일 단위 모듈 경계를 import/export로 분리하고, 타입과 값이 함께 오가는 구조를 정리합니다.

설정과 실전

3 cards

TypeScript설정과 실전

tsconfig 기본

json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "outDir": "dist"
  },
  "include": ["src"]
}

TypeScript 프로젝트의 컴파일 규칙과 타입 검사 강도를 정하는 tsconfig.json의 핵심 옵션을 정리합니다.

TypeScript설정과 실전

strict 모드와 null 안전성

json

{
  "compilerOptions": {
    "strict": true
  }
}

strict 계열 옵션이 어떻게 더 강한 오류 검사를 만들고, strictNullChecks가 왜 중요한지를 정리합니다.

TypeScript설정과 실전

선언 파일과 생태계 타입

bash

npm install -D @types/node

npm 패키지의 타입 정보를 `.d.ts`와 `@types` 패키지로 공급받는 생태계 구조를 정리합니다.