[42일차]타입스크립트: 언어 개념과 기본 설정.

1. 언어 개요 (타입스크립트란?)

타입스크립트(TypeScript)는 Microsoft가 개발한 오픈소스 프로그래밍 언어이다. 이는 자바스크립트의 슈퍼셋(Superset)으로, 자바스크립트의 모든 기능을 포함하면서 정적 타입(Static Type) 문법을 추가한 것이 가장 큰 특징이다.

• 역사 및 등장 배경: 초기의 웹과 달리 현대의 웹 애플리케이션은 규모가 매우 커지고 복잡해졌다. 순수 자바스크립트는 동적 타입 언어이므로, 코드가 실행되는 시점(런타임)에야 타입 오류를 발견할 수 있었다. 이러한 대규모 프로젝트의 안정성과 유지보수성을 높이기 위해 2012년 타입스크립트가 등장했다. 컴파일 단계에서 미리 오류를 잡아낼 뿐만 아니라, 코드 자동 완성(IntelliSense), 안전한 리팩토링 등 강력한 도구를 지원하여 개발 생산성을 크게 향상시킨다.

---

2. 초기 환경 설정 방법

1. 타입스크립트 전역 설치

npm install -g typescript

2. 코드 포매터 및 린터 (권장)

• Prettier: 일관된 코드 스타일을 유지해주는 코드 포매터이다.
• ESLint: 코드의 문법적 오류나 잠재적 버그를 찾아주는 린터이다.

3. tsconfig.json

tsc --init 명령어로 생성되는 타입스크립트 설정 파일이다. 이 파일을 통해 프로젝트에 맞는 컴파일 옵션을 세밀하게 조정할 수 있다.

자주 사용하는 설정들:

• target: 컴파일 후 생성될 자바스크립트의 버전을 지정하는 설정이다. (e.g., "ES6")
• module: 어떤 모듈 시스템을 사용할지 지정하는 설정이다. (e.g., "commonjs", "ESNext")
• strict: 모든 엄격한 타입 검사 옵션을 활성화하는 설정으로, 코드의 안정성을 위해 true로 설정하는 것이 권장된다.
• outDir: 컴파일된 .js 파일들이 저장될 디렉토리를 지정하는 설정이다. (e.g., "./dist")
• rootDir: 타입스크립트 소스 파일(.ts)이 위치한 최상위 디렉토리를 지정하는 설정이다. (e.g., "./src")
• esModuleInterop: CommonJS 모듈을 ES 모듈 방식으로 가져올 수 있게 해주는 호환성 옵션이다.

---

3. 데이터 타입 (Data Types)

기본 데이터 타입

• number: 모든 종류의 숫자(정수, 실수)를 나타내는 타입이다.
• string: 모든 문자열을 나타내는 타입이다.
• boolean: 논리적인 값 true와 false를 나타내는 타입이다.
• null: 값이 없음을 의도적으로 명시하는 타입이다.
• undefined: 값이 할당되지 않았음을 나타내는 타입이다.

객체 타입

• object: 원시 타입이 아닌 모든 타입을 나타낸다.
• array: number[] 또는 Array<number>와 같이 단일 타입의 요소로 구성된 배열을 나타내는 타입이다.
• tuple: [string, number]와 같이 정해진 순서와 개수에 따라 여러 타입을 가질 수 있는 배열이다.

특수 타입

• any: 어떤 타입이든 될 수 있는 타입으로, 타입 검사를 비활성화한다. 가급적 사용을 피해야 하는 타입이다.
• unknown: 아직 타입을 알 수 없음을 나타내는 타입이다. any보다 안전하며, 값을 사용하기 전에 반드시 타입을 확인해야 한다.
• void: 함수에서 반환 값이 없을 때 사용되는 타입이다.

---

4. 타입 추론과 타입 명시

• 타입 추론(Type Inference): 타입스크립트가 코드의 문맥을 파악하여 변수의 타입을 자동으로 유추하는 기능이다.
• 타입 명시(Type Annotation): 변수나 함수 뒤에 : 타입을 붙여 타입을 직접 지정해주는 것이다.

일반적으로 타입스크립트의 타입 추론에 맡기는 것이 권장되지만, 함수의 매개변수, 초기값이 없는 변수 등 추론이 불가능한 경우에는 타입을 명시해야 한다.

타입 명시 예시 코드:

let age: number = 30;
let username: string = "JHParrrk";

타입이 한번 정해지면, 다른 타입의 값은 할당할 수 없다.

에러 발생 예시:

let a = 1;      // 'a'는 number 타입으로 추론된다.
a = '문자열';  // 에러: 'string' 형식은 'number' 형식에 할당할 수 없다.

---

5. 인터페이스 (Interface)

interface는 객체의 구조를 정의하는 사용자 정의 타입을 만드는 데 사용되는 키워드이다.

• 인터페이스로 정의된 객체는 정의된 속성을 모두 포함해야 하며, 속성 이름 뒤에 ?를 붙여 선택적 속성으로 만들 수 있다.
• readonly 키워드를 사용하면 한 번 값이 할당된 후에는 수정할 수 없는 읽기 전용 속성을 정의할 수 있다.
• 한 번 정의한 인터페이스는 재사용이 가능하여 코드의 일관성과 가독성을 높인다.

인터페이스 정의 예시 코드:

interface UserProfile {
  readonly id: number; // 읽기 전용 속성
  name: string;
  company?: string;    // 선택적 속성
}

let profile: UserProfile = {
  id: 123,
  name: "JHParrrk",
};

또한, implements 키워드를 사용하여 클래스가 특정 인터페이스의 구조를 따르도록 강제할 수 있다.

클래스 구현 예시 코드:

interface Drawable {
  draw(): void;
}

class Square implements Drawable {
  draw() {
    console.log("Drawing a square.");
  }
}

---

6. 열거형 (Enum)

enum은 서로 관련된 여러 상수를 하나의 이름으로 묶어 관리하는 기능이다. 기본적으로 0부터 시작하는 숫자 값이 할당된다.

Enum 예시 코드 (TypeScript):

enum LogLevel {
  INFO,    // 0
  WARN,    // 1
  ERROR,   // 2
}

let level: LogLevel = LogLevel.WARN; // level 변수에는 숫자 1이 할당된다.

타입스크립트 코드에서는 이름으로 사용하지만, 실제 컴파일된 자바스크립트 코드를 보면 숫자 값으로 변환되어 사용되는 것을 알 수 있다.

컴파일된 코드 예시 (JavaScript):

var LogLevel;
(function (LogLevel) {
    LogLevel[LogLevel["INFO"] = 0] = "INFO";
    LogLevel[LogLevel["WARN"] = 1] = "WARN";
    LogLevel[LogLevel["ERROR"] = 2] = "ERROR";
})(LogLevel || (LogLevel = {}));

let level = LogLevel.WARN;

또한, 숫자 대신 문자열 값을 직접 할당하는 문자열 열거형도 지원하여 코드의 가독성을 더욱 높일 수 있다.