타입스크립트

💙타입스크립트(TypeScript)

마이크로소프트에서 개발한 JavaScript에 타입 시스템을 추가한 언어
자바스크립트의 상위 집합(Superset) 언어

자바스크립트의 모든 기능을 포함하면서, 정적 타입(Static Typing)을 추가하여 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있도록 도와준다.

정적 타입 지정 (Static Typing)

변수, 함수 매개변수, 반환값 등에 타입을 명시할 수 있다.
코드 작성 시점(컴파일 타임)에 타입 오류를 잡아낼 수 있어 디버깅이 쉬워진다.

자바스크립트와 100% 호환

기존 자바스크립트 파일(.js)은 그대로 사용 가능하고, 점진적으로 .ts로 옮길 수 있어 도입이 쉽다.
브라우저는 타입스크립트를 이해하지 못하므로, 컴파일러(tsc)를 사용해 자바스크립트(.js)로 변환하여 실행한다.

인터페이스와 타입 정의

객체의 구조를 명확히 정의할 수 있어 협업에 유리하고, 자동완성 기능이 향상된다.

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

const user: User = {
  name: "Alice",
  age: 25
};

클래스 기반 객체지향 프로그래밍(OOP)

class, interface, public/private/protected 등의 키워드를 통해 OOP 개념을 더 명확히 사용할 수 있다.

💙 사용하는 이유

1. 오류 조기 발견
   코드를 실행하기 전에 오류를 미리 찾아낸다.
2. 더 좋은 개발 도구 지원
   코드 자동 완성, 타입 검사 등 개발 환경이 크게 향상
3. 코드 가독성 향상
   변수나 함수의 의도를 명확하게 전달
4. 대규모 프로젝트에 적합
   팀 단위 개발과 유지 보수가 더 쉬워짐

💙 리터럴 타입

변수가 특정 타입의 값만 가질 수 있도록 제한할 수 있다.

// direction이라는 변수는 오직 "north", "south", "east", "west" 
// 네 가지 중 하나의 값만 가질 수 있다
let direction: "north" | "south" | "east" | "west" = "north";

// 오류 "up"은 허용되지 않은 값
direction = "up"; 

// 주사위 눈처럼 **특정 숫자(1~6)**만 허용하고 다른 숫자는 에러가 나도록 한 것
let diceRoll: 1 | 2 | 3 | 4 | 5 | 6 = 1;

diceRoll = 7; // 오류

💙 인터페이스

객체의 구조를 정의하는 데 사용

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

const user: User = {
  name: "Alice",
  // 선택적 속성
  // 있어도 되고, 없어도 된다.
  age?: 30
};

함수 타입 정의

함수의 매개변수(parameter)와 반환값(return type)에 타입을 명시
함수 구조 자체를 하나의 타입으로 지정
더 안전하고 명확하게 함수 설계 가능

// 하나의 문자열 인자를 받고 문자열을 반환하는 함수
interface Greet {
  (name: string): string;
}

const greet: Greet = function(name) {
  return `Hello, ${name}`;
};

🤍 회고

변수에 타입을 직접 지정하는 방식, interface와 type의 차이, 함수에 타입을 붙이는 방법 등 자바와 비슷한 방식 많아 꽤 놀랐다. 타입스크립트의 OOP 활용에 대한 공부를 더 해야할 것 같다.