2월 마지막주차 수업내용 정리

타입스크립트 핵심 개념 정리

1. 컴파일러 언어와 인터프리터 언어

컴파일러 언어

컴파일러 언어는 코드를 실행하기 전에 모든 소스 코드를 기계어로 번역한 후 실행한다. 대표적인 예로 C, C++과 같은 언어가 있다.

인터프리터 언어 (스크립트 언어)

인터프리터 언어는 실행 시점에서 코드의 문장을 하나씩 번역하면서 실행한다. 자바스크립트(JavaScript)와 같은 언어가 대표적이다. 인터프리터 방식이 상대적으로 단순하지만, 실행 속도가 느릴 수 있다.

타입스크립트(TypeScript)는 자바스크립트와 다르게 트랜스파일(Transpile) 과정을 거친 후 실행되므로 컴파일러 언어와 인터프리터 언어의 중간적인 특성을 가진다. 즉, TypeScript는 트랜스파일러 언어라고 할 수 있다.

2. 타입스크립트 실행 과정

타입스크립트는 브라우저에서 직접 실행되지 않는다. 브라우저는 기본적으로 JavaScript와 WebAssembly만 지원하기 때문이다. 따라서 TypeScript 코드를 실행하려면 반드시 JavaScript로 변환해야 한다. 이 변환 과정을 **트랜스파일(Transpile)**이라고 부르며, 이를 수행하는 도구가 **트랜스파일러(Transpiler)**이다.

실행 단계

1. 트랜스파일: TypeScript를 JavaScript로 변환 (컴파일과 유사하지만 기계어로 번역되지 않기 때문에 트랜스파일이라는 용어를 사용)
2. JavaScript 실행: 변환된 JavaScript 코드가 브라우저 또는 Node.js 환경에서 실행

3. 타입 안정성(Type Safety)

타입 안정성이란 변수에 정해진 유형의 데이터만 들어갈 수 있도록 보장하는 개념이다. 타입스크립트는 이러한 타입 안정성을 제공하며, 이를 위해 트랜스파일 과정에서 JavaScript 코드에 타입 검사를 위한 코드를 추가한다. 자바스크립트는 타입 안정성이 없어서 변수에 어떤 값이든 들어갈 수 있어 예기치 않은 버그가 발생할 가능성이 크지만, 타입스크립트는 이를 방지할 수 있다.

4. 타입스크립트의 주요 타입

4.1 기본 타입

• void: 모든 자바스크립트 함수는 리턴값이 없을 때 undefined를 반환하지만, 논리적으로는 아무것도 반환하지 않는다는 의미를 명확히 하기 위해 void를 사용한다.
• any: 어떤 값이든 들어갈 수 있으며, 타입스크립트의 타입 검사를 우회하는 방식이다. 즉, any를 사용하면 JavaScript와 동일한 상태가 된다. 따라서 가능하면 사용을 피하는 것이 좋다.

4.2 객체 타입

객체 타입을 선언하는 방법은 여러 가지가 있다.

let obj: {} = {};

하지만 위처럼 선언하면 객체 내부의 프로퍼티에 대한 정보가 없기 때문에 실용성이 떨어진다.

4.3 배열 타입

let numbers: number[] = [];
let strings: string[] = [];

배열 안의 요소 개수와 타입이 정해져 있다면 **튜플(tuple)**을 사용할 수 있다.

let tuple: [number, string] = [10, 'kim'];

튜플을 사용하면 특정 위치에 특정 타입의 값이 들어가도록 강제할 수 있다.

5. 타입 정의 방법: Type Alias vs Interface

Type Alias

type UserType = {
  name: string;
  age: number;
};

Interface

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

Type Alias와 Interface의 차이점

구분특징

Interface	객체 간의 소통을 위한 계약. 확장 가능. 일반적으로 더 많이 사용됨.
Type Alias	특정 데이터의 형식을 정의. API 응답 데이터 등의 구조를 지정할 때 적합.

강사님은 제공자와 사용자의 소통이라는 맥락이 중요하다면 Interface를, 데이터의 정의라면 Type Alias를 사용하는 것이 좋다고 설명한다.

덕 타이핑(Duck Typing)

타입스크립트에서는 타입의 형태가 동일하면 같은 타입으로 취급한다. 즉, 정의된 타입이 같다면 같은 타입으로 간주하는 특성을 가진다. 이를 덕 타이핑이라고 한다. "오리처럼 보이면 오리다!"라는 개념을 기반으로 한다.

6. 함수 타입 선언 방식

// 일반 함수
function add(a: number, b: number): number {
  return a + b;
}

// 화살표 함수
const multiply = (a: number, b: number): number => a * b;

일반 함수는 prototype을 가지지만, 화살표 함수는 가지지 않는다. 따라서 prototype 관련 사용이 필요하고, this 바인딩이 필요 없을 때 화살표 함수를 사용하는 것이 좋다.

9. 제네릭(Generic)과 keyof 연산자

제네릭을 사용하면 타입을 유연하게 정의할 수 있다. 제네릭에서 T는 Template의 약자이며, 다른 대문자로도 사용 가능하다.

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

제네릭이라는 용어는 다른 언어에서는 Template이라는 개념으로 불리기도 한다. 즉, '틀'을 만들어 두고 필요한 데이터를 넣어 활용하는 개념이다.

keyof 연산자는 객체의 키 값을 추출하는 데 유용하다.

type UserKeys = keyof User; // 'name' | 'age'

10. 마무리

타입스크립트는 코드의 안정성을 높이고, 설계를 명확하게 하도록 도와주는 강력한 도구이다. 강사님은 타입스크립트를 사용하는 개발자가 더 좋은 설계를 할 가능성이 높다고 강조한다. 처음에는 문법이 어렵게 느껴질 수 있지만, 익숙해지면 생산성이 크게 향상된다.

이제 남은 것은 직접 코드를 작성하면서 익히는 것이다. TS 치트 시트를 뽑아서 옆에 두고 익히는 것도 좋은 방법이다.