타입스크립트 완벽 가이드: 기초부터 고급 기능까지

타입스크립트 완벽 가이드: 기초부터 고급 기능까지

타입스크립트는 현대 웹 개발에서 필수적인 도구로 자리 잡았습니다. 자바스크립트의 모든 기능을 포함하면서도 정적 타입 시스템을 통해 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있게 해줍니다. 이 글에서는 타입스크립트의 기초부터 고급 기능까지 상세히 알아보겠습니다.

타입스크립트란 무엇인가?

타입스크립트는 마이크로소프트에서 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트의 상위 집합(Superset)입니다. 자바스크립트의 모든 기능을 포함하면서도 정적 타입 시스템을 추가하여 코드의 안정성과 가독성을 높여줍니다.

타입스크립트의 핵심 특징

타입스크립트는 “점진적 타입 시스템”을 채택하여 정적 타입 시스템과 동적 타입 시스템의 장점을 모두 활용합니다:

• 정적 타입 시스템처럼 코드 실행 전 타입 검사 수행
• 동적 타입 시스템처럼 모든 변수에 타입을 명시할 필요 없음
• 타입 추론을 통해 초기값을 기준으로 자동으로 타입 결정

타입스크립트의 주요 이점

• 버그 감소: 컴파일 시점에 타입 오류를 발견하여 런타임 오류 감소
• 코드 가독성 향상: 타입 정보가 문서 역할을 하여 코드 이해도 증가
• 개발 생산성 향상: 코드 자동 완성, 리팩토링 등 IDE 지원 강화
• 안전한 리팩토링: 타입 시스템이 코드 변경 시 발생할 수 있는 문제 사전 감지

타입스크립트 설치 및 환경 설정

타입스크립트를 시작하기 위해서는 Node.js와 npm이 필요합니다.

전역 설치

bashnpm install -g typescript

프로젝트별 설치

bashnpm init -y
npm install typescript --save-dev

tsconfig.json 설정

프로젝트 루트에 tsconfig.json 파일을 생성하여 타입스크립트 컴파일러 옵션을 설정할 수 있습니다:

json{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

타입스크립트 기본 타입

타입스크립트는 다양한 기본 타입을 제공합니다.

기본 타입

typescript// 기본 타입
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];

특수 타입

typescript// any 타입 - 모든 타입 허용
let notSure: any = 4;
notSure = "maybe a string";

// unknown 타입 - any보다 안전한 타입
let value: unknown = 10;
if (typeof value === "number") {
  let num: number = value; // 타입 체크 후 할당 가능
}

// void 타입 - 반환값이 없는 함수
function warnUser(): void {
  console.log("Warning message");
}

// null과 undefined
let u: undefined = undefined;
let n: null = null;

객체 타입

typescript// 객체 타입 정의
let user: { name: string; age: number } = {
  name: "John",
  age: 30
};

// 인터페이스를 사용한 객체 타입 정의
interface User {
  name: string;
  age: number;
  email?: string; // 선택적 속성
}

let newUser: User = {
  name: "Jane",
  age: 25
};

인터페이스와 타입 별칭

타입스크립트에서는 인터페이스와 타입 별칭을 통해 복잡한 타입을 정의할 수 있습니다.

인터페이스(Interface)

인터페이스는 객체의 구조를 정의하는 방법입니다.

typescriptinterface Person {
  firstName: string;
  lastName: string;
  age?: number; // 선택적 속성
  readonly id: number; // 읽기 전용 속성
  sayHello(): string; // 메서드 시그니처
}

const john: Person = {
  firstName: "John",
  lastName: "Doe",
  id: 1,
  sayHello() {
    return `Hello, I'm ${this.firstName}`;
  }
};

인터페이스 확장

인터페이스는 다른 인터페이스를 확장할 수 있습니다.

typescriptinterface Employee extends Person {
  jobTitle: string;
  salary: number;
}

const jane: Employee = {
  firstName: "Jane",
  lastName: "Smith",
  id: 2,
  jobTitle: "Developer",
  salary: 50000,
  sayHello() {
    return `Hello, I'm ${this.firstName}, a ${this.jobTitle}`;
  }
};

타입 별칭(Type Alias)

타입 별칭은 인터페이스와 유사하지만 더 다양한 타입을 정의할 수 있습니다.

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

// 유니온 타입
type ID = string | number;

// 튜플 타입
type Coordinates = [number, number];

// 함수 타입
type CalculateFunction = (a: number, b: number) => number;

인터페이스 vs 타입 별칭

두 방식 모두 타입을 정의하는 데 사용되지만 몇 가지 차이점이 있습니다:

• 인터페이스는 선언 병합(declaration merging)이 가능하지만 타입 별칭은 불가능
• 타입 별칭은 유니온, 교차 타입 등 더 다양한 타입 표현이 가능
• 인터페이스는 객체, 클래스의 구조를 정의하는 데 더 적합

함수 타입

타입스크립트에서는 함수의 매개변수와 반환 타입을 명시할 수 있습니다.

함수 타입 정의

typescript// 함수 선언식
function add(a: number, b: number): number {
  return a + b;
}

// 함수 표현식
const subtract = function(a: number, b: number): number {
  return a - b;
};

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

선택적 매개변수와 기본값

typescript// 선택적 매개변수
function greet(name: string, greeting?: string): string {
  return greeting ? `${greeting}, ${name}!` : `Hello, ${name}!`;
}

// 기본값 매개변수
function greetWithDefault(name: string, greeting: string = "Hello"): string {
  return `${greeting}, ${name}!`;
}

나머지 매개변수

typescriptfunction sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

함수 오버로드

typescript// 함수 오버로드 시그니처
function process(value: string): string;
function process(value: number): number;
function process(value: string | number): string | number {
  if (typeof value === "string") {
    return value.toUpperCase();
  } else {
    return value * 2;
  }
}

console.log(process("hello")); // "HELLO"
console.log(process(10)); // 20

클래스와 상속

타입스크립트는 객체지향 프로그래밍을 위한 클래스와 상속을 지원합니다.

기본 클래스 정의

typescriptclass Animal {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  makeSound(): void {
    console.log("Some generic sound");
  }
}

const animal = new Animal("Generic Animal");
animal.makeSound(); // "Some generic sound"

접근 제한자

typescriptclass Person {
  public name: string; // 어디서나 접근 가능
  private age: number; // 클래스 내부에서만 접근 가능
  protected email: string; // 클래스와 상속받은 클래스에서 접근 가능
  readonly id: number; // 읽기 전용 속성
  
  constructor(name: string, age: number, email: string, id: number) {
    this.name = name;
    this.age = age;
    this.email = email;
    this.id = id;
  }
  
  public getAge(): number {
    return this.age;
  }
}

상속

typescriptclass Dog extends Animal {
  breed: string;
  
  constructor(name: string, breed: string) {
    super(name); // 부모 클래스의 생성자 호출
    this.breed = breed;
  }
  
  makeSound(): void {
    console.log("Woof! Woof!");
  }
  
  getInfo(): string {
    return `${this.name} is a ${this.breed}`;
  }
}

const dog = new Dog("Rex", "German Shepherd");
dog.makeSound(); // "Woof! Woof!"
console.log(dog.getInfo()); // "Rex is a German Shepherd"

추상 클래스

typescriptabstract class Shape {
  color: string;
  
  constructor(color: string) {
    this.color = color;
  }
  
  abstract calculateArea(): number; // 추상 메서드
  
  displayColor(): void {
    console.log(`This shape is ${this.color}`);
  }
}

class Circle extends Shape {
  radius: number;
  
  constructor(color: string, radius: number) {
    super(color);
    this.radius = radius;
  }
  
  calculateArea(): number {
    return Math.PI * this.radius * this.radius;
  }
}

const circle = new Circle("red", 5);
console.log(circle.calculateArea()); // 78.54...
circle.displayColor(); // "This shape is red"

제네릭(Generics)

제네릭은 타입을 매개변수로 사용하여 재사용 가능한 컴포넌트를 만들 수 있게 해줍니다.

제네릭 함수

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

// 명시적 타입 지정
let output1 = identity<string>("myString");

// 타입 추론
let output2 = identity(42); // 타입은 number로 추론됨

제네릭 인터페이스

typescriptinterface Box<T> {
  value: T;
}

let stringBox: Box<string> = { value: "hello" };
let numberBox: Box<number> = { value: 42 };

제네릭 클래스

typescriptclass Queue<T> {
  private data: T[] = [];
  
  push(item: T): void {
    this.data.push(item);
  }
  
  pop(): T | undefined {
    return this.data.shift();
  }
}

const numberQueue = new Queue<number>();
numberQueue.push(10);
numberQueue.push(20);
console.log(numberQueue.pop()); // 10

const stringQueue = new Queue<string>();
stringQueue.push("hello");
stringQueue.push("world");
console.log(stringQueue.pop()); // "hello"

제네릭 제약조건

typescriptinterface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length); // .length 속성이 있음을 보장
  return arg;
}

loggingIdentity("hello"); // 5
loggingIdentity([1, 2, 3]); // 3
// loggingIdentity(3); // 오류: number에는 .length 속성이 없음

고급 타입

타입스크립트는 더 복잡한 타입 관계를 표현할 수 있는 고급 타입 기능을 제공합니다.

유니온 타입(Union Types)

typescript// 여러 타입 중 하나를 가질 수 있음
function printId(id: number | string) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id);
  }
}

printId(101); // 101
printId("202"); // "202"

교차 타입(Intersection Types)

typescript// 여러 타입을 결합
type Employee = {
  id: number;
  name: string;
};

type Manager = {
  department: string;
  level: number;
};

type ManagerEmployee = Employee & Manager;

const manager: ManagerEmployee = {
  id: 1,
  name: "John",
  department: "IT",
  level: 2
};

타입 가드(Type Guards)

typescript// typeof 타입 가드
function padLeft(value: string, padding: string | number) {
  if (typeof padding === "number") {
    return " ".repeat(padding) + value;
  }
  return padding + value;
}

// instanceof 타입 가드
class Bird {
  fly() {
    console.log("flying...");
  }
}

class Fish {
  swim() {
    console.log("swimming...");
  }
}

function move(animal: Bird | Fish) {
  if (animal instanceof Bird) {
    animal.fly();
  } else {
    animal.swim();
  }
}

리터럴 타입(Literal Types)

typescript// 특정 값만 허용하는 타입
type Direction = "north" | "east" | "south" | "west";

function move(direction: Direction) {
  console.log(`Moving ${direction}`);
}

move("north"); // OK
// move("northeast"); // 오류: "northeast"는 Direction 타입이 아님

타입 단언(Type Assertions)

typescript// 타입 단언
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;

// 또는 각괄호 구문 (JSX에서는 사용 불가)
let strLength2: number = (<string>someValue).length;

모듈과 네임스페이스

타입스크립트는 코드를 구조화하기 위한 모듈과 네임스페이스 시스템을 제공합니다.

ES 모듈

typescript// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

export function subtract(x: number, y: number): number {
  return x - y;
}

// app.ts
import { add, subtract } from './math';

console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2

기본 내보내기와 가져오기

typescript// person.ts
export default class Person {
  constructor(public name: string) {}
  
  greet() {
    return `Hello, my name is ${this.name}`;
  }
}

// app.ts
import Person from './person';

const person = new Person("John");
console.log(person.greet()); // "Hello, my name is John"

네임스페이스

typescript// validation.ts
namespace Validation {
  export interface StringValidator {
    isValid(s: string): boolean;
  }
  
  export class EmailValidator implements StringValidator {
    isValid(s: string): boolean {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(s);
    }
  }
}

// app.ts
/// <reference path="validation.ts" />
let emailValidator = new Validation.EmailValidator();
console.log(emailValidator.isValid("[email protected]")); // true

데코레이터

데코레이터는 클래스, 메서드, 속성 등에 메타데이터를 추가하거나 동작을 변경할 수 있는 기능입니다. 현재 JavaScript에서는 Stage 3 단계에 있으며, TypeScript에서는 이미 구현되어 있습니다8.

클래스 데코레이터

typescriptfunction sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class BugReport {
  type = "report";
  title: string;
  
  constructor(title: string) {
    this.title = title;
  }
}

메서드 데코레이터

typescriptfunction log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${JSON.stringify(result)}`);
    return result;
  };
  
  return descriptor;
}

class Calculator {
  @log
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(1, 2);
// "Calling add with arguments:"
// "Method add returned: 3"

실행 시간 측정 데코레이터

typescriptfunction measure(target: Function, context) {
  if (context.kind === 'method') {
    return function(...args: any[]) {
      const start = performance.now();
      const result = target.apply(this, args);
      const end = performance.now();
      console.log(`Execution time: ${end - start} milliseconds`);
      return result;
    };
  }
}

class Rocket {
  fuel = 100;
  
  @measure
  launch() {
    console.log("Launching in 3... 2... 1... 🚀");
    return true;
  }
}

const rocket = new Rocket();
rocket.launch();
// "Launching in 3... 2... 1... 🚀"
// "Execution time: 1.062355000525713 milliseconds"

데코레이터 팩토리와 조합

데코레이터 팩토리는 데코레이터에 매개변수를 전달할 수 있게 해주는 함수입니다8:

typescriptfunction minimumFuel(fuel: number) {
  return function(target: Function, context) {
    if (context.kind === 'method') {
      return function(...args: any[]) {
        if (this.fuel > fuel) {
          console.log('fuel is more than mininum');
          return target.apply(this, args);
        } else {
          console.log(`Not enough fuel. Required: ${fuel}, got ${this.fuel}`);
        }
      };
    }
  };
}

function maximumFuel(fuel: number) {
  return function(target: Function, context) {
    if (context.kind === 'method') {
      return function(...args: any[]) {
        if (this.fuel < fuel) {
          console.log('fuel is less than maximum');
          return target.apply(this, args);
        } else {
          console.log(`excessive fuel. Maximum: ${fuel}, got ${this.fuel}`);
        }
      };
    }
  };
}

타입스크립트 컴파일 과정

타입스크립트 코드가 자바스크립트로 변환되는 과정을 이해하는 것은 중요합니다.

컴파일 단계

1. 타입스크립트 코드 작성
   • .ts 또는 .tsx 확장자 파일에 코드를 작성합니다9.
2. AST(추상 구문 트리) 변환
   • 타입스크립트 컴파일러가 코드를 AST로 변환합니다.
3. 타입 검사
   • AST를 기반으로 코드의 타입 오류를 검사합니다.
4. 자바스크립트 코드 생성
   • 타입 검사를 통과한 AST를 자바스크립트 코드로 변환합니다.

타입스크립트 컴파일러 설치

타입스크립트 컴파일러(tsc)는 npm을 통해 설치할 수 있습니다9:

bashnpm install -g typescript

또는 프로젝트 로컬에 설치:

bashnpm install --save-dev typescript

tsconfig.json 주요 옵션

json{
  "compilerOptions": {
    "target": "es2020", // 출력 JS 버전
    "module": "commonjs", // 모듈 시스템
    "strict": true, // 엄격한 타입 검사
    "esModuleInterop": true, // 모듈 상호 운용성
    "outDir": "./dist", // 출력 디렉토리
    "rootDir": "./src", // 소스 디렉토리
    "declaration": true, // .d.ts 파일 생성
    "sourceMap": true, // 소스맵 생성
    "noImplicitAny": true, // 암시적 any 금지
    "strictNullChecks": true // null, undefined 엄격 검사
  }
}

간단한 컴파일 예제

1. 타입스크립트 파일 생성 (helloworld.ts)9:

typescriptlet message: string = 'Hello World';
console.log(message);

2. 컴파일 명령어 실행:

bashtsc helloworld.ts

3. 생성된 자바스크립트 파일 실행:

bashnode helloworld.js

타입스크립트와 리액트

타입스크립트는 리액트와 함께 사용할 때 특히 강력합니다3.

리액트 컴포넌트 타입 정의

typescriptimport React, { FC } from 'react';

interface UserProps {
  name: string;
  age: number;
  isAdmin?: boolean; // 선택적 prop
}

const User: FC<UserProps> = ({ name, age, isAdmin = false }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      {isAdmin && <p>Admin User</p>}
    </div>
  );
};

// 사용 예
const App: FC = () => {
  return (
    <div>
      <User name="John" age={30} isAdmin={true} />
      <User name="Jane" age={25} />
    </div>
  );
};

상태 관리와 이벤트 핸들링

typescriptimport React, { useState, ChangeEvent, FormEvent } from 'react';

interface FormState {
  email: string;
  password: string;
}

const LoginForm: React.FC = () => {
  const [formData, setFormData] = useState<FormState>({
    email: '',
    password: ''
  });
  
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
        />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
          required
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );
};

리액트와 타입스크립트 파일 확장자

리액트와 타입스크립트를 함께 사용할 때는 파일 확장자를 주의해야 합니다3:

• JSX를 포함하는 파일: .tsx 확장자 사용
• JSX를 포함하지 않는 파일: .ts 확장자 사용

타입스크립트 모범 사례

타입스크립트를 효과적으로 사용하기 위한 모범 사례를 알아보겠습니다4.

타입 안전성 확보

• any 타입 사용 최소화하기
• unknown 타입을 사용하여 타입 안전성 높이기
• strictNullChecks 활성화하기
• 타입 단언보다 타입 가드 사용하기

코드 구조화

• 관련 타입을 함께 그룹화하기
• 재사용 가능한 타입 정의하기
• 네이밍 컨벤션 일관되게 유지하기
• 인터페이스와 타입 별칭 적절히 사용하기

성능 최적화

• 타입 정의 파일(.d.ts) 활용하기
• 불필요한 타입 체크 피하기
• 타입 추론 활용하기
• 번들 크기 최소화하기

ESLint와 Prettier 통합

• ESLint와 TypeScript 파서를 설정하여 코드 품질 유지4
• Prettier를 사용하여 일관된 코드 포맷팅 적용4

결론

타입스크립트는 자바스크립트의 모든 기능을 포함하면서도 정적 타입 시스템을 통해 코드의 안정성과 유지보수성을 크게 향상시킵니다67. 기본 타입부터 고급 기능까지 다양한 기능을 제공하여 대규모 애플리케이션 개발에 특히 유용합니다.

타입스크립트를 사용하면 코드 작성 단계에서 오류를 발견하고7, 더 나은 개발자 경험을 제공하며, 코드의 자기 문서화 능력을 높일 수 있습니다. 현대 웹 개발에서 타입스크립트는 선택이 아닌 필수가 되어가고 있으며, 이 가이드가 여러분의 타입스크립트 여정에 도움이 되기를 바랍니다.

자주 묻는 질문 (FAQ)

1. 타입스크립트를 배우는 데 얼마나 시간이 걸리나요?

자바스크립트에 익숙하다면 타입스크립트의 기본 개념을 배우는 데 1-2주 정도 소요됩니다. 하지만 고급 기능과 타입 시스템을 완전히 이해하고 활용하는 데는 몇 개월이 걸릴 수 있습니다.

2. 타입스크립트는 성능에 영향을 미치나요?

타입스크립트는 컴파일 시점에만 타입 검사를 수행하고, 런타임에는 일반 자바스크립트로 변환되어 실행되므로 성능에 직접적인 영향을 미치지 않습니다7. 오히려 타입 시스템을 통해 최적화된 코드를 작성할 수 있습니다.

3. 기존 자바스크립트 프로젝트를 타입스크립트로 마이그레이션하는 방법은 무엇인가요?

점진적으로 마이그레이션하는 것이 좋습니다. 먼저 tsconfig.json 파일을 설정하고, .js 파일을 .ts 파일로 변환하면서 any 타입을 사용하여 시작한 후, 점차 구체적인 타입으로 대체해 나가는 방식을 권장합니다.

4. 타입스크립트와 자바스크립트 라이브러리를 함께 사용할 수 있나요?

네, 대부분의 인기 있는 자바스크립트 라이브러리는 타입 정의 파일(.d.ts)을 제공하거나 DefinitelyTyped(@types/패키지명)를 통해 타입 정의를 설치할 수 있습니다.

5. 타입스크립트의 단점은 무엇인가요?

초기 설정 시간이 필요하고, 학습 곡선이 있으며, 타입 정의로 인해 코드량이 증가할 수 있습니다. 또한 일부 동적 프로그래밍 패턴을 표현하기 어려울 수 있습니다. 하지만 이러한 단점은 타입스크립트가 제공하는 이점에 비하면 크지 않은 경우가 많습니다.