🎯 TypeScript의 기본 개념을 정리합니다.

📗 Today I Learned

TypeScript

Microsoft에서 개발한 JavaScript의 상위 언어로, 정적 타입 기능과 객체지향적 요소를 갖추고 있습니다.

특징

TypeScript로 작성된 코드는 직접 실행될 수 없으며, 먼저 JavaScript로 컴파일된 후 브라우저나 Node.js 환경에서 실행할 수 있습니다.

🤔 왜 타입스크립트가 필요할까?

JavaScript는 프로젝트 규모가 커지면서 각 변수나 함수가 어떤 타입을 기대하는지 기억하기 어렵지만 TypeScript는 타입을 지정할 수 있기 때문에 유지보수성이 좋습니다.

JavaScript는 런타임에서 타입 오류를 발견하지만, TypeScript는 컴파일 단계에서 오류를 발견하기 때문에 타입이 잘못되면 버그를 미리 방지할 수 있습니다.

---

설치 및 사용 방법

TypeScript를 사용하려면 먼저 Node.js가 설치되어 있어야 합니다.

1. TypeScript를 전역으로 설치합니다.

npm i -g typescript

2. tsconfig.json 설정 파일을 생성합니다.

tsc --init

3. TypeScript 컴파일 합니다.

tsc 파일명.ts

매번 컴파일을 할 필요 없이 자동 컴파일 되도록 --watch 모드를 설정해줍니다.

tsc -w 파일명.ts

4. JavaScript로 변환된 파일을 Node.js로 실행합니다.

node 파일명.js

---

TypeScript 타입 시스템

TypeScript는 데이터 타입을 명확하게 정의할 수 있습니다. 또한, 타입을 명시하지 않더라도 타입 추론 기능을 통해 자동으로 타입을 결정합니다.

기본 타입 (Primitive Types)

• number : 숫자를 표현하는 타입입니다. 정수와 실수를 모두 포함합니다.

let age: number = 25;

🤔 숫자 리터럴이란 무엇일까?

숫자 값을 직접 표현하여 정의하는 방식을 말합니다.

let speed: 50 | 100 | 200;
speed = 100; // 유효
speed = 150; // 에러

---

✅ 리터럴(Literal)이란?

리터럴은 우리가 코드에서 직접 적어 넣는 값 그 자체를 말합니다.
예를 들어,

const num = 3;
const str = "hello";

• string : 문자열을 표현합니다. 작은따옴표('), 큰따옴표("), 또는 백틱(`)을 사용할 수 있습니다.

let name: string = "Alice";

🤔 문자열 리터럴이란 무엇일까?

문자열 값을 직접 표현하여 정의하는 방식을 말합니다.

let fruit: "apple";
fruit = "apple";   // 유효
fruit = "banana"; // 에러

• boolean : 참(true) 또는 거짓(false)을 나타냅니다.

let isDarkModeEnabled: boolean = false;

🤔 불리언 리터럴이란 무엇일까?

참과 거짓 값을 직접 표현하여 정의하는 방식을 말합니다.

let isTrue: true;
isTrue = true; // 유효
isTrue = false; // 에러 

• null : 값이 없음을 명시적으로 나타냅니다.

let selectedProduct: string | null = null;

🤔 null 리터럴이란 무엇일까?

null 값을 직접 표현하여 정의하는 방식을 말합니다.

let currentUser: null;
currentUser = null; // 유효
currentUser = "guest"; // 에러

• undefined : 값이 할당되지 않은 상태를 나타냅니다.

let userName: string | undefined;
console.log(userName); // undefined

🤔 undefined 리터럴이란 무엇일까?

undefined 값을 직접 표현하여 정의하는 방식을 말합니다.

let status: undefined;
status = undefined; // 유효
status = "active"; // 에러

---

객체 타입(Object Types)

• object : 객체의 타입을 정의할 때 사용합니다. 객체는 클래스나 함수로 생성할 수 있습니다.

// 클래스 사용 예시
class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

const student: object = new Person("Alice");

// 함수로 객체 생성
function createAnimal(type: string, age: number) {
  return { type, age };
}

const animal: object = createAnimal("Dog", 3);

🤔 객체 리터럴이란 무엇일까?

중괄호 {}를 사용해 직접 객체를 선언하고 값을 정의하는 방식을 말합니다. 즉, 객체를 만들 때 클래스를 사용하거나 함수로 생성하지 않고, 필요한 속성과 값을 직접 써서 즉석에서 만든 객체입니다.

let person :  { name: 'John', age: 30 };
person = { name: 'John', age: 30 }; // 유효
person =  { name: 'Alice', age: 25 }; // 에러

• array : 같은 타입의 요소를 가지는 배열을 표현할 때 사용합니다.

// 기본 배열 선언
let numbers: number[] = [1, 2, 3];
let names: string[] = ["Alice", "Bob"];

// 유니언 타입 배열
let mixedArray : (number | string)[] = [1, 'two', 3, 'four'];

// 읽기 전용 배열 (ReadonlyArray<T>)
let readOnlyArray : ReadonlyArray<number> = [1, 2, 3];

🤔 유니언 타입(Union Types)이란?
여러 타입 중 하나를 가질 수 있도록 허용하는 타입입니다.

let value: string | number;
value = "hello";   
value = 42;        

• tuple : 고정된 길이와 각각의 인덱스에 다른 타입을 가질 수 있는 배열입니다. 타입의 순서와 배열의 길이가 고정된 배열입니다.

let person: [string, number] = ["Alice", 30];

---

특수 타입 (Special Types)

• any : 모든 타입을 허용합니다. 가능한 한 사용을 지양해야 하며, 타입 검사의 이점을 잃게 됩니다.

let value: any = "문자열"; 
value = 10;

• unknown : 외부 데이터와 같이 타입을 알 수 없는 값을 처리할 때 사용됩니다. any보다 안전하며, 타입 확인 없이 사용하면 오류가 발생합니다.

let input: unknown = "Hello";

if (typeof input === "string") {
  console.log(input.toUpperCase());
}

---

사용자 정의 타입 (Custom Types)

• interface : 객체의 속성 구조와 타입을 정의하는 데 사용됩니다. 함수, 클래스, 객체 등 다양한 곳에서 구조를 명확히 지정할 수 있어 코드의 가독성과 유지보수성을 높여줍니다.

interface Animal {
  name: string;
  age?: number; // 선택적 프로퍼티는 속성값 뒤에`?`를 붙여 표현해줍니다.
  sound(): void;
}

class Dog implements Animal { // implements는 '구현하다'는 의미로, Dog 클래스가 Animal 인터페이스의 구조를 반드시 따라야 한다는 뜻입니다.
  name: string;
  age?: number;

  constructor(name: string, age?: number) {
    this.name = name;
    if (age !== undefined) {
      this.age = age;
    }
  }

  sound() { // sound() 메서드는 형태만 존재하므로, 오버라이딩(재정의)를 꼭 해줘야 합니다.
    console.log("멍멍!");
  }
}

const dog1 = new Dog("초코", 3);
const dog2 = new Dog("바둑이"); 

dog1.sound(); // 멍멍!

• enum : 의미 있는 이름으로 정해진 값의 집합을 정의하는데 사용됩니다. 숫자 또는 문자열 값을 직접 정의하고 관리할 수 있으며, 코드의 가독성, 안정성, 자동완성 편의성을 높여줍니다.

// 기본 `eunm`
enum Weekday {
  Monday, // 아무 값도 지정하지 않으면 0부터 순차적으로 숫자가 할당됩니다.
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday,
}

let today: Weekday = Weekday.Tuesday;
console.log(today); //  1

// -----------------------------------------

// 문자열 `enum`
enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

let move: Direction = Direction.Left;
console.log(move); // LEFT

• type : 타입에 이름을 붙여 재사용할 수 있게 해줍니다. 다양한 형태의 타입을 표현할 수 있으며, 복잡한 타입을 간결하게 관리하고 가독성을 높여줍니다.

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

let current: Status = "success";

---

클래스 기반 객체 (Class-based OOP)

클래스 (Class)

속성(프로퍼티)과 동작(메서드)을 정의하고, 이를 바탕으로 new 키워드를 통해 실제 객체를 만들 수 있습니다.

class Person {
  name: string;
  age: number;

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

  greet(): void {
    console.log(`안녕하세요, 저는 ${this.name}이고 ${this.age}살입니다.`);
  }
}

const user = new Person("Alice", 30);
user.greet(); // 안녕하세요, 저는 Alice이고 30살입니다.

getter / setter

클래스 안에서 프로퍼티를 안전하게 다루기 위한 방법으로 직접 속성에 접근하는 대신, 간접적으로 값을 읽거나 수정할 수 있게 합니다.

class User {
  private _name: string;

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

  // getter
  get name(): string {
    return this._name;
  }

  // setter
  set name(newName: string) {
    if (newName.length < 2) {
      throw new Error("이름은 최소 2자 이상이어야 합니다.");
    }
    this._name = newName;
  }
}

const user = new User("Alice");
console.log(user.name); // "Alice"
user.name = "Bob";  

🤔 왜 public을 안 쓰고 일부러 복잡하게 private + get/set을 쓸까?

1️⃣ 데이터에 직접 접근을 막고 제어할 수 있기 때문입니다.

set에 넣었던 조건으로 이상한 값을 넣는 것을 방지할 수 있습니다.

set empName(val: string) {
  if (val.length < 2) {
    throw new Error("이름은 두 글자 이상이어야 합니다!");
  }
  this._empName = val;
}

2️⃣ 내부 구현을 바꾸기 쉽기 때문입니다.

_empName 말고 다른 형태로 바꿀 때 용이합니다.

get empName() {
  return this._empName.toUpperCase(); 
}

✨ 생성자에서 바로 선언하고 초기화하는 방법

before

class Employee {
  private _empName: string;
  private _age: number;
  private _empJob: string;

  constructor(empName: string, age: number, empJob: string) {
    this._empName = empName;
    this._age = age;
    this._empJob = empJob;
  }
}

• 매개변수 이름과 필드 이름을 다르게 지정할 수 있어서 유연합니다
• 더 복잡한 로직이 있는 경우 ( this._age = validateAge(age) ) 유리합니다.

after

class Employee {
  constructor(
    private _empName: string,
    private _age: number,
    private _empJob: string
  ) {}
}

• 반복이 없어서 가독성 좋고 빠르게 작성 가능합니다.

---

고급 타입 기능 (Advanced Concepts)

타입 가드 (Type Guard)

런타임에서 더 정확한 타입을 추론할 수 있게 도와주는 기능입니다.

function printValue(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase()); // string으로 좁혀짐
  } else {
    console.log(value.toFixed(2)); // number로 좁혀짐
  }
}

---

✏️ 회고

C 계열 언어에서 경험했던 interface나 enum 개념 덕분에, 타입스크립트 문법이 훨씬 덜 어렵게 느껴졌다.